Wordpress est un CMS (Content Management Service) très efficace pour monter rapidement un site vitrine ou une boutique en ligne. Mais il peut très vite devenir lourd et lent du fait des nombreux modules aditionnels. Voyons comment optimiser son chargement en servant les images au format WebP.
Présentation du format d’images WebP
Le format Webp a été créé par Google dans le but de remplacer les différents formats d’images standard : jpeg, jpg, png, gif, tiff, etc. L’objectif est de conserver une bonne qualité d’image tout en réduisant leur poids de 25% à 30%, afin d’optimiser la vitesse de chargement d’un site.
En plus de la compression, ce nouveau format d’image prend en charge les images animées (ex. gif) et la transparence (ex. png). Autrement-dit, il permet de traiter plusieurs types d’images, en réduisant la taille et avec une qualité comparable à l’orignal.
Encore aujourd’hui, il est impossible d’afficher des images Webp avec Safari. Autre obstacle, le plus célèbre des CMS, WordPress, ne permet toujours pas de charger ce type d’image par défaut. Il faut obligatoirement passer par une extension pour profiter du format Webp.
Préparation du serveur Web pour prendre ce nouveau format
Pour que le serveur Web (Nginx dans notre cas), puisse accepter le format WebP, nous allons ajouter un Map en début de configuration du virtual host, avant les blocks server :
map $http_accept $webp_ext {
default "";
"~*webp" ".webp";
}Langage du code : PHP (php)Ensuite, téléchargez et installez les paquets PHP et systèmes permettant de traiter ces images :
sudo apt install php-gmagick php-imagick imagick cwebp php7.4-gd imagemagickLangage du code : CSS (css)Rechargez la configuration : systemctl reload nginx.service et votre serveur est fin prêt à accepter ce nouveau format.
Mise en place du WebP avec WebP Express sur Wordpress
Nous allons maintenant mettre en place le module Wordpress permettant de traiter les images au format WebP. Récupérez donc WebP Express sur le store des plugins Wordpress et rendez-vous dans la configuration :
Laissez l’ensemble des paramètres à leurs valeurs par défaut, et cliquez sur le bouton Save Settings pour valider les règles de redirections et la configuration nécessaire via les fichiers .htaccess.
SI vous utilisez Nginx, il va falloir ajouter un règle de redirection pour le traitement de ces images. Deux solutions s’offrent à vous :
- Ajouter ces quelques lignes dans la configuration server { } de votre virtual host
- Créer un fichier de configuration à part, que vous appellerez dans votre virtual host
Voici les lignes à ajouter à votre configuration :
location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
add_header Vary Accept;
expires 365d;
if ($http_accept !~* "webp"){
break;
}
try_files /wp-content/webp-express/webp-images/doc-root/$uri.webp $uri.webp /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content;
}
# Route requests for non-existing webps to the converter
location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ {
try_files $uri /wp-content/plugins/webp-express/wod/webp-realizer.php?xdestination=x$request_filename&wp-content=wp-content;
}Langage du code : PHP (php)Encore une fois, rechargez la configuration Nginx et retournez dans les réglages du plugin.
Testez la conversion et l’affichage d’une image au format WebP en réalisant les 3 tests :
Une popup doit s’ouvrir et vous devriez avoir en bas de page le résultat suivant :
Vous pouvez enfin démarrer la conversion de toutes vos images, avec le bouton Bulk Convert, proposé par WebP Express. Il effectuera un scan de votre wp-content et procédera à la conversion de toutes vos images au format webp, en y ajoutant l’extension en fin de nom. Les fichiers créés seront déposés sous :
wp-content/webp-express/webp-images/doc-root/wp-content/uploadsLa conversion des fichiers peut prendre du temps en fonction des dimensions originales, et du nombre d’images à convertir. De plus, le serveur peut être chargé le temps des modifications
Tester l’affichage sur son site avec la console développeur
Tout devrait être prêt sur votre site Wordpress pour l’affichage des images, testons maintenant qu’elles sont correctement chargées. Ouvrez une page de votre site contenant des images, ouvrez la console développeur ou cliquez sur inspecter l’élément depuis le menu contextuel :
Afficher les images WebP sur Safari
Comme mentionné précédemment, Safari est aujourd’hui le seul navigateur internet à une pas prendre en charge le format Webp. Sauf que ce dernier, bien que loin derrière Chrome, reste le second navigateur le plus utilisé sur mobile (avec une part de marché de 20,49 % en 2019).
Il est cependant possible de proposer à ces 20,49% d’utilisateurs vos images au format WebP. Comme le rapporte le site d’actualités MacRumors, le format d’image de Google sera prochainement disponible pour tous les utilisateur de Safari sur mobile, tablette et desktop dans les prochaines versions de Safari 14 sur macOS Big Sur et iOS / iPad OS 14.