无法使用CloudFlare提供WebP图像？

Question

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

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

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

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

例如：

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缓存。

• 您的后端现在将始终被该URL选中，并且可以分析诸如Accept标头之类的标头，并确定浏览器是否需要png / jpg或是否您可以使用更高级的格式，例如webp (Firefox, Chrome)，JPEG 2000 (Safari)和JPEG XR (IE9+)。

• 现在，后端将{301 Moved Permanently转发到dog.png和dog.jpg或转换后的dog.webm，dog.jp2和dog.jxr。

• 那些静态图像文件带有适当的缓存头，以供CDN缓存。