前言

我们知道，理想的网页应该在 1 秒内打开，而在页面的整体大小中，图片往往是所占比例较大的一部分，据Akamai统计，图片大小已经占据整个网站63%的体积，成为网站页面中消耗带宽和影响页面加载速度较大的部分。因此降低网站图片大小成为优化网站性能和节省带宽的有效办法。网站常用的 PNG、JPEG、GIF 和 SVG 图片一般都有很大的压缩余地，但是图片质量在很大程度上影响着网站的用户体验。幸而，谷歌推出的WebP 图片格式，能够在不影响用户体验的前提下，能减少图片50%大小。

花瓣全站启用图片WebP格式前后带宽对比：

△花瓣网的带宽和请求变化趋势

从5月7日开始，花瓣在使用又拍云CDN并开启WebP自适应功能后，在总体请求几乎没有变化的情况下，整体带宽下降了一半。

花瓣是如何完成整站图片改造的？

WebP图片格式转换和浏览器兼容，无需网站服务器和前端等层面技术上的改动，完全可以通过又拍云CDN服务来完成。

云处理服务：实时完成图片格式转换

针对jpg、png、gif等非WebP格式图片时，需转换为WebP格式，提供给浏览器访问。

又拍云提供了多种作图方式

• 原图访问 ，示例：/a.jpg

• 缩略图版本号，示例：/a.jpg!123
  

• URL 作图 ，示例：/a.jpg!/format/webp
  

• 版本号 + URL 作图：/a.jpg!123/format/webp
  

又拍云图片集群每天处理超9000万次作图请求，且与又拍云的CDN、云存储服务无缝结合。因此使用又拍云CDN服务，就能将原图实时转换为WebP格式。

通过又拍云CDN实现WebP兼容

1. 通过CDN判断浏览器是否支持WebP

Google Chrome 、 Opera 等浏览器以及许多其他工具和软件库都支持 WebP，但是目前并非所有浏览器都支持 WebP。因此需要对浏览器进行识别。又拍云CDN通过HTTP Accept来自动判断浏览器是否支持WebP格式的图片。如果支持，又拍云CDN则将原图实时转为 WebP 格式的图片，并推送给浏览器；如遇到不支持WebP格式的浏览器，则推送原图。

2. 如何实现相同 URL 访问，缓存不同副本图片？

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

请求头字段 Accept: image/webp -> 响应头需要满足 Vary: Accept 以及 Content-Type: image/webp;

请求头字段 Accept-Encoding: gzip -> 响应头需要满足 Vary: Accept-Encoding 以及 Content-Encoding: gzip

很明显，WebP格式是提升用户体验的又一利器，虽然浏览器对WebP的支持仍有需要改进的地方，但完全可以使用又拍云CDN服务，来解决WebP兼容问题和处理批量WebP图片格式转换，高效地减少网站带宽成本。

关于又拍云

又拍云致力于为客户提供一站式的在线业务加速服务，为用户网页图片、文件下载、音视频点播、动态内容，全站整体提供加速服务，拥有智能控制台面板，具有SSL全链路加密优化，自定义边缘规则等特性，同时支持 WebP 、H.265 、Gzip 压缩、HTTP/2 等新特性，CDN 性能快人一步。另提供安全高可靠的融合云存储，一站式短视频、直播、点播解决方案，实时灵活多终端的云处理，以及流量营销等服务。详情了解>>