前言

我们知道,理想的网页应该在 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 性能快人一步。另提供安全高可靠的融合云存储,一站式短视频直播点播解决方案,实时灵活多终端的云处理,以及流量营销等服务。详情了解>>