QNAP TBS-464

WebP et WordPress (conversion, performance, perte de qualité…)

Le format de fichier image WebP (développé par Google) continue sa percée sur le Web. Aujourd’hui, une large majorité des navigateurs le supporte. Son objectif est de remplacer les fichiers JPG et PNG. Il est vrai que son format permet de gagner plusieurs Ko précieux, entre 30 et 60% du poids de base, avec peu (ou pas) de perte de qualité. C’est très intéressant pour les visiteurs avec un smartphone et/ou une connexion internet limitée. Google n’hésite pas à mettre en avant ce format… Le géant le recommande à tous ceux qui recherchent la performances et il serait un critère pour un bon positionnement dans le moteur de recherche.

wordpress webp - WebP et Wordpress (conversion, performance, perte de qualité...)

WebP et WordPress

Pour deux de mes sites, j’ai décidé de mettre en place le WebP. Les objectifs sont nombreux : réduire le poids des images, accélérer l’affichage des pages, réduire la charge serveur, etc. Comme vous le savez peut-être (ou pas), j’utilise un serveur VPS chez Ikoula. Ce dernier fonctionne sur le système d’exploitation Debian et l’application Plesk. J’aurai dû tester et mettre en place WebP depuis plusieurs mois. Malheureusement, par manque de temps, cela n’a pas pu se faire avant.

WebP n’est pas nouveau (2010), mais jusqu’à présent… il n’était pas supporté par tous les navigateurs. Aussi, certains visiteurs utilisent encore d’anciens navigateurs (ex.: sur un ordinateur de travail pour des applications particulirèes) ne supportant pas ce format.

Il existe plusieurs techniques pour servir ce format image WebP. Des sites font le choix de fournir les 2 fichiers à la fois (par exemple jpg et webp). Le navigateur choisira le format de fichier avec lequel il est compatible. D’autres font le choix d’analyser le navigateur utilisé par le visiteur, puis génère la page en fonction de la compatibilité. D’autres ont basculé à 100% en WebP et n’ont que faire des anciens navigateurs.

Conversion en WebP

Sur un site avec WordPress, il y a de nombreuses images. Il y a tout d’abord l’image telle qu’elle est envoyée par le rédacteur/blogueur. Puis, cette dernière est convertie plusieurs fois dans différentes résolutions. Sur Cachem, il y a 12 versions/résolutions différentes. Oui cela fait beaucoup et cela dépend du thème utilisé, de la page d’accueil, du contenu supplémentaire en bas d’article, la barre latérale, les versions pour ordinateur/smartphone/tablette, etc.

Pour convertir une image en WebP, il y a différentes techniques. Cela peut passer par un fonctionnement en local (sur le site) ou distant à travers un service dans le Cloud. Personnellement, j’ai décidé de tout faire en local… sur mon serveur. Cela pour différentes raisons.

L’extension pour la simplicité

Par défaut, le format webp n’est pas supporté par WordPress. J’ai utilisé l’extension WebP Express avec le module GD. Tout d’abord, elle me sert pour chaque nouvelle image envoyée : une version webp est automatiquement générée. L’interface de l’extension est assez primaire, mais les fonctionnalités sont nombreuses (redirections, conversions, script…). Je n’ai pas utilisé la conversion à la volée (lorsque la page se charge pour la première fois) sur mon premier site, mais plutôt une conversion de masse avec l’extension à travers le navigateur (un peu plus de 60000 images converties). Cela a été chaotique et a demandé beaucoup de temps. Comme la conversion s’effectue avec PHP cela nécessite que le navigateur soit toujours connecté et actif.

comparaison jpg webp - WebP et Wordpress (conversion, performance, perte de qualité...)
A gauche JPG et à droite WEBP

Pour Cachem, cela été un peu plus compliqué. En effet, l’extension refuse de se lancer dans la conversion des 170 000 images (jpg et png). J’ai donc décidé de faire le travail de conversion différemment. J’ai téléchargé sur le serveur l’exécutable WebP Converter pour Linux. Il contient un encodeur, un décodeur, visualiseur… Ce qui nous intéresse, c’est l’encodeur. Pour chaque image jpg (ou png), il créera un second fichier avec l’extension webp. L’outil se nomme cwebp et peut s’utiliser de cette façon pour un fichier :

cwebp -q 80 image1.jpg -o image1.webp

Le -q 80 correspond à la qualité de la compression (plus la valeur est importante plus la qualité est bonne, mais moins la compression est forte). Je recommande de ne pas descendre au-dessous de 80. Le -o signifie que l’on veut créer un fichier en sortie.

Conversion de masse

Ça, c’est la théorie pour un seul et unique fichier. Plus le fichier sera en haute résolution plus la conversion sera longue. Il faut compter un peu moins d’une seconde pour un fichier en 1280 x 1024px et quelques millisecondes pour un format 800 x 600px. Côté usage des ressources (processeur, mémoire vive, accès disque), c’est insignifiant pour une image… mais cela commence à se ressentir si on l’exécute plusieurs milliers d’images et plusieurs convertisseurs simultanément. J’ai commencé à faire l’opération de conversion dossier par dossier (mois par mois) et c’était long… Rapidement, j’ai fait année par année. Les images sous WordPress sont stockées dans un dossier uploads puis un sous-dossier année et enfin au-dessous un dossier par mois. Voici les 2 mini-scripts que j’ai utilisés après avoir téléchargé et décompressé le WebP Converter.

Pour une conversion par mois, j’ai lancé (exemple pour le mois de janvier 2019) :

`for file in /chemin/vers/dossier/wordpress/wp-content/uploads/2019/01/*; do ./cwebp -q 80 "$file" -o "${file%.*}.webp"; done`

Si vous êtes un peu plus pressé, la conversion par année se lance de cette manière (exemple pour toute l’année 2019) :

`for file in /chemin/vers/dossier/wordpress/wp-content/uploads/2019/**/*; do ./cwebp -q 80 "$file" -o "${file%.*}.webp"; done`

Pour aller plus vite, j’ai lancé 2 fois cwebp : Erreur ! En effet, comme je suis sur un VPS et que la conversion des images d’une année demande environ 1 heure… il y a eu quelques ralentissements. Les sites étaient accessibles, mais il y avait des lenteurs. Vous me direz que c’est un mal pour un bien… et vous avez raison. Cependant, j’ai décidé de lancer qu’un seul script à la fois afin de limiter l’impact sur les visiteurs des sites.

Astuces

Si vous utilisez la méthode décrite ci-dessus, assurez-vous que le propriétaire (linux) du fichier .webp soit bien le même que le fichier .jpg. Si ce n’est pas le cas, pensez à attribuer la propriété avec la commande chown en récursif :

chown -R utilisateur:groupe répertoire

Conclusion de WebP

Il est encore trop tôt pour tirer des conclusions du WebP sur Cachem. Si le gain (mini de 30%) semble très intéressant pour le lecteur et donc le serveur, il est important de noter qu’il faut 2 fichiers d’une même image (ex.: jpg + webp)… ce qui prend de la place. Suivant votre hébergeur, cela peut rapidement devenir un casse-tête. Est-ce le bon moment pour basculer 100% de son site en WebP ? Il y a 2 an, j’aurai directement répondu NON. Aujourd’hui, c’est bien différent. Si vos visiteurs utilisent encore Internet Explorer alors ils vont avoir des soucis. C’est la même chose avec certaines versions de Safari (macOS ou iOS). Il faut donc rester prudent et servir les 2 formats formats…

caniuse - WebP et Wordpress (conversion, performance, perte de qualité...)
site caniuse.com