【译】 WebP 支持：超出你想象

时间 2019-11-08

标签 webp 支持超出想象繁體版

原文原文链接

本文转载自：众成翻译
译者：文蔺
连接：http://www.zcfy.cc/article/862
原文：https://optimus.keycdn.com/support/webp-support/?utm_source=html5weekly&utm_medium=emailphp

WebP 是 Google 发明的更小的替代 JPEG 和 PNG 的格式。最近有不少关于WebP支持的疑惑，细说来就是能够用它作什么，不能作什么，好比说浏览器支持，CMS 支持等等。今天我想清除你全部可能的疑虑。WebP 的支持程度实际上比你想的可能要好得多。html

WebP 浏览器支持

并不是全部浏览器都支持 WebP，因此很重要的是你得清楚哪些浏览器是支持的，这可能会影响你作决定，是否在你的网站或项目中转换并采用 WebP 图片。下面是全部主流浏览器及其 WebP支持程度。html5

截至 2016 年 7 月，全球浏览器对 WebP 支持率是 69.6% – caniuse.comweb

Chrome WebP

Google Chrome 官方自 Chrome 23 起开始支持 WebP）（最初发布于 2012 年 11 月），自 Chrome 9 起部分支持。部分支持指的是并不支持无损的、支持 alpha 通道的 WebP。浏览器

Google 的安卓浏览器（Google’s Android browser）从 4.2 版本起开始官方支持 WebP（最初发布于 2012 年 11 月），4 版本起开始部分支持。Google Chrome 安卓版（ Google’s Chrome for Android browser）从 Chrome 50 起开始支持 Webp。缓存

Opera WebP

Opera 官方自 Opera 12.1 开始支持 WebP（最初发布于 2012 年 11 月），自 Opera 11.5 起部分支持。部分支持指的是并不支持无损的、支持 alpha 通道的 WebP。服务器

Opera mini 浏览器当前全部版本都官方支持 WebP。框架

FireFox WebP

Firefox 当前不支持 WebP。Mozilla 论坛的 bug 856375 正在讨论此事。wordpress

Internet Explorer WebP

Internet Explorer 和他们新的 Edge 浏览器，都不支持WebP。并且目前并没有添加支持的任何打算。不过，已有用户发声讨论，人们要求微软将 Webp 支持加入 Edge。测试

Safari WebP

Apple 的 Safari 浏览器及其 iOS Safari 浏览器都不支持WebP。不过，最近 HTML5test 有条推文说咱们有望在 iOS 10 看到Safari支持 WebP。iOS 10 目前处于 beta 测试阶段，因此时间会说明一切。

你该使用 WebP 吗?

由于全球 WebP 支持度在 70% 左右浮动，使用这种图片格式来替代 PNG 和 JPEG 是极有意义的。还有重要的一点要提到，不管如何实现 WebP，你只是为支持的浏览器提供 WebP 服务，而为其余浏览器提供 PNG 和 JPEG。使用 WebP 并不会破坏你的图片。把这当作增值，而非改变。还有另一些东西须要考虑，如浏览器市场份额，当前流量，WebP 相对于 PNG 和 JPEG 的文件体积。

1. 浏览器市场份额

决定是否使用 WebP 的时候，记得看下浏览器市场份额，由于 Chrome 和 Opera 支持 WebP，因此有必要看下他们的占比。咱们从一些不一样来源收集了一些统计数据，它们都有本身不一样的数据收集方式：

StatCounter 浏览器市场份额

StatCounter 截至 2016 年 6 月的数据显示，Chrome 占有市场份额为 58% 的，Firefox 以大约 16% 排名第二。

W3Counter 浏览器市场份额

W3Counter 截至 2016 年 6 月的数据显示，Chrome 占有约 57% 的市场比例，Safari 以约 14% 跻身第二。

W3Schools 浏览器市场份额

W3Schools 截至 2016 年 5 月的数据显示，Chrome 占有约 71% 的市场份额，Firefox 以约 17% 居于其后。

Clicky 浏览器市场份额

Clicky 截至 2016 年 7 月的数据显示，Chrome 占有约 50% 的市场份额，Firefox 以约 18% 位居第二。

从上面的数据能够看到，Chrome 平均占有约 59% 的市场份额，因此必须意识到，若是在项目中加入 Webp 图片，大多数访客都会看到 WebP 版本。Opera 仅拥有市场份额的一小部分，但它们的用户也能够看到。

