无法使用 CloudFlare 提供 WebP 图像？

Question

我想使用 WebP 格式优化我网站上的一些图像。

借助 Google 开发的算法，Webp 图像是高度压缩的 jpeg 和 png。

但是，webp 图像只能在现代 Chrome 和 Opera 中显示。 如果浏览器支持 webp，它会在 Accept HTTP 标头中指定 image/webp。

如果浏览器支持 webp 格式并且图像的 webp 版本是否存在于磁盘上，如果存在 - 提供 webp 图像，如果不支持 - 提供默认图像，则检查 nginx 是个好主意。

例如：

http://example.com/dog.png，Accept: image/webp, image/png, image/jpeg。 nginx必须发送dog.png.webp

http://example.com/dog.png，Accept: image/png, image/jpeg。 nginx必须发送dog.png

可以在这个 nginx 配置 https://github.com/igrigorik/webp-detect/blob/master/nginx.conf 和 https://github.com/kavu/sprockets-webp 中找到更多解释#nginx

没关系。但我正在使用 CloudFlare CDN 来加快资产交付速度。

在这样的图像服务条件下，我们必须添加标题Vary: Accept，这样浏览器和代理中的缓存才能正常工作。但有个问题！ CloudFlare 仅支持 Vary: Accept-Encoding。这被描述为here。

客户端将首先获得由 CloudFlare 缓存的图像版本（webp 或常规），如果客户端不支持 webp，它将看不到图像，这很糟糕。

有什么解决办法吗？

Answer 1

以dog.png 和dog.jpg 为例。

• 让您的后端服务一个/dog（没有任何文件扩展名），它将始终以Cache-Control: private 响应，因此不会被CDN 缓存。

1234563比如webp(Firefox, Chrome)、JPEG 2000(Safari)和JPEG XR(IE9+)。

• 现在后端根据需要转发 (301Moved Permanently) 到 dog.png 和 dog.jpg 或转换后的 dog.webm、dog.jp2 和 dog.jxr。

  李>

• 为这些静态图像文件提供适当的缓存标头以供 CDN 缓存。