I want to optimize some images on my site using WebP format.
Webp images are highly compressed jpegs and pngs with the help of algorithm developed in Google.
However, webp images can be displayed only in modern Chrome and Opera.
If browser supports webp it specifies
Accept HTTP header.
It is good idea to check in nginx if browser supports webp format and if webp version for image exists on disk and if so - serve webp image, if not - serve default image.
Accept: image/webp, image/png, image/jpeg. nginx must send
Accept: image/png, image/jpeg. nginx must send
A little bit more explanation can be found in this nginx configuration https:// github.com/igrigorik/webp-detect/blob/master/nginx.conf and https:// github.com/kavu/sprockets-webp#nginx
That's ok. But I am using CloudFlare CDN to speed up asset delivery.
With such image serve conditions we must add header
Vary: Accept so cacheing in browser and proxy will work properly. But there is a problem! CloudFlare supports only
Vary: Accept-Encoding. This is described here.
Clients will get version of image which was cached by CloudFlare first (webp or regular) and if client doesn't supports webp it will not see image and it is terrible.
Is there any solutions?