苹果在昨天的 WWDC20 主题演讲中宣布了一系列新更新，从新的硬件到更新的应用程序。 这里有很多值得一看的东西，以及足够多的设备嫉妒让人们四处传颂。
但是，在 Safari 14 Beta 版发行说明 中有一行小字吸引了我的注意。
添加了 WebP 图片支持。
🎉🎉🎉
这让我很激动，因为 WebP 是一种超级进步的格式，它以无损和有损格式编码图片，这些格式是我们已经使用的其他图片格式（如 JPEG）所拥有的，但文件大小只是它们的一小部分。我们就在 CSS-Tricks 中使用 WebP，这得益于 Jetpack 及其 网站加速器功能，该功能为支持它的浏览器提供我们上传的图片的 WebP 版本。Jeremy Wagner 有一篇关于 WebP 的 很棒的文章 以及如何使用它，特别是针对 WordPress。
所以，是的，这意味着一旦 Safari 14 发布，WebP 将在很大程度上得到普遍支持（:IE-sad-trombone:）。
这些浏览器支持数据来自 Caniuse，它提供了更多详细信息。数字表示浏览器从该版本开始支持该功能。
桌面
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 32 | 65 | 否 | 18 | 16.0 |
移动设备 / 平板电脑
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 4.2-4.3 | 14.0-14.4 |
即使有如此出色的支持，使用 <picture> 元素定义回退仍然是一个好主意。
<picture>
<source srcset="img/cat.webp" type="image/webp">
<source srcset="img/cat.jpg" type="image/jpeg">
<img src="img/cat.jpg" alt="Alt Text!">
</picture>哦，还有，Safari 14 还加入了一些 CSS 好东西，比如 :is() 和 :where() 伪类函数，我们几周前就链接了它们。Jen Simmons 选择了我们应该感到兴奋的其他关键功能。
Safari 14 Beta 版发行说明
— Jen Simmons (@jensimmons) 2020 年 6 月 22 日
• 添加了 WebP
• 更改为从大小属性派生 <img> 的纵横比
• 添加了 :is()
• 添加了 :where()
• Safari 不再支持 Flash
• 添加了 Safari 网页扩展
• 添加了网页翻译（Beta 版）
& 更多：https://#/qO2Cy7rK4A
太好了！欢迎回到几年前的苹果
我在我的网站上写了一篇帖子，大约在 WebP 宣布之后（当时它被称为“weppy”）。我提到过 Safari 插件很有前景。它一直支持到 2015 年左右 https://github.com/nickzman/weppy/releases/tag/v1.0.3
我们一直在等待 Safari 支持很长时间，但现在我们终于得到了它，我开始更多地思考浏览器的政治与实际技术之间的关系…… https://siipo.la/blog/is-webp-really-better-than-jpeg
必读：https://siipo.la/blog/is-webp-really-better-than-jpeg
这真是让我的一天都变得美好！真是太棒了！
我最近注意到 Firefox 支持 webp，所以我设置了一个脚本将一堆 png 图片转换为 webp。有趣的是，在某些情况下，最大程度压缩的无损 webp 图片比 Zopfli 压缩的 png 图片更大。这种情况并不常见，而且 Zopfli 压缩 png 图片需要更长的时间，但值得一试。
跟进一下 - WEBP 提供的一个可能性是，动画图片也可以包含透明度（想想 Gif89a，但具有全彩色）https://mathiasbynens.be/demo/animated-webp
迫不及待 - Insta、Twitter 和其他所有社交平台都将被更漂亮的动画所淹没 :)
有点希望他们在 Finder MacOS 中也支持 webp，这样我们至少可以本地查看图片。
是的！同意。很乐意看到这一点。我使用了一个叫做“Glance”的快速查看插件（它在 AppStore 上），它允许许多其他格式的预览，而原生 macOS 不支持这些格式。也许 @samuelmeuli 会考虑添加 webp？https://github.com/samuelmeuli/glance/issues/26