如何通过又拍云WebP兼容方案来减少图片体积？

为了帮助用户更便捷地使用WebP，在减少图片流量的同时提高页面渲染速度，提升访问体验。又拍云上线了基于CDN的WebP全平台兼容方案。

为什么要使用WebP自适应方案？

• 无缝适配各浏览器和移动端。又拍云CDN自动判断对于支持的客户端，响应 WebP 格式的图片；不支持的客户端，响应原图。

• 支持多种图片格式转换。动态GIF、JPG、PNG多种图片实时转换成WebP格式。

• 提升图片加载速度。WebP 格式的图片可以提供更好的压缩比和更小的文件大小，使得网络传输的速度更快；

• 减少图片传输流量。以图片为主的网站可以大幅节省 CDN 流量消耗。

如何判断浏览器支持 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兼容

1. CDN 如何判断客户端是否支持 WebP ?
该部分目前是通过 HTTP Accept 头来判断的，如果支持，则返回 WebP 副本并进行缓存；如果不支持，则返回原图。

2. 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
详细作图场景请参见图片处理服务。

3. 如何实现相同 URL 访问，缓存不同副本图片？
这个需要利用到缓存里面的 Vary 机制了，同一个 URL 根据不同 Header 头的值缓存多份不同的拷贝，同时保持 URL 不变。例如：
请求头字段 Accept: image/webp -> 响应头需要满足 Vary: Accept 以及 Content-Type: image/webp;
请求头字段 Accept-Encoding: gzip -> 响应头需要满足 Vary: Accept-Encoding 以及 Content-Encoding:

推荐阅读：
WebP压缩前后效果对比