Comment afficher des images WebP sur WordPress pour réduire le temps de chargement ?


Aujourd'hui, je vous propose un tutoriel dédié au plugin WebP Express, qui permet la conversion d'images au format WebP. L'intérêt ? C'est un format d'image ultraléger, bien plus que le jpeg, ce qui permet de réduire le temps de chargement d'une page web.

Dans cet article, je vais vous expliquer le principe du WebP, le support dont bénéficie ce format sur les différents navigateurs web, évoquer la perte de qualité liée au choix d'un type d'image plutôt qu'un autre. Je vous montrerai également comment optimiser la taille d'un fichier image à l'aide de l'extension gratuite WebP Express.

Qu'est-ce que le format d'image WebP ?

Vous le savez sans doute : faire en sorte qu'une page web se charge rapidement est aujourd'hui un vrai cheval de bataille quand on possède un site internet. Avec l'essor du mobile, le temps de chargement est devenu un sujet crucial pour l'ensemble des sites.

Les images représentent souvent une part importante du poids d'une page et à ce titre, chercher à optimiser la taille des fichiers images est une priorité. Depuis longtemps déjà, on recommande de privilégier des formats adaptés au web, comme le png, le jpg ou le gif.

De nouveaux formats encore plus performants et encore plus légers ont également fait leur apparition, comme le SVG (apparu en 1999, adapté aux mobiles en 2008) ou, justement, le WebP (créé en 2010).

Le format WebP possède quelques caractéristiques intéressantes :

  • Il gère la transparence ;
  • Il peut gérer certaines animations (tout comme le font les gif) ;
  • Il peut comporter une image mais aussi quelques métadonnées associées au fichier (nom de l'auteur, titre de l'image, statut des droits d'auteur et commentaires) ;
  • Il permet une compression des images sans perte de qualité ("WebP lossless", avec à la clé des images 26% moins lourdes que leur équivalent au format png) ou avec une légère perte de qualité ("WebP lossy", pour une taille jusqu'à 34% plus petite qu'un jpeg).

Le WebP fait appel à un "encodage prédictif"... c'est-à-dire, en schématisant, qu'il essaie de prédire quelles données facultatives il peut retirer en compressant une image. L'idée est qu'elle soit plus légère, sans que cela se ressente côté utilisateur.

Pour toutes ces raisons, c'est un format assez polyvalent et pertinent.

Adopter le WebP sur WordPress

Quelle différence de qualité entre WebP et autres formats ?

L'usage du WebP ferait économiser entre 25 et 34% du poids si l'on s'intéresse strictement à la taille du fichier, un chiffre communiqué par Google (à l'origine de la création du format) suite à cette étude. Mais qu'en est-il de la qualité ?

D'autres études - comme celle-ci - sont un peu moins enthousiastes que les chiffres communiqués par Google concernant le gain de taille du fichier, mais soulignent la gestion intelligente de la compression par ce type de format : le WebP, comme le format AVIF, adopte une approche différentielle selon la zone de l'image concernée.

Quand une zone comporte beaucoup de détails, la compression appliquée est un peu moins forte (tout au plus voit-on un léger effet de flou) alors qu'un format jpeg compresse uniformément l'image (on va donc avoir un sentiment de perte de qualité plus important).

Quel support pour le WebP sur les navigateurs ?

Le WebP est-il pris en charge partout ? Aujourd'hui, ce format d'image est loin d'être inconnu et de nombreux navigateurs le prennent en charge, à condition de ne pas avoir une version préhistorique ;)

Le WebP lossy (compression avec perte de qualité) est pris en charge sur :

  • Google Chrome pour desktop depuis la version 17 ;
  • Google Chrome pour Android depuis la version 25 ;
  • Firefox depuis la version 65 ;
  • Microsoft Edge depuis la version 18 ;
  • Opéra depuis la version 11.10.

Le WebP lossless (compression sans perte de qualité) est pris en charge sur :

  • Google Chrome pour desktop depuis la version 23 ;
  • Google Chrome pour Android depuis la version 25 ;
  • Firefox depuis la version 65 ;
  • Microsoft Edge depuis la version 18 ;
  • Opéra depuis la version 12.10.

Les animations WebP sont quant à elles gérées par :

  • Google Chrome (desktop & mobile) depuis la version 32 ;
  • Firefox depuis la version 65 ;
  • Microsoft Edge depuis la version 18 ;
  • Opéra depuis la version 19.

