Tutoriel : Convertir massivement vos images en WebP et AVIF sans plugin !
Salut les Geekz ! Si vous gérez un blog WordPress depuis quelques années, votre dossier uploads doit probablement peser plusieurs gigaoctets. Pour satisfaire les exigences de Google PageSpeed et offrir une navigation fluide à vos lecteurs, passer vos images au format WebP ou AVIF est devenu indispensable.
Le problème ? Quand on a 20 000 images, les plugins WordPress classiques (comme Smush, Imagify ou même LiteSpeed Cache) finissent souvent par saturer la RAM de votre serveur ou partent en Timeout (erreur 504).
Aujourd’hui, au Geekz Club, on pose les plugins et on sort le terminal SSH. Voici la méthode ultime pour utiliser la puissance brute de votre serveur Linux pour compresser vos médias, sans jamais faire planter WordPress. A vos terminaux SSH, Go !
D’ailleurs, si tu cherches une machine de guerre pour héberger tes propres projets, tes serveurs de jeu ou même ton futur site web, je ne peux que te conseiller de jeter un œil du côté de chez Contabo. C’est du solide, avec un rapport performance-prix assez imbattable pour de la location de VPS. Que tu aies besoin de RAM à gogo ou d’un processeur qui tient la route sans exploser ton budget de geek, c’est clairement l’une des meilleures options sur le marché actuellement pour avoir le plein contrôle sur tes données.
Pourquoi oublier les plugins pour les grosses bibliothèques ?
Les plugins utilisent PHP pour traiter les images. PHP est génial pour afficher des pages web, mais il n’est pas conçu pour faire de l’encodage vidéo ou image intensif de manière continue.
En passant directement par un script Bash sous Linux :
- Zéro Timeout : Le script tourne en arrière-plan sans limite de temps.
- Puissance maximale : Vous utilisez 100 % des cœurs de votre processeur.
- Surtout : Si le script s’arrête, il reprendra là où il s’est arrêté sans reconvertir les images déjà traitées.
- Transparence conservée : L’AVIF et le WebP gèrent parfaitement les canaux alpha de vos vieux PNG !
Étape 1 : Installer les outils d’encodage sur le serveur
Connectez-vous à votre serveur en SSH (en mode root ou via sudo). Nous allons avoir besoin des librairies officielles pour encoder nos images.
Tapez cette commande pour installer les paquets nécessaires sur Debian/Ubuntu :
sudo apt update
sudo apt install webp libavif-bin findutils -yÉtape 2 : Le Script Bash de conversion massive
Nous allons créer un script qui va scanner votre dossier WordPress, trouver tous les .jpg et .png, et générer une copie WebP et AVIF juste à côté, sans toucher à vos fichiers originaux.
Créez un nouveau fichier :
nano /usr/local/bin/optimize_images.shCollez le code suivant (Pensez à bien modifier la variable TARGET_DIR avec le chemin exact de votre dossier WordPress) :
#!/bin/bash
# Le chemin absolu vers votre dossier d'images WordPress
TARGET_DIR="/var/www/html/votre-site/wp-content/uploads"
echo "Début de l'optimisation massive..."
# 1. Convertir en WebP (Qualité 75 - L'équilibre parfait)
find "$TARGET_DIR" -type f \( -name "*.jpg" -o -name "*.jpeg" -o -name "*.png" \) -not -name "*.webp" | while read -r img; do
if [ ! -f "$img.webp" ]; then
cwebp -q 75 "$img" -o "$img.webp" -quiet
echo "WebP créé : $img"
fi
done
# 2. Convertir en AVIF (Ultra léger, mais gourmand en CPU)
find "$TARGET_DIR" -type f \( -name "*.jpg" -o -name "*.jpeg" -o -name "*.png" \) -not -name "*.avif" | while read -r img; do
if [ ! -f "$img.avif" ]; then
# speed 6 est le compromis idéal temps/compression
avifenc --jobs all --speed 6 "$img" "$img.avif" > /dev/null 2>&1
echo "AVIF créé : $img"
fi
done
echo "Fin de l'optimisation !"Enregistrez et quittez (Ctrl+O, Entrée, Ctrl+X).
Étape 3 : Lancer la machine !
On rend le script exécutable, puis on le lance.
Astuce de Geek : Si vous avez des dizaines de milliers d’images, l’encodage AVIF peut prendre plusieurs heures. Lancez cette commande dans un
screenou untmuxpour pouvoir fermer votre terminal sans couper le processus !
chmod +x /usr/local/bin/optimize_images.sh
/usr/local/bin/optimize_images.shLaissez la magie opérer. Vous allez voir vos dossiers se remplir de copies ultra-légères.
Étape 4 : Dire à WordPress de servir les nouvelles images (.htaccess)
Vos images sont prêtes, mais votre site affiche toujours les vieux JPG. Nous n’allons pas modifier la base de données (c’est trop risqué). Nous allons utiliser le fichier .htaccess pour faire de la substitution à la volée de manière invisible !
Ouvrez le fichier .htaccess situé à la racine de votre site WordPress et ajoutez ce bloc TOUT EN HAUT (avant le # BEGIN WordPress) :
# BEGIN Image Optimization (AVIF & WebP)
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
# 1. TESTER LE SUPPORT AVIF (La priorité absolue)
RewriteCond %{HTTP_ACCEPT} image/avif
RewriteCond %{REQUEST_FILENAME}.avif -f
RewriteRule ^(.+)\.(jpe?g|png)$ $1.$2.avif [T=image/avif,L]
# 2. TESTER LE SUPPORT WEBP (Plan B)
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule ^(.+)\.(jpe?g|png)$ $1.$2.webp [T=image/webp,L]
</IfModule>
<IfModule mod_mime.c>
AddType image/webp .webp
AddType image/avif .avif
</IfModule>
# END Image OptimizationComment ça marche ?
Quand le navigateur d’un visiteur demande image.jpg, le serveur vérifie d’abord s’il supporte l’AVIF. Si oui, et si le fichier image.jpg.avif existe, il lui envoie ça à la place. Sinon, il tente le WebP. S’il utilise un vieux navigateur, il recevra le bon vieux JPG. Zéro lien cassé sur votre site !
⚡ Étape 5 : La subtilité OpenLiteSpeed (Très important)
Si votre serveur tourne sous OpenLiteSpeed (le meilleur choix pour la performance !), sachez qu’il ne lit le fichier .htaccess qu’au démarrage.
Pour que vos règles de redirection prennent effet, vous devez impérativement redémarrer le service web :
/usr/local/lsws/bin/lswsctrl restartLe mot de la fin
Allez faire un tour sur votre blog, ouvrez l’inspecteur de votre navigateur (F12), onglet Réseau (Network), et admirez la colonne Type. Vous devriez y voir une belle liste de fichiers avif ou webp. Votre score PageSpeed vous dira merci !
A lire ou relire
Laisser un commentaire