如何设置 WebP 自适应?

功能说明

WebP 自适应功能是 CDN 平台智能判断客户端浏览器是否支持 WebP 解码,如支持则返回 WebP 格式图片,否则返回原图,客户端以及源站无需任何改动。开启该特性,可以有效节省 CDN 传输带宽,加速图片渲染速度。

如何实现?

WebP 自适应大致的处理流程如下:

1.CDN 如何判断客户端是否支持 WebP ?

CDN 是通过 HTTP Accept 头来判断的,如果支持,则返回 WebP 副本并进行缓存;如果不支持,则返回原图。以 Chrome 浏览器为例:

accept:image/webp,image/apng,image/*,*/*;q=0.8

如上列表可以看出,当 Accept 请求头里面如果有 image/webp 字段,则说明客户端支持 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

配置引导

登陆 CDN 控制台,依次进入:服务管理 > 功能配置 > 性能优化 > WebP 自适应,开启即可。如下图所示::

在配置界面,滑动右边的按钮,在确定对话框下,点击【确定】按钮即可一键开启。

注意事项

  • CDN 平台会根据请求头 Accept: image/webp 来智能判断客户端是否支持 WebP 解码,不支持的客户端,会默认返回原始图片,可以无缝切换;
  • 已经使用了又拍云自定义版本作图、URL 作图、自定义版本作图+URL 作图的请求也无缝支持该特性;
  • 在 CDN 节点未缓存 WebP 副本的情况下,CDN 平台会实时生成 WebP 副本并返回。

更多了解,请参照:如何通过 WebP 自适应方案减少图片资源大小移动端如何使用 WebP(上)移动端如何使用 WebP(下)

这篇文章有帮助吗?

相关文章