Impossible to serve WebP images using CloudFlare?

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?

2
задан 3 June 2016 в 23:41
1 ответ

Похоже, вы не можете сделать это с помощью CloudFlare. Однако, обратитесь в их службу поддержки, они превосходны.

Вам, возможно, придется сделать это на стороне клиента, хотя это может быть проблемой для старых браузеров. Из Google WebP FAQ

HTML5 поддерживает элемент, который позволяет перечислить несколько альтернативных целей изображения в приоритетном порядке, так что клиент запросит первое изображение-кандидат, которое он сможет правильно отобразить. См. это обсуждение камней HTML5.

.
1
ответ дан 3 December 2019 в 12:40

Теги

Похожие вопросы