WebP 的前世今生

Posted 2020-10-13 又拍云

除了视频，图片占据了 PC 和 App 的大部分流量，为运营方带来高额的成本支出，同时过多的图片加载会影响到网站与 App 的加载速度。因此在保证图片质量的前提下缩小图片的体积就成了迫在眉睫的事情。

目前，传统的图片格式如 JPEG、PNG、GIF 等格式的图片已经没有太多可以优化的空间，而 Google 推出 WebP 格式在图片压缩方面有了新的突破。

WebP 的诞生及原理

WebP 的诞生是因为最初 Google 开发了一种基于 VP8 视频编码格式的 WebM 视频格式，Google 的工程师意识到 WebM 格式非常适合压缩关键帧，由此开发了 WebP 图片格式。

WebP 最初发布于 2010 年，主要目标是使图片质量和 JPEG 格式质量相同的情况下，减少图片文件的体积，籍此减少互联网上图片的发送时间和流量消耗。发布不久之后，WebP 便被整合到 Chrome 以及 android 系统中，并且 Google 发布了函数库，让 ios 应用等其他工具支持 WebP 格式。

WebP 图片格式派生自 VP8 视频编码，同时提供有损压缩和无损压缩：

• 有损 WebP 压缩使用的图像编码方式与 VP8 视频编解码器中压缩视频关键帧的方法相同。利用图像已编码部分预测未编码部分，将图像细分来进行预测处理，分块越细预测越准确。获取编码数值后将原图像数据减去预测数据得到差值，仅对差值进行编码，以此控制大小；

• 无损 WebP 压缩使用已知的图像片段来精确地重建新的像素，在无法找到相应的匹配值的情况下，使用本地调色板进行优化。

Webp使图片体积减少45%

与其他图片格式相比，WebP 集合了多种图片文件格式的特点。它像 JPEG 一样适合压缩照片和其他细节丰富的图片，像 GIF 一样可以显示动态图片，像 PNG 一样支持透明图像。根据 Google 的测试，WebP 无损压缩图片比 PNG 图片少了 45％ 的文件体积，即使这些 PNG 图片在使用 pngcrush 和 PNGOUT 处理后，WebP 依旧可以减少 28％ 的文件体积。

△ WebP 图片格式与其他图片格式对比

WebP 应用效果

随着浏览器对 WebP 支持的普及，目前也有越来越多的互联网开始使用 WebP，这里分享几个数据：

YouTube 的视频略缩图采用 WebP 后，网页加载速度提升了 10%；

Google Chrome 应用商店采用 WebP 后，每天可以节省几 TB 的带宽，页面加载时间减少了30% 左右；

花瓣网在 2017 年 5 月开启 WebP 后，在网站总体请求量没有减少的情况下，整体带宽下降了近 50%。

WebP 格式兼容情况

虽然 WebP 的使用给实际应用带来了很多好处，且 Google Chrome 和 Opera 浏览器以及许多其他工具和软件库都支持 WebP，但是到目前为止也并非所有浏览器都支持 WebP， IE、Edge、Firefox、Safari 就均未支持 WebP 格式。

△ WebP 支持的情况

如何开启 WebP 图片格式

WebP 凭借优异的图片压缩性能，以及兼备无损和有损两种压缩算法，迅速在各大网站、App 普及。那么要如何在网站中开启 WebP 格式呢？

△ 又拍云控制台 WebP 自适应开启方式

又拍云目前已经支持 WebP 图片格式转换，而且还支持 WebP 自适应功能。在又拍云后台一键开启 WebP 自适应功能，即可通过 CDN 平台智能判断客户端浏览器是否支持 WebP 解码，如果支持则返回 WebP 格式图片，如果不支持则会返回原图，在客户端以及源站无需任何改动。

 

参考文章：

WebP—维基百科 https://zh.wikipedia.org/wiki/WebP

A new image format for the Web https://developers.google.com/speed/webp/

 

相关阅读：都说 WebP 厉害，究竟厉害在哪里？