Mettre en place les images au format WebP sur son site avec NGINX

1/52/53/54/55/5 (2 votes, moyenne: 5,00 sur 5)
Loading...
M

Bonjour à tous,

Aujourd’hui, petite procédure pour mettre en place les images au format WebP sur son site avec NGINX.

 

Qu’est-ce que le WebP et pourquoi le mettre en place ?

WebP est un format d’image matricielle développé et mis à disposition du public par Google. Il exploite un algorithme de compression avec pertes prédictif utilisé pour les images clés (en) du VP8 (qui est le codec vidéo du format WebM) et un conteneur léger et extensible RIFF1,2.

Google le présente comme mieux adapté que les compresseurs précédents aux processeurs actuels et surtout aux densités de pixels des écrans actuels (110 à 240 ppi). Par ailleurs, toujours selon Google, 60 % des octets transmis sur la toile seraient des images, et WebP procurerait de 30 % à 80 % de réduction d’espace face à JPEG et PNG3.

 

Source : https://fr.wikipedia.org/wiki/WebP

Ce qu’il faut retenir ? C’est un nouveau format d’image qui permet de réduire de 30 à 80% l’espace qu’occupent vos images. Et donc le volume de données nécessaire au final sur la bande passante de votre serveur et sur les informations que vos visiteurs téléchargements.

C’est tout bénef.

 

Mais la question étant, pourquoi est-ce que l’on en parle que maintenant alors que ça 10 ans ? L’adoption !

Concrètement, c’est à peu près supporté par tout le monde sauf Apple / Safari (tiens alors) et Internet Explorer depuis 2019, avant c’était beaucoup de travail pour pas grand-chose.

 

Le principe

Ici, on ne va pas se contenter de simplement mettre en place le WebP, on va aussi optimiser toutes les images existantes en JPG, JPEG et PNG et ensuite on convertira tout automatiquement en WebP.

Pour cela on va utiliser le magnifique script fourni par Thomas disponible ici : https://github.com/VirtuBox/img-optimize

 

Attention, je ne fais pas une installation globale, simplement sous un utilisateur spécifique, car je n’ai qu’un seul site sur mon serveur qui dispose d’images, ce blog (c’est dingue non ?).

 

Mise en place

Prévoyez du temps pour la première conversion.

 

Installation du script

Connectez-vous avec votre utilisateur, tap pour ma part (j’aime les choses simples).

Installez les pré-requis :

sudo apt install jpegoptim optipng webp -y

 

Téléchargez le script et créez l’alias de commande pour l’utilisateur local :

git clone https://github.com/VirtuBox/img-optimize.git $HOME/.img-optimize
echo "alias img-optimize=$HOME/.img-optimize/optimize.sh" >> $HOME/.bashrc
source $HOME/.bashrc

 

Maintenant, rendez-vous dans le dossier où se trouvent les images de site, par exemple pour mon wordpress :

cd /var/www/wordpress/abyssproject.net/wp-content/uploads/

 

Et lancez le script en mode interactif :

img-optimize -i

 

Répondez « Y » à toutes les questions :

Cela va prendre beaucoup de temps selon le nombre d’images que vous avez (il m’a fallu 48h pour vous donner une idée, il y a des cadavres sur le blog au bout de 8 ans).

Une fois que tout sera fait sans erreur, vous aurez enfin toutes vos images, en jpg, en png et surtout en webp. Pas mal.

 

Automatisation

Pas mal ? Pas vraiment, vous allez surement ajouter des images, et vous n’allez pas faire l’optimisation à chaque fois, l’idée c’est de faire une optimisation à chaque fois, uniquement avec les fichiers modifiés durant les dernières 24h.

Créez un répertoire log dans votre user :

mkdir $HOME/log

 

Maintenant, créez le premier script d’optimisation des images jpg-png (en modifiant le nom d’utilisateur et le répertoire des images évidemment) :

nano $HOME/jpg-png-cron.sh
#!/bin/bash

## cronjob to optimize PNG/JPG images
## images path are listed in sites.csv
## written by VirtuBox (https://virtubox.net)

sites="/var/www/wordpress/abyssproject.net/wp-content/uploads/"

for site in $sites; do
  # optimize jpg images created in the last 24 hours
  find "$site" -ctime 0 -type f \( -iname "*.jpg" -o -iname "*.jpeg" \) -print0 | xargs -0 jpegoptim --preserve --strip-all -m82 >> /home/tap/log/jpg-png-cron.log 2>&1
  # optimize png images created in the last 24 hours
  find "$site" -ctime 0 -type f  -iname '*.png' -print0 | xargs -0 optipng -o7 -strip all  >> /home/tap/log/jpg-png-cron.log 2>&1
