Suite à la lecture d’un article du site Cachem, je suis passé au format d’images WebP sur mes deux blogs WordPress. Ce format existe depuis 2010 et est désormais plutôt bien supporté par les navigateurs récents. Quant à Internet Explorer, il est tout simplement incapable d’afficher ces images. L’un des avantages du WebP est qu’on réduit significativement la taille des images, ce qui permet de les charger plus rapidement.

Pour effectuer une transition sans accroc je suis passé par l’extension WebP Express. Celle-ci est très complète et permet notamment de décider quel format d’image afficher en fonction du navigateur. Elle convertit également les images lors de l’upload. Cependant, sa prise en main n’est pas forcément aisée, déjà parce qu’elle n’est pas traduite en français, mais aussi parce qu’elle propose énormément de paramètres.

Réglages

Depuis l’administration de WordPress, rendez vous dans Réglages puis WebP Express.

Mode de fonctionnement

Dans mon cas, j’ai choisi la méthode « Varied image responses » qui me permettra de fournir la bonne image en fonction du navigateur. Comme je n’utilise pas de CDN, et comme je n’ai pas voulu me prendre la tête avec trop d’options à configurer, c’est ce qui semblait être le meilleur choix.

Général

Depuis cette catégorie, il faudra tout d’abord indiquer la portée (paramètre Scope). L’extension peut gérer les thèmes. Dans mon cas j’ai préféré m’en tenir aux images Le seque j’envoie via la médiathèque de WordPress (paramètre « Uploads only« ).

Le second paramètre à définir concerne les types de fichiers sur lesquels l’extension doit travailler. Autant voir grand et choisir à la fois PNG et JPG.

Ensuite il faut déterminer où les images seront stockées. Le mode « Mingled » indique que les images se trouvent dans le même dossier, côte-à-côte. Le paramètre suivant, « File extension« , indique si on utilise le nom du fichier suffixé par « .webp » ou s’il faut utiliser le nom complet et l’extension originale en y rajoutant « .webp ». Par facilité j’ai choisi « Set to .webp » pour avoir des noms d’image parfaitement identiques.

Enfin les options suivantes importent peu. Je les ai donc laissées par défaut. Je n’ai pas défini la politique de cache (celle-ci est gérée par une autre extension sur mon blog).

Règles du fichier .htaccess

L’extension vous propose d’activer les deux premiers modes, mais dans le cas où il resterait des images non converties sur votre blog, la première suffira (à savoir « Enable direct redirection to existing converted images« ).

Si vous n’avez pas l’extension Apache mod_header activée sur votre hébergement, cela pourrait ne pas fonctionner correctement.

Conversion

L’extension propose des paramètres pour gérer la qualité de la conversion des images. Il est même possible de modifier l’ordre des méthodes de conversion en fonction de ce qui est disponible sur votre hébergement.

Dans mon cas j’ai également coché la case « Convert on upload » pour activer la conversion à partir de l’outil d’upload de WordPress. Attention que cela a un impact sur les performances d’envoi, en fonction des miniatures à générer.

Altérer le code HTML

La dernière option permet de modifier le contenu de la page pour l’affichage des images en WebP. L’auteur recommande d’activer l’option en plus de la redirection via .htaccess.

Pour maximiser la compatibilité avec de vieux navigateurs, j’ai coché l’option « Replace image URLs » ainsi que « Only do the replacements in webp enabled browsers« .

Le dernier paramètre modifie le comportement de l’extension lors de la modification du code. La première option, « Use content filtering hooks« , est recommandée d’après la bulle d’aide affichée.

Conclusion

L’extension offre de multiples possibilités pour convertir et gérer vos images au format WebP pour votre site WordPress. Si vous avez des commentaires ou si vous connaissez bien WebP Express, n’hésitez pas à donner vos astuces de configuration pour en améliorer le comportement.