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

原创
2017/05/24 16:15
阅读数 254

作者:学军

为了帮助用户更便捷地使用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压缩前后效果对比

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部