Les problèmes de compatibilité sont donc réduits. Par ailleurs, pour maximiser la compatibilité, on peut essayer de détecter si le navigateur prend en charge le WebP ou pas : si c'est le cas, on affiche l'image WebP ; dans le cas contraire, on propose à l'internaute son équivalent dans un format plus classique comme le jpeg ou le png.

Si vous maîtrisez le code, sachez que cette détection peut passer par un code JavaScript (Google fournit ici un exemple) ou par le header HTTP Vary:Accept.

Elle peut aussi passer par un CDN, si vous en utilisez un pour de meilleures performances web : le CDN va gérer lui-même la conversion de vos images en WebP pour les navigateurs compatibles. Le CDN Cloudflare par exemple le propose, le CDN Akamai également pour citer deux références connues sur le marché.

Cette idée de proposer le WebP uniquement quand le navigateur le permet se révèle très utile pour les visiteurs qui sont chez Apple... car comme vous pouvez le constater dans la liste que j'ai donnée, le format n'est encore que partiellement compatible avec le navigateur Safari à l'heure où j'écris cet article.

Nous allons le voir à présent, nous pouvons utiliser le même système pour adopter le WebP sur WordPress.

Adopter le WebP sur WordPress

Comment utiliser le WebP sur WordPress ?

Sur WordPress, il existe différents plugins pour mettre en place le WebP.

On peut d'abord citer des extensions spécialisées, comme WebP Converter for Media de Mateusz Gbiorczyk ou encore WebP Express de Bjørn Rosell... mais certains plugins d'optimisation des images proposent aussi la génération de WebP en option, à l'instar du plugin Imagify de WP Media (l'équipe qui est à l'origine du célèbre plugin d'optimisation des performances WP Rocket), de EWWW Image Optimizer, de ShortPixel ou encore Smush (en version pro).

Je vous montre comment activer le format WebP avec ShortPixel dans mon tuto dédié à ce plugin si vous souhaitez l'utiliser... et dans cet article, je vais vous expliquer comment le faire en utilisant WebP Express ou WebP Converter for Media. En comptant ShortPixel, vous aurez ainsi plusieurs solutions à votre disposition pour utiliser le WebP sur WordPress.

Le plugin WebP Converter For Media

Cette extension crée un sous-menu "WebP Converter" dans le menu Réglages de WordPress. Vous pouvez ensuite accéder à des réglages assez simples.

Dans la première partie, vous pouvez choisir :

  • Le mode de chargement de l'image : dans la plupart des cas, cela fonctionnera via le fichier .htaccess de WordPress ; si vous constatez que la conversion de vos images en WebP n'a pas lieu, essayez la méthode Pass Thru (certains types de serveurs web, comme Nginx, ne prennent pas en charge le .htaccess ; si vous êtes sur Nginx, il faudra donc avoir recours à ce réglage).
  • Les types de fichiers pris en charge : que souhaitez-vous convertir en WebP ? Vous pouvez cocher tous les types d'images statiques (jpg, jpeg, png) et éventuellement les animations gif si vous en utilisez.
  • Les répertoires concernés par la conversion en WebP - Sur WordPress, les images sont mises en ligne par défaut dans le répertoire "uploads", c'est pour cette raison qu'il est coché dans les réglages de l'extension. Si vous souhaitez aussi que celle-ci convertisse les images de votre thème ou celles gérées via des plugins, vous pouvez cocher les cases correspondantes dans les réglages.
  • La méthode de conversion (Imagick ou GD) peut aussi être choisie... et le plugin va à terme permettre un choix entre WebP et AVIF, un format très prometteur en matière de performances.
Réglages du plugin WebP Converter For Media sur WordPress
Réglages du plugin WebP Converter For Media sur WordPress - Partie 1

La seconde partie des réglages permet de choisir la qualité des images converties. L'extension conseille la valeur de 85%, qui permet une compression légère avec une perte de qualité mineure. Si la qualité d'image ne vous convient pas, augmentez cette valeur. Si, à l'inverse, vous souhaitez tester une compression plus "agressive", vous pouvez la diminuer.

