Dans ce tutoriel, je vais vous expliquer comment générer des images au format WebP depuis un serveur dédié pour WordPress sans utilisation de plugin tier.
Sommaire
Qu’est-ce que le format WebP et pourquoi l’utiliser ?
Le format WebP est un format d’image moderne développé par Google. Il permet de compresser les images sans perte visible de qualité, tout en réduisant leur poids de manière significative. WebP prend en charge la compression avec perte, sans perte, la transparence (canal alpha) et même les animations.
Par rapport aux formats traditionnels comme JPEG ou PNG, WebP permet de :
- Réduire la taille des images de 25 à 40 % en moyenne,
- Améliorer les temps de chargement des pages web,
- Diminuer la consommation de bande passante,
- Optimiser le référencement naturel (SEO) grâce à de meilleures performances Core Web Vitals.
L’utilisation d’images WebP est particulièrement bénéfique sur un site WordPress avec un grand nombre de visuels (blog, portfolio, e-commerce…). Sur un serveur dédié, vous avez la maîtrise totale pour générer ces images côté serveur (via des outils comme ImageMagick, cwebp, ou des plugins adaptés), sans dépendre uniquement de plugins limités par l’hébergement mutualisé.
Aujourd’hui, tous les navigateurs modernes (Chrome, Edge, Firefox, Safari…) sont compatibles avec le WebP, ce qui en fait un choix pertinent et pérenne pour le web
Installation du paquet webp sur Ubuntu
Pour commencer on va installer le paquet webp qui est disponible sur Ubuntu qui va permettre la prise en charge du format et aussi installer un outil qui va nous permettre de « convertir » les images au format jpg et png au format webp sur notre serveur
Pour installer le paquet entrer la commande suivante :
sudo apt install webp -yMaintenant que le paquet est installé, on va passer la conversion des images.
Convertir les images existantes au format WebP
Voici un script qui va permettre de convertir toutes les images existantes au format Web.
#!/bin/bash
# Dossier WordPress uploads
UPLOADS_DIR="/path/wordpres/site/wp-content/uploads"
echo "🚀 Conversion WebP dans : $UPLOADS_DIR"
echo
find "$UPLOADS_DIR" -type d -name "backup" -prune -false -o -type f \( -iname "*.jpg" -o -iname "*.jpeg" -o -iname "*.png" \) | while read -r IMG; do
WEBP="${IMG}.webp"
if [ ! -f "$WEBP" ]; then
echo "Conversion : $IMG → $WEBP"
cwebp -q 80 "$IMG" -o "$WEBP" > /dev/null 2>&1
else
echo "Deja convertie : $WEBP"
fi
doneAdapter la variable UPLOADS_DIR (ligne) à votre environnement.
Lancer la conversion en exécutant le script :
sudo bash convert-to-webp.shConfigurer la prise en charge de format Webp au niveau du serveur Web
Pour la prise en charge au niveau du serveur Web, on va ajouter des instructions dans le fichier .htaccess pour Apache2 et Litespeed.
Voici ce qu’il faut ajouter à votre fichier .htaccess :
# BEGIN webp file type
<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>
# END webp file type
# BEGIN avif file type
<IfModule mod_mime.c>
AddType image/avif .avif
</IfModule>
# END avif file type
# BEGIN rewrite rules for avif
<IfModule mod_setenvif.c>
# Vary: Accept for all the requests to jpeg, png, and gif.
SetEnvIf Request_URI "\.(jpg|jpeg|jpe|png|gif|webp)$" REQUEST_image
</IfModule>
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
# Check if browser supports AVIF images.
# Update the MIME type accordingly.
RewriteCond %{HTTP_ACCEPT} image/avif
# Check if AVIF replacement image exists.
RewriteCond %{REQUEST_FILENAME}.avif -f
# Serve AVIF image instead.
RewriteRule (.+)\.(jpg|jpeg|jpe|png|gif|webp)$ $1.$2.avif [T=image/avif,NC]
</IfModule>
<IfModule mod_headers.c>
# Update the MIME type accordingly.
Header append Vary Accept env=REQUEST_image
</IfModule>
# END rewrite rules for avif
# BEGIN rewrite rules for webp
<IfModule mod_setenvif.c>
# Vary: Accept for all the requests to jpeg, png, and gif.
SetEnvIf Request_URI "\.(jpg|jpeg|jpe|png|gif)$" REQUEST_image
</IfModule>
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
# Check if browser supports WebP images.
RewriteCond %{HTTP_ACCEPT} image/webp
# Check if WebP replacement image exists.
RewriteCond %{REQUEST_FILENAME}.webp -f
# Serve WebP image instead.
RewriteRule (.+)\.(jpg|jpeg|jpe|png|gif)$ $1.$2.webp [T=image/webp,NC]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REQUEST_image
</IfModule>
# END rewrite rules for webpCes instructions sont basées sur le plugin Imagify.
Ces instructions vont permettre de servir les images au format Webp si le navigateur les prend en charge et si le fichier WebP existe sur le serveur.
Alternative avec un plugins
Il existe plusieurs alternative qui vont permettre la prise et la génération d’image au format WebP pour WordPress en utilisant un plugin.
Ce qu’il faut savoir, c’est que l’utilisation d’un plugin fait souvent appel à un service tier et que celui-ci est payant ou limité en version gratuite.
Le plugin Litespeed permet un conversion d’image au format Webp à condition d’être que le serveur Web soit un serveur Openlitespeed ou Litespeed, pour les personnes chez O2Switch, la prise est charge n’est pas garantie à cause de modification des headers du serveur et donc mal reconnu par le service tier.
Le plugin Imagify est également très bien mains limité dans sa version gratuite.
Comment faire sans serveur dédié
Si vous êtes sur un serveur mutualisé et que vous souhaitez tout de même générer les images au format Webp gratuitement depuis un ordinateur sous Linux, c’est toujours possible mais cela va demander plus de manipulation.
Sur un ordinateur, télécharger le contenu du dossier uploads de WordPress, faire la manipulation sur l’ordinateur local et envoyer ensuite le contenu.
Si vous êtes sur un serveur dédié, vous savez maintenant comme optimiser votre site WordPress en utilisant des images au format Webp sans service tier et surtout c’est gratuit.
L’utilisation du format Webp permet un gain important de bande passante et donc par la même occasion de limiter l’impact du chargement de vos images.
