Je veux optimiser certaines images sur mon site en utilisant le format WebP.
Les images Webp sont des jpegs et des pngs hautement compressés à l'aide de l'algorithme développé par Google.
Cependant, les images webp ne peuvent être affichées que dans les versions modernes de Chrome et Opera. Si le navigateur prend en charge webp, il spécifie image/webp en Accept En-tête HTTP.
Il est bon de vérifier dans nginx si le navigateur supporte le format webp et si la version webp de l'image existe sur le disque et si oui - servir l'image webp, sinon - servir l'image par défaut.
Par exemple :
http://example.com/dog.png , Accept: image/webp, image/png, image/jpeg . nginx doit envoyer dog.png.webp
http://example.com/dog.png , Accept: image/png, image/jpeg . nginx doit envoyer dog.png
Un peu plus d'explications peuvent être trouvées dans cette configuration nginx https:// github.com/igrigorik/webp-detect/blob/master/nginx.conf et https:// github.com/kavu/sprockets-webp#nginx
C'est bon. Mais j'utilise le CDN CloudFlare pour accélérer la livraison des ressources.
Avec de telles conditions de service d'image nous devons ajouter l'en-tête Vary: Accept afin que la mise en cache dans le navigateur et le proxy fonctionnent correctement. Mais il y a un problème ! CloudFlare ne prend en charge que Vary: Accept-Encoding . Ceci est décrit aquí .
Les clients obtiennent d'abord la version de l'image qui a été mise en cache par CloudFlare (webp ou normale) et si le client ne supporte pas webp, il ne verra pas l'image et c'est terrible.
Y a-t-il des solutions ?
