Boostez les images de votre site Web grâce à Webp et Nginx !

Vous avez un site Web et vous souhaitez accélérer le temps de chargement des pages de votre site ?

Voici une astuce assez simple à mettre en place qui vous permettra d'utiliser pleinement le codec Webp afin d'augmenter la compression des images de votre site et leur permettre de se charger plus rapidement.

Pourquoi utiliser Webp pour compresser ses images ?

Le Webp est un codec de compression développé par Google qui a plus de dix ans aujourd'hui. Il permet de compresser les images destinées au Web tout en permettant de garder une bonne qualité d'image. Sa spécificité est qu'il est capable de compresser tout type d'images que ce soit du JPEG, PNG ou du GIF avec un gain se mesurant de 30 à 80% en fonction du type d'image.

La bonne nouvelle est que seul IE11 ne supporte pas le Webp à l'heure actuelle sur le Web, il ne le supportera jamais puisque sa date de fin de support est annoncée pour cet été. Vous pouvez donc largement utiliser le Webp sur vos sites pour compresser vos images.

Comment compresser les images de son site en Webp ?

La compression des images existantes de votre site Internet peut se faire au travers de l'outil Opensource "cwepb".

Pour vous simplifier la vie dans les arguments de l'outil, je vous recommande le script bash "img-optimize" disponible sous Github qui fait parfaitement le travail après l'avoir installé.

optimize.sh --webp --path ./images

Vos images au format Webp porteront le même nom que l'image d'origine, mais avec l'extension ".webp".

Ainsi une image "blog.png" se fera compressée en Webp avec le nom "blog.png.webp".
Les images d'origines ne seront pas altérées par ce script.

Comment forcer Nginx à délivrer des images en Webp ?

Il est possible d'indiquer à Nginx de délivrer des images au format Webp seulement si le navigateur le supporte.

La première étape consiste donc à vérifier si le navigateur qui visite votre site supporte le Webp, cela peut se faire en vérifiant le contenu l'entête HTTP "HTTP Accept" du navigateur Web et de positionner une variable $webp_suffix avec la valeur ".webp" seulement si la présence du mot clef "webp" est vérifiée.

Pour ce faire, un bloc de type "map" est à intégrer dans le bloc "http" de votre fichier de configuration Nginx pour permettre la vérification du support du codec Webp par le navigateur distant.

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

Une fois cette action réalisée, il faut maintenant indiquer au serveur Web de fournir en priorité un fichier de type Webp si celui-ci est présent avant de fournir le fichier original demandé par le navigateur.

Cet ordre de fourniture peut être opéré facilement au travers de l'instruction "try_files" :

try_files $uri$webp_suffix $uri =404

Le serveur Web fournira en priorité le fichier Webp si le navigateur distant supporte le codec et si le fichier existe sur le serveur avant de fournir le fichier original. Il finira par retourner une erreur 404 si jamais l'image n'est pas trouvée.

Enfin, une dernier entête HTTP peut être utile sur votre site Web pour indiquer que le contenu délivré par le serveur Web peut dépendre de l'encoding supporté par le navigateur :

add_header Vary "Accept-Encoding";

Voici au final à quoi pourrait ressembler la configuration Nginx pour la "location" correspondant au répertoire des images de votre site :

location ^~ /content/images/ {
    root /var/www/www.monsite.org/;
    expires max;
    add_header Vary "Accept-Encoding";
    add_header "Access-Control-Allow-Origin" "*";
    add_header Cache-Control "public, no-transform";
    access_log off;
    log_not_found off;
    etag on;
    try_files $uri$webp_suffix $uri =404;
}

Si vous être perdu dans mes explications, voici un Gist de configuration Nginx minimale reprenant les éléments partagés au sein de cet article.

Après cette modification réalisée sur la configuration du fichier vhost de votre site et votre serveur Nginx redémarré, votre serveur Web devrait délivrer des fichiers au format Webp en priorité.

Vous pouvez le vérifier en analysant le type d'images qui sont téléchargées par votre navigateur. L'extension Webp devrait apparaitre depuis l'extension développeur de votre navigateur préféré.

J'espère que ce petit tutoriel vous permettra d'optimiser les performances de votre site Web. N'hésitez pas à jeter un coup d'oeil sur mon tutoriel qui explique comment activer facilement le plugin Brotli sur votre serveur Nginx afin d'augmenter le niveau de compressions des fichiers JS et CSS de votre site Web.

Si vous souhaitez discuter tuning Nginx, n'hésitez pas à rejoindre le serveur Discord de la communauté Geeek ouvert à tous et à toutes.

---