Vous disposez ensuite d'options de configuration plutôt destinées à des utilisateurs avancés :

  • Retirer automatiquement les fichiers WebP lorsqu’ils sont plus lourds que les originaux - A cocher.
  • Cache du navigateur internet pour les fichiers WebP - A cocher, sauf si cela provoque des erreurs sur votre site. Cela permet de "mettre en mémoire" les images afin d'accélérer encore un peu plus leur vitesse de chargement.
  • Conserver les métadonnées des images stockées en EXIF ou XMP - Généralement, on préfère retirer ces informations associées à une image (dans les propriétés) car elles alourdissent le fichier mais un photographe peut juger pertinent de les laisser, notamment afin que son nom et le statut des droits d'auteur restent associés à la photo.
  • Activer cron pour convertir automatiquement les images de l’extérieur de la médiathèque - Tâche automatisée pour convertir les images qui sont stockées ailleurs que dans la bibliothèque de médias de WordPress.
  • Activer cron pour convertir les images mises en ligne dans la médiathèque - Il existe déjà une fonctionnalité de conversion donc ce n'est pas forcément utile de cocher cette case.
  • Forcer les redirections vers WebP pour tous les domaines - Cette option concerne juste le cas où vous chargeriez des images depuis un autre domaine que le vôtre. En la cochant, elles seront soumises à la conversion au même titre que les images postées sur votre propre site.
  • Consigner les erreurs lors de la conversion en fichier debug.log - Ca peut être utile si vous avez un problème avec le plugin et que vous souhaitez fournir des informations au support technique de WebP Converter for Media. Dans le cas contraire, ce n'est pas indispensable.
Réglages du plugin WebP Converter For Media sur WordPress
Réglages du plugin WebP Converter For Media sur WordPress - Partie 2

Enfin, vous disposez d'un bouton pour régénérer des versions WebP de l'ensemble des images. En effet, le plugin va fonctionner sur toutes les nouvelles images uploadées... et par ce bouton, vous pouvez aussi lui demander de retravailler l'ensemble des images déjà existantes dans la médiathèque.

La procédure est un peu longue si vous avez beaucoup de visuels, je vous conseille donc de la lancer plutôt à une heure où vous avez peu de trafic, par exemple en fin de soirée ou tôt le matin.

Régénérer les images avec WebP Converter
Régénérer les images avec WebP Converter

Le plugin WebP Express

Le plugin est un peu moins facile à prendre en main car les options proposées sont plus techniques.

Il ajoute un sous-menu "WebP Express" dans les réglages de WordPress. Vous pouvez d'abord choisir entre 4 grands modes de fonctionnement du plugin :

  • Varied image responses - C'est le plus classique, qui consiste à rediriger automatiquement l'internaute vers la version WebP de l'image si son navigateur prend en charge ce format. Si l'image existe déjà en WebP, il y a une "simple" redirection. Si l'image n'est pas encore disponible dans ce format, il y a d'abord conversion, puis redirection. Il y a donc une réponse variable selon si le navigateur est compatible ou pas.
  • Mode CDN Friendly - Si vous utilisez un CDN, cette option permet de mieux gérer certaines particularités de fonctionnement, notamment si vous avez recours à un plugin qui modifie le code HTML des pages pour que les ressources statiques du site pointent vers le CDN. Je vous conseille de lire la partie FAQ du plugin pour en savoir plus sur la configuration à mettre en place avec un CDN.
  • Mode sans conversion - Ici, le plugin va rediriger une image vers son équivalent en WebP s'il existe... mais s'il n'existe pas, il ne se passe rien et l'image n'est pas convertie (contrairement au mode "Varied image responses").
  • Mode "Tweaked" - Vous pouvez régler l'ensemble des options en toute liberté.

Ensuite, vous disposez de quelques options générales :

  • Choisir ce qui est géré par le plugin (le scope) - Par défaut, les dossiers uploads et themes... mais grâce à cette option, vous pouvez aussi utiliser le WebP sur tous les contenus (et même l'administration).
  • Choisir les types de fichiers pris en charge.
  • Choisir le dossier de stockage (soit le même que les fichiers images d'origine, soit un dossier séparé).
  • Choisir l'extension du fichier dans le cas où les images WebP sont stockées au même endroit que les fichiers d'origine.
  • Choisir l'organisation des images dans le dossier où elles sont stockées (cela n'a pas d'impact sur les performances donc libre à vous de laisser le réglage par défaut).
  • Définir un en-tête Cache-Control : cela donne des instructions quant à la mise en cache (= mise en mémoire) des ressources, il peut donc être utile de configurer une valeur, par exemple :
    Cache-Control:public, max-age=86400,
    stale-while-revalidate=604800, stale-if-error=604800
Options du plugin WebP Express sur WordPress
Options du plugin WebP Express sur WordPress - Partie 1

La seconde partie des options gère les règles de redirection entre les images d'origine (jpg, png) et les images WebP : permettre la redirection si les images converties existent déjà, déclencher leur conversion si ce n'est pas le cas, et générer des images WebP en cas de besoin.

Les deux premières options a minima doivent être activées pour que le plugin fonctionne de manière "classique" (en mode Varied Image Responses).

Options du plugin WebP Express sur WordPress
Options du plugin WebP Express sur WordPress - Partie 2

La partie Conversion définit la manière dont vos images d'origine vont être traitées pour les formats jpg et png : vous pouvez choisir entre la conversion sans perte (lossless) ou avec légère perte de qualité (lossy), définir la qualité souhaitée pour le lossy (85% est la valeur conseillée), le fait de conserver ou pas les métadonnées (metadata) dans la version WebP de l'image...

On peut également définir la méthode à privilégier pour la conversion (on peut en cocher plusieurs et réorganiser leur ordre en faisant glisser les éléments avec la souris pour les positionner). L'élément le plus en haut sera testé en premier.

En cochant la case "Convert on upload", vos images seront automatiquement converties quand vous les mettez en ligne dans la médiathèque WordPress. C'est une fonctionnalité utile mais qui peut ralentir la mise en ligne de fichiers (si vous constatez que la mise en ligne de nouvelles images est trop lente, décochez la case).

La fonction de conversion en lot (bulk convert) permet de convertir d'un seul coup les images déjà présentes sur votre site.

Options du plugin WebP Express sur WordPress
Options du plugin WebP Express sur WordPress - Partie 3

Enfin, vous disposez d'options de contrôle du code HTML de vos pages. Il est conseillé de les activer : elles vont modifier le code des pages web pour y ajouter des références aux images WebP.

Le plugin propose deux méthodes de modification du HTML :

  • Remplacer les tags "img" par des tags "picture" dans le code : ce mode va faire coexister un lien vers l'image d'origine (jpg, png) et un lien vers la version WebP. C'est la solution la plus compatible avec les plugins de cache.
  • Remplacer les URL des images détectées par une version WebP (replace image URLs) : cela ne fonctionne pas en général si vous utilisez un plugin de cache.

Si vous êtes un utilisateur expert, vous pouvez choisir la méthode utilisée pour la modification du HTML. Par ailleurs, si vous utilisez un CDN, vous pouvez le spécifier.

Enfin, l'option d'activation du Web Service permet à des sites tiers autorisés d'utiliser votre propre site pour convertir des images en WebP.

Options du plugin WebP Express sur WordPress
Options du plugin WebP Express sur WordPress - Partie 4

Comment tester l'activation du WebP sur WordPress ?

Vous pouvez vérifier si le WebP est actif sur WordPress en sauvegardant une image de votre blog qui est censée avoir été convertie.

Ne vous fiez pas uniquement à l'URL : une image peut afficher une URL en .jpg ou .png dans votre navigateur et être pourtant en .webp (ce que vous verrez à l'enregistrement). En effet, si vous, en tant qu'utilisateur, regardez l'extension du fichier pour savoir de quel type de fichier il s'agit, le navigateur ne suit pas forcément la même logique !

Il regarde surtout ce que l'on appelle l'en-tête Content-Type, qui lui indique le type de fichier VRAIMENT envoyé.

Ici par exemple, vous voyez dans la barre d'adresse une URL qui se termine par ".jpg"... mais si vous regardez la petite fenêtre d'enregistrement du fichier, vous constatez que l'image est bien détectée comme "Fichier WEBP".

Image convertie en WebP
Image convertie en WebP

J'espère que cet article vous sera utile pour fluidifier encore plus le chargement de vos sites pour vos visiteurs !


Poster un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

2 commentaires sur “Comment afficher des images WebP sur WordPress pour réduire le temps de chargement ?
  • Convertir en webp

    Très bon article Marlène, le webp existe depuis plus de 10 ans si je ne me trompe pas. Je ne sais pas pourquoi wordpress a mis si longtemps à le prendre en charge.

    Le traitement des images doit être fait en amont si possible. Il faut éviter d´avoir trop de plugin dans wordpress.

    Utiliser un plugin qui compresse et renomme toutes les images en webp et ensuite le desinstaller et faire le traitement des images en amont comme je l´ai dis avant.

    Merci encore pour ton article et pour la découverte de plugin.

    Sylvain

    Répondre à Convertir
    • Marlène

      Beaucoup de gens ne font aucun traitement en amont, je le vois bien chez mes clients qui laissent toutes les équipes internes toucher au CMS ! C’est bien d’avoir quelques règles pour cadrer l’utilisation des images, ne serait-ce qu’un redimensionnement automatique ou ce type de chose, ça évite parfois la mise en ligne de fichiers de 5 Mo. Pour le reste (formats, naming, etc), c’est beaucoup de formation nécessaire !

      Répondre à Marlène


Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.