无法使用CloudFlare提供WebP图像？

Question

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

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

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

如果浏览器支持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.这在这里描述.

客户端将获得首先由CloudFlare缓存的图像版本(webp或常规),如果客户端不支持webp,则不会看到图像,这很糟糕.

有什么解决方案吗？

Answer 1

dog.png以具有和的例子dog.jpg。

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

• 现在，您的后端将始终受到该网址的影响，并且可以分析标头（如Accept标头），并决定浏览器是否需要png/jpg或者您是否可以使用更高级的格式，如webp (Firefox、Chrome)、JPEG 2000 (Safari)和JPEG XR (IE9+)。

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

• 这些静态图像文件带有适当的缓存标头，由 CDN 缓存。