如何经过 WebP 自适应方案减小图片资源大小

前言

咱们知道，理想的网页应该在 1 秒内打开，而在页面的总体大小中，图片每每是所占比例最大的一部分（大约占到 60% 以上，更多了解请点击），也能够参照以下图所示。优化图片不只能够加快页面显示，还能下降移动网络的流量费用。原图产生的 PNG、JPEG、GIF 和 SVG 图片通常都有很大的压缩余地。下文将重点介绍一款图片新格式：WebP，从而揭开它神秘的面纱。

解决方案：使用 WebP 优化图像

一、什么是 WebP ?

WebP（发音 weppy)，是一种支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式 VP8。根据 Google 的测试，无损压缩后的 WebP 比 PNG 文件少了 45％ 的文件大小，即便这些 PNG 文件通过其余压缩工具压缩以后，WebP 仍是能够减小 28％ 的文件大小。更多了解参照 WebP 官网文档。

二、WebP 客户端兼容性

Google Chrome 和 Opera 浏览器以及许多其余工具和软件库都支持 WebP，可是当前并不是全部浏览器都支持 WebP，支持的状况参见以下图所示：

详细的支持状况参见 WebP 支持状况。

WebP 自适应方案解决了什么问题？

使用 WebP 图片格式，显而易见，能够享受的好处就是：

一、WebP 格式的图片能够提供更好的压缩比和更小的文件大小，能够减小网络传输，使得网络传输的速度更快；

二、网络传输的流量减小了，能够节省 CDN 流量消耗，节省带宽成本；

三、当前还有一部分客户端并不支持 WebP 格式，能够经过 CDN 层去判断，对于支持的客户端，响应 WebP 格式的图片；不支持的客户端，响应原图。从而实现无缝适配。

如何判断浏览器支持 WebP 格式？

以下图所示，是经过 Chrome 浏览器开发者工具抓包显示，能够经过查看响应头和请求头相关字段，得知该图片已经被 CDN 自动转化为 WebP 格式：

事实上，能够经过 HTTP  Accept 头就能够判断该浏览器是否支持 WebP 格式的图片，结合上图，Chrome 浏览器在发起请求的时候，会带上 Accept 头，且其值包括：image/webp，此时就说明该浏览器支持 WebP 格式图片；参见以下格式：accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8

另外，经过 HTTP 响应头里面的 Content-Type 就能够判断文件的真正类型，例如：Content-Type:image/webp，就说明这次服务端响应的是 WebP 格式的副本图片。

如何经过又拍云 CDN 实现 WebP 自适应？

以下图所示，在 CDN 层作 WebP 的自适应，须要考虑以下几个方面：

一、CDN 如何判断客户端是否支持 WebP ?

该部分目前是经过 HTTP  Accept 头来判断的，若是支持，则返回 WebP 副本并进行缓存；若是不支持，则返回原图。详细介绍参照上文介绍。

二、CDN 如何实现实时图片格式转换？

针对用户源站并不是 WebP 格式图片的时候，CDN 层须要支持将原图图片的实时转换为 WebP 格式副本，这个在 CDN 层面是无缝支持的。这样的场景是这样的：

• 客户端浏览器请求一个图片资源，例如：http://webp.example.com/test.png;
• CDN 经过 Accept 头已经判断客户端浏览器支持 WebP 格式的图片；
• CDN 回用户源站取回原图并将原图实时转为 WebP 格式的图片，并响应给客户端浏览器。

这里值得强调的是，又拍云 CDN 已经无缝兼容了各类做图场景和访问方式，包括：

• 原图访问 ，示例：/a.jpg
•  缩略图版本号，示例：/a.jpg!123
• URL 做图 ，示例：/a.jpg!/format/webp
• 版本号 + URL 做图：/a.jpg!123/format/webp

详细做图场景请参见图片处理服务。

三、如何实现相同 URL 访问，缓存不一样副本图片？

这个须要利用到缓存里面的 Vary 机制了，同一个 URL 根据不一样 Header 头的值缓存多份不一样的拷贝，同时保持 URL 不变。例如：

• 请求头字段 Accept: image/webp -> 响应头须要知足 Vary: Accept 以及 Content-Type: image/webp;
•  请求头字段 Accept-Encoding: gzip -> 响应头须要知足 Vary: Accept-Encoding 以及 Content-Encoding: 

以上，回答以上 3 个问题以后，CDN 就能够实现了 WebP 的自适应。开启 WebP 特性以后，能够产生怎样的效果？且看下文。

使用 WebP 自适应以后的效果如何？

下面咱们来作一次测试，访问一张 PNG 图片，看看开启先后的效果怎样。

一、开启前

随机在又拍云官网产品文档上找到了一张 PNG 图片，截图所示：

经过截图显示，能够获得以下信息：

 – content-length:290334
 – content-type:image/png
 – x-cache:MISS(S) from mix-hz-fdi-165; HIT(R) from ctn-zj-lna3-016

能够知道，该图片大小为 290 KB，图片类型为 PNG，在 CDN 边缘节点已经缓存命中。

二、开启后

开启 WebP 特性以后，这里强调一下，CDN 边缘命中以后，是不会触发 WebP 自动转换。为了触发该特性，我针对刚才的访问连接作一次手动刷新。而后从新请求图片资源，从新抓包，看以下截图信息：

经过截图显示，能够获得以下信息：

 – content-length:69038
 – content-type:image/webp
 – x-cache:MISS from 403-zj-fud-208, MISS from mix-hz-fdi-168, MISS from ctn-zj-lna3-016

能够很明显的看出，图片大小减小了，为：69 KB，图片格式转换为 webp 格式。

 

总结下，这次测试了一个 PNG 图片，经过 CDN 自适应 WebP 以后，图片大小从 290 KB 减小到了 69 KB，效果是很是的明显，不一样的图片格式，压缩比会有所不一样。若是您的网站图片居多，且但愿提高用户访问体验，减小 CDN 访问带宽，咱们期待您的测试和使用。