2. Google Analytics

尽管浏览器市场份额对大多数人来讲可能倾向于 Chrome，并不意味着你的网站/项目也是如此。确认数据老是很重要的。作起来很容易，点击 Google Analytics 的 “浏览器与操做系统”（“Browser & OS”）部分就能看到。在下面的例子中，能够看到将近 70% 的流量来自 Chrome。在这种状况下，WebP 是颇有利的，这意味着 70% 的访客会看到更小体积的文件。

还有，别忘了移动端！能够在 Google Analytics 的“设备”（“Devices”）部分看到。如你所见，大部分流量来自苹果设备。因此若是 iOS 10 彻底支持 WebP 的话会很有意思，这样一来会大量的移动端流量将会有戏剧性的不一样。

3. WebP 文件体积

已经有大量研究比较了 WebP 与 PNG、JPEG 的文件体积。必定要去看看它们。

JPG 转 WebP – 压缩大小比较
- WebP 平均减少了 85.87% 的文件提交。加载时间下降了 11%，页面总体大小减小了 29%。
PNG 转 WebP – 压缩大小比较
- WebP 平均减少了42.8% 的文件提交。加载时间下降了 3%，页面总体大小减小了 25%。
[WordPress 缓存开启下的 WebP
案例研究](https://www.keycdn.com/blog/wordpress-cache-enabler/)

还须要考虑成本效益比（cost-benefit ratio）。对 WordPress 这样的 CMS 来讲，如今有两种图片，一个是 JPEG 或 PNG，还有一个 WebP。所以使用 WebP 会占用服务器更多的硬盘空间。但事实是，更小体积的图片带来的是更快的加载时间。不该忽略节省下来的流量：取决于不一样项目，积累下来的数量至关可观。

其余人正在使用 WebP，虽然你可能没注意到。Dollar Shave Club 能够将其 App 的大小由 230 MB 减小到 30 MB！结果就是，使用 WebP 格式将体积减小了七倍。

CMS WebP 支持

接着平台支持的问题就来了，无论你是使用 WordPress 或 Joomla 这样的 CMS，或者仅仅是像 Laravel 这样的 PHP 框架搭建的简单的静态站点。下面咱们将会介绍一点关于如何在在不一样平台上支持 Webp 图片的内容。

WordPress WebP

事实上，WordPress 很容易实现 WebP 支持。你可使用咱们的集成图片优化(Image Optimizer) 插件，在将图片上传至 WordPress 媒体库时候自动转换为 WebP 格式。

而后你可使用免费的 WordPress Cache Enabler 插件来为访客提供 WebP 图片。

重点是，Cache Enabler 作的实际上是判断浏览器支持，为支持的浏览器提供 WebP，而为其余浏览器提供 JPEG 或 PNG。它实际上已经自动为你作好了切换工做。

Joomla WebP

Yireo 的免费的 WebP Joomla 扩展，容许在浏览器支持的状况下启用 WebP 支持。其侦测浏览器对 WebP 的支持，基于 user-agent 简单检测（这样就能正确匹配 Chrome）以及额外的 JavaScript 检测。如若检测到支持 WebP，扩展会解析输出的 HTML，确保那些支持图片（png，jpg，jpeg）的连接被 Webp 图片替换掉。

Magento WebP

Yireo 的免费的 WebP Magento 扩展，容许在浏览器支持的状况下启用 WebP 支持。其侦测浏览器对 WebP 的支持，基于 user-agent 简单检测（Chrome）以及额外的 JavaScript 检测（这样也可以匹配其余浏览器）。如若检测到支持 WebP，扩展会解析 HTML 输出，确保那些支持图片（png，jpg，jpeg）的连接被 Webp 图片替换掉。

其余平台上的 WebP

对于其余平台，你应该去看看咱们的这篇如何提供 WebP (how to deliver WebP)。某些平台启用 WebP 支持，可能须要修改你的 .htaccess 文件或者 Nginx 配置。

小结

如你所见，WebP 的支持程度可能比你最初想的要好得多。固然应该讲浏览器市场份额以及当前的浏览数据归入考虑中。比方说，若是 70% 以上的流量都来自 Chrome，那使用 WebP 来加速网站意义重大。若是你在使用 CMS，一切都很简单，由于有不少插件来帮你完成 WebP 的转换。