如何通过又拍云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压缩前后效果对比

转载于:https://my.oschina.net/upyun/blog/908233