Magento 2 avec Nginx et Varnish - Comment servir des images webp

Lorsque le map est défini comme suit:

map $http_accept $webp_suffix {
    default       "";
    "~image/webp" ".webp";
}

Et lorsque le try_files est:

try_files $uri$webp_suffix $uri$webp_suffix/ /get.php$args;

Cela signifie que lorsque l'URI de la requête est /media/image.jpg, nginx recherchera image.jpg.webp si l'en-tête Accept de l'utilisateur contient image/webp.

Par conséquent, vous devez ajouter l'extension .webp à tous les noms de fichiers image, au lieu de remplacer l'extension.

Modifier :

Pour que cela fonctionne sur n'importe quel serveur de cache autre que le serveur d'origine, le cache doit stocker les différentes versions de l'URL.

Pour cela, il faut ajouter

add_header Vary Accept;

dans la configuration nginx. Cela indique au cache en amont qu'il doit stocker des versions différentes de l'URL en fonction de l'en-tête Accept de l'utilisateur.

Donc, dans votre cas, Varnish doit être configuré pour respecter l'en-tête Accept.

Cloudflare pose un autre problème. Il ne prend en charge aucun en-tête Vary: Accept, donc cette approche de fournir des images WebP ne fonctionne pas avec Cloudflare directement.

Cela peut être contourné en ajoutant un travailleur Cloudflare, qui extrait l'en-tête Accept des requêtes, et définit des clés de cache en fonction de celui-ci.