3

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 image/webp in 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.

For example:

http://example.com/dog.png, Accept: image/webp, image/png, image/jpeg. nginx must send dog.png.webp

http://example.com/dog.png, Accept: image/png, image/jpeg. nginx must send dog.png

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?

yivo
  • 151
  • 5

1 Answers1

1

Seems like you can't do it using CloudFlare. However ask their support team, they're excellent.

You may have to do it on the client side, though this may be a problem for older browsers. From the Google WebP FAQ

HTML5 supports a element, which allows you to list multiple, alternative image targets in priority order, such that a client will request the first candidate image that it can display properly. See this discussion on HTML5 Rocks.

Tim
  • 31,888
  • 7
  • 52
  • 78