done

 

Créez ensuite celui pour la conversion en webp (en modifiant le nom d’utilisateur et le répertoire des images évidemment) :

nano $HOME/webp-cron.sh
#!/bin/bash

## cronjob to convert PNG/JPG images to WebP
## images path are listed in sites.csv
## written by VirtuBox (https://virtubox.net)

sites="/var/www/wordpress/abyssproject.net/wp-content/uploads/"

for site in $sites; do
# convert png created in the last 24 hours to webp
{
find "$site" -ctime 0 -type f -iname "*.png" -print0 | xargs -0 -I {}  \
bash -c '[ ! -f "{}.webp" ] && { cwebp -z 9 -mt {} -o {}.webp; }' >> /home/tap/log/webp-cron.log 2>&1
# convert jpg created in the last 24 hours to webp
find "$site" -ctime 0 -type f \( -iname "*.jpg" -o -iname "*.jpeg" \) -print0 | xargs -0 -I {} \
bash -c '[ ! -f "{}.webp" ] && { cwebp -q 82 -mt {} -o {}.webp; }'
} >> /home/tap/log/webp-cron.log 2>&1
done

 

Maintenant, ouvrez le crontab de l’utilisateur :

crontab -e

 

Programmez l’optimisation automatique (tous les jours à 4h du matin par exemple) :

0 4 * * * /home/tap/jpg-png-cron.sh && /home/tap/webp-cron.sh > /dev/null 2>&1

 

Configuration de Nginx

Maintenant, la partie qui va vite, la configuration du serveur Web Nginx.

Pas d’inquiétude, je vous préviens en avance que vous verrez toutes les url de vos images en .png et .jpg/.jpeg, mais cela sera bien du .webp sur les navigateurs compatibles, vous allez comprendre après.

Aussi, si vous avez une version à jour de Nginx, pas besoin d’indiquer le type mime. C’est déjà inclus.

Merci à Mats Thorburn pour sa configuration simple : https://matteth.wordpress.com/2014/09/29/serving-webp-images-in-wordpress-with-nginx/

 

Configuration du map Nginx

Première chose, on doit d’abord enregistrer une variable dans Nginx pour faire la redirection vers le format webp après.

Créez un nouveau fichier de config :

nano /etc/nginx/conf.d/webp.conf

 

Ajoutez-y ceci :

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

 

Maintenant, ouvrez le vhost de votre site web :

nano /etc/nginx/sites-enabled/abyssproject.vhost

 

Ajoutez une location pour l’envoie à la volée des images webp (on ne fait pas une redirection ici, on perdrait trop de temps).

On en profite pour ajouter le cache du WebP dans le bloc en dessous. L’exemple ici est valide pour WordPress :

        location ~* ^/wp-content/uploads/.+\.(png|jpg)$ {
            add_header Vary Accept;
            try_files $uri$webp_suffix $uri =404;
        }

        location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc|css|js|woff|woff2|webp)$ {
            expires                     max;
            add_header                  Pragma public;
            add_header                  Cache-Control "public, must-revalidate, proxy-revalidate";
        }

 

Rechargez la configuration de Nginx :

systemctl reload nginx

 

Test

La partie marrante maintenant. Vous ne verrez pas que ce sont des images WebP à l’œil nu.

Comment qu’on fait ? Firefox vous le dira si vous allez sur l’url direct d’une image, par exemple :

Marrant non ? C’est l’url d’une image .png, mais c’est bien reconnu comme une image WebP.

Curieux non ? En fait c’est le Nginx qui modifie le suffixe de l’image sans que vous ne le voyiez.

 

C’est plus parlant avec les options développeurs en mode analyse réseau :

Amusez-vous bien maintenant et réduisez la taille de tous vos sites 🙂

A propos de l'auteur

Nicolas Simond
Nicolas Simond

Administrateur Systèmes et Réseaux et guitariste hard rock et metal à mes heures perdues.
Je suis le créateur et l'unique rédacteur d'Abyss Project, c'est ici que je note la plupart de mes procédures et quelques divagations.

Si vous l'article vous a aidé, pensez à me payer un café :)

guest

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

6 Commentaires
Plus récents
Plus anciens Populaires
Inline Feedbacks
View all comments
Seboss666
27 jours plus tôt

Juste pour info, pour Manjaro/Arch le paquet c’est libwebp et pas juste webp (me demandez pas pourquoi…) 😉

Damien
Damien
28 jours plus tôt

Merci. Et pour un site statique avec Hugo et Nginx ?

Damien
Damien
Reply to  Nicolas Simond
27 jours plus tôt

Merci.

Maxime Michaud
28 jours plus tôt

Merci pour l’article 👌