我想使用 WebP 格式优化我的网站上的某些图像。
Webp 图像是借助 Google 开发的算法高度压缩的 jpeg 和 png。
但是，webp 图像只能在现代 Chrome 和 Opera 中显示。如果浏览器支持 webp，则会image/webp在AcceptHTTP 标头中指定。
最好在 nginx 中检查浏览器是否支持 webp 格式，以及磁盘上是否存在图像的 webp 版本，如果是，则提供 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，它将看不到图像，这很糟糕。
有什麼解決方案嗎？
答案1
似乎无法使用 CloudFlare 做到这一点。不过，你可以问问他们的支持团队，他们很优秀。
你可能必须在客户端执行此操作，尽管这对较旧的浏览器来说可能是一个问题。从Google WebP 常见问题解答
HTML5 支持一个元素，它允许您按优先级顺序列出多个备选图像目标，以便客户端将请求第一个可以正确显示的候选图像。请参阅HTML5 Rocks 上的讨论。