我想使用WebP格式优化我的网站上的一些图像。
Webp图像是高度压缩的JPEG和PNG与谷歌开发的algorithm的帮助。
但是，webp图像只能在现代的Chrome和Opera中显示。 如果浏览器支持webp，它将在Accept HTTP标题中指定image/webp 。
如果浏览器支持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
在这个nginxconfigurationhttps：//github.com/igrigorik/webp-detect/blob/master/nginx.conf和https：//github.com/kavu/sprockets-webp#nginx中可以find更多的解释
没关系。 但是我正在使用CloudFlare CDN来加速资产交付。
有了这样的图像服务条件，我们必须添加头Vary: Accept所以caching浏览器和代理将正常工作。 但有个问题！ CloudFlare仅支持Vary: Accept-Encoding 。 这在这里描述。
客户端将获得由CloudFlare第一（WebP或常规）caching的图像版本，如果客户端不支持WebP，它将不会看到图像，这是可怕的。
有没有解决办法？
似乎你不能用CloudFlare做。 然而问问他们的支持团队，他们是优秀的。
您可能必须在客户端执行此操作，虽然这可能是旧版浏览器的问题。 来自Google WebP常见问题
HTML5支持一个元素，它允许您按优先顺序列出多个替代图像目标，以便客户端将请求第一个可以正确显示的候选图像。 请参阅关于HTML5 Rocks的讨论 。