WebP 的前世此生

除了视频，图片占据了 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 厉害，究竟厉害在哪里？