Я хочу оптимизировать некоторые изображения на своем сайте, используя формат WebP.
Изображения Webp представляют собой сильно сжатые файлы jpeg и png с помощью алгоритма, разработанного в Google.
Однако изображения webp могут отображаться только в современных Chrome и Opera. Если браузер поддерживает webp, он указывает image/webp в Accept Заголовок HTTP.
Рекомендуется проверить в 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, он не увидит изображение, и это ужасно.
Есть какие-нибудь решения?
Похоже, с CloudFlare этого не сделать. Однако спросите их службу поддержки, они превосходны.
Возможно, вам придется сделать это на стороне клиента, хотя это может быть проблемой для старых браузеров. Из Google WebP: часто задаваемые вопросы
HTML5 поддерживает элемент, который позволяет вам перечислить несколько альтернативных целевых изображений в порядке приоритета, так что клиент будет запрашивать первое изображение-кандидат, которое оно может правильно отобразить. Видеть это обсуждение HTML5 Rocks.