Comment afficher des images WebP sur WordPress ?

JPEG, PNG, SVG, GIF : ces formats d’images traditionnels doivent sûrement vous dire quelque chose.

Ce sont les plus utilisés sur les sites internet. Derrière eux, un concurrent gagne de plus en plus en popularité.

Il faut dire qu’il a de quoi séduire. Ce format d’image aide à accélérer le temps de chargement de vos pages en compressant de façon spectaculaire vos images JPEG, PNG ou GIF.

Le format WebP, vous connaissez ? À la fin de cet article, il n’aura plus aucun secret pour vous. En prime, vous saurez comment utiliser et afficher des images WebP sur WordPress avec et sans plugin. 

Qu’est-ce que le format WebP ?

WebP : un format léger pour accélérer le web

WebP est un format d’image conçu par Google qui vise à créer « des images plus petites et plus riches » pour accélérer le web, détaille le moteur de recherche. Grâce au WebP, vos images ont un degré de compression supérieur (jusqu’à 30% en moyenne par rapport au 

JPG), sans perte de qualité.

En plus d’essayer de rendre le web plus rapide, le format WebP, lancé en 2010, a aussi pour objectif de remplacer des formats d’image plus traditionnels comme : 

• le JPEG (ou JPEG 2000), format standard et universel ;
• le PNG, qui gère la transparence ;
• le GIF, pour créer des images animées ; 
• le SVG, un format de dessin vectoriel.

À l’image de WordPress, WebP est open source : son code source est ouvert et modifiable. Comme l’indique Google dans sa FAQ dédiée au WebP, « tout le monde peut utiliser le format et suggérer des améliorations ».

Quelles sont les caractéristiques du format WebP ? 

Si l’on se penche un peu sur la technique, voici en détails quelques caractéristiques-clés du WebP.

Tout d’abord, WebP permet la compression des images avec (lossy) et sans perte de qualité (lossless).

« La compression WebP avec perte utilise un codage prédictif pour encoder une image, la même méthode que celle utilisée par le codec vidéo VP8 pour compresser les images clés dans les vidéos, détaille Google. Le code prédictif utilise les valeurs des blocs de pixels voisins pour prédire les valeurs d’un bloc, puis encode uniquement la différence. »

En lossy, la réduction de la taille du fichier est prioritaire, mais la perte de qualité sera plus importante qu’en lossless (qui conservera un fichier image un peu plus lourd).

Dans le cadre d’une compression sans perte (lossless), « la compression WebP sans perte utilise des fragments d’images déjà vus pour reconstruire exactement de nouveaux pixels », précise Google.

Ensuite, WebP est aussi intéressant car il est capable de :

• prendre en charge la transparence. La taille d’un fichier PNG converti en WebP avec pertes est par exemple 3 fois inférieure ;
• gérer des images animées, comme le fait par exemple le format GIF. « Les GIF animés convertis en WebP avec pertes sont 64% plus petits, tandis que les WebP sans perte sont 19% plus petits », explique Google.

Pourquoi utiliser le WebP ?

Même s’il reste encore beaucoup moins utilisé sur les sites web que des formats plus classiques type JPEG ou PNG, le WebP gagne en popularité et connaît une croissance importante au cours des derniers mois.

Selon les chiffres fournis par l’organisme W3Techs, son usage a par exemple doublé entre décembre 2021 et décembre 2022 :

De plus en plus de webmasters sont séduits par l’atout numéro un de ce format : grâce au gain de compression qu’il permet sur vos images, les pages de votre site se chargent plus rapidement.

À ce propos, les résultats d’études maison réalisées par Google sont éloquents :

• les images WebP sont 25% à 34% plus légères que celles en JPG ;
• le WebP permet un taux de compression jusqu’à 23% supérieur que le format PNG.

Le gain de compression est significatif, le tout sans aucune différence notable pour l’œil humain. Une image WebP a exactement la même apparence visuelle qu’une image JPEG ou PNG, regardez :

Avec des images plus légères, les pages de votre site internet WordPress se chargeront plus rapidement. C’est un aspect à prendre très au sérieux. 

Les images sont le type de contenu le plus utilisé sur une page web, devant les fichiers JavaScript, CSS et HTML. Dans certains cas, elles peuvent même représenter près de la moitié du poids total d’une page web !

Il est donc primordial de les optimiser, ce que permet WebP. Grâce à lui :

• vous soignez l’expérience utilisateur. Vos visiteurs souhaitent naviguer sur des pages rapides, sous peine de quitter rapidement votre site et d’augmenter son taux de rebond, ce qui reste un mauvais signal envoyé à Google. En moyenne votre taux de conversion se réduit de 4,42% à chaque seconde de temps de chargement additionnel ;
• vous tentez de vous conformer (en partie) aux Signaux Web Essentiels (Core Web Vitals), pris en compte par l’algorithme de Google. Les Core Web Vitals se focalisent notamment sur la vitesse de chargement de vos pages. Si elle est très lente, cela peut avoir un impact sur le classement de vos pages sur les pages de résultats de recherche de Google.

Pour connaître la vitesse de chargement de vos pages et obtenir des suggestions d’amélioration, servez-vous d’un outil de mesure de la performance comme Google Page Speed Insights, Pingdom Tools ou WebPageTest.

Quels navigateurs supportent le format WebP ?

Si WebP emporte de plus en plus l’adhésion, c’est aussi parce que sa prise en charge par les principaux navigateurs du marché s’est largement améliorée au fil du temps.

Au départ, il n’était par exemple pas pris en charge par Safari, le navigateur d’Apple, ce qui a pu freiner son expansion. Au moment de rédiger ces lignes, ce n’est plus le cas. 

Actuellement, les dernières versions de la plupart des navigateurs assurent le support du WebP. C’est par exemple le cas de  :

• Google Chrome (ordinateur et appareil mobile : smartphone ou tablette) ;
• Firefox (ordinateur et mobile) ;
• Opera (ordinateur et mobile) ; 
• Microsoft Edge ;
• Safari. 

D’après le site Can I Use, qui fournit des informations mise à jour sur la prise en charge de technologies web sur les navigateurs, le WebP est pris en charge à 97% par les navigateurs utilisés par les internautes :

Il y a quand même quelques détails à savoir pour vous :

• Internet Explorer ne prend pas en charge le WebP ;
• Safari prend en charge totalement WebP à partir de sa version 16.0 sur ordinateur de bureau. Pour les versions 14 à 15.6, le support est partiel : l’internaute doit avoir macOS Big Sur ou supérieur installé sur sa machine.

WordPress prend-il en charge nativement le format WebP ?

Vous venez de voir le support du WebP sur les navigateurs web, mais qu’en est-il de l’adoption de WebP sur WordPress ?

Depuis juillet 2021 et la sortie de la version 5.8 de WordPress, le CMS (Content Management System) le plus utilisé à travers la planète prend en charge WebP.

Concrètement, cela signifie que vous pouvez télécharger et mettre en ligne des images WebP depuis votre Médiathèque WordPress, à condition de les avoir transformées dans ce format au préalable (votre serveur d’hébergement doit aussi prendre charge le WebP, au passage)

Pour le moment, WordPress ne permet pas encore de générer par défaut des images en WebP dès que l’utilisateur télécharge des images JPEG. 

Cette fonctionnalité devait être intégrée par défaut dans le Coeur (Core) de WordPress à l’occasion de la sortie de WP 6.1, en novembre 2022. Mais son développement a été mis en pause au dernier moment.
Les principaux développeurs du CMS souhaitaient que l’option ne soit pas active par défaut, ce qui n’était pas le cas en l’état. 

Cependant, au moment où vous consulterez cet article, le support du format WebP sera peut-être intégré au Cœur de WordPress.

Si ce n’est pas encore le cas, vous allez devoir transformer vos images au format WebP pour pouvoir les utiliser sur WordPress. 

Découvrez maintenant comment faire avec et sans plugin, et les différences entre ces deux types d’usage. 

Comment utiliser des images WebP sur WordPress sans plugin ?

Pour convertir vos images en WebP sur WordPress manuellement, vous disposez de deux options principales. 

Option n°1 : Se servir d’un utilitaire de ligne de commande

L’option n°1 est la plus technique. Comme l’explique Google, il est d’abord possible d’utiliser l’utilitaire de ligne de commande WebP pour convertir vos fichiers image personnels au format WebP.

Cela implique que vous soyez à l’aise en développement et avec l’écriture de lignes de commandes.

L’avantage est que vous pouvez convertir tous vos fichiers JPEG en masse, grâce à une ligne de texte. La procédure diffère en fonction du système d’exploitation que vous utilisez (Windows, Linux/macOS) :

Pour information, Google donne plus d’infos sur la marche à suivre dans sa documentation.

Option n°2 : Utiliser un outil/logiciel dédié

Plus abordable pour le novice ou l’utilisateur intermédiaire, la seconde solution consiste à passer par un logiciel ou outil en ligne, capable de convertir vos fichiers image en WebP.

Voici quelques convertisseurs de fichiers WebP susceptibles de vous aider :

• WebPonize, une application MacOs gratuite pour convertir au format WebP. Son équivalent Windows est WebPconv ;
• Convertio (gratuit) ;
• EZGIF (gratuit) ;
• L’extension Chrome Save image as Type (gratuite). Elle permet d’enregistrer une image en WebP ;
• Les logiciels Adobe Photoshop (payant) et Gimp (gratuit) permettent d’exporter des images au format WebP pour WordPress ;
• Online Converter (gratuit).

Choisissez l’un des services proposés ci-dessus, puis convertissez l’image de votre choix au format WebP. Le fichier portera alors l’extension .webp (ex : monimage.webp).

Rendez-vous ensuite sur votre interface d’administration WordPress pour télécharger l’image convertie dans votre Médiathèque. Pour cela, dirigez-vous dans le menu Médias > Ajouter.

Téléchargez votre image en la glissant-déposant dans la zone prévue à cet effet :

Votre image est maintenant présente dans votre Médiathèque. Vous pouvez l’utiliser dans n’importe quel type de contenu personnalisé (article, page etc.). Le navigateur de votre utilisateur se chargera tout seul de l’afficher au format WebP, s’il le prend en charge.

Si vous utilisez l’éditeur Gutenberg sur WordPress, vous pouvez aussi directement glisser-déposer une image dans le contenu de votre choix, par exemple un article de blog que vous êtes en train de rédiger. WordPress ajoutera automatiquement l’image en question à votre médiathèque. De quoi gagner un peu de temps !

Si cette méthode est fonctionnelle et efficace, elle comporte deux problèmes majeurs :

• Elle vous « oblige » à sortir de votre interface WordPress pour convertir vos fichiers. Vous devez jongler entre plusieurs onglets, ce qui ralentit le processus d’édition ;
• Elle ne permet pas de convertir en WebP les images déjà présentes sur votre site. 

Avec une extension, fini ce genre de petits désagréments. Reste à savoir laquelle utiliser, et comment procéder. Voyez tout cela juste en-dessous.

Comment afficher des images WebP sur votre site avec un plugin ?

Une extension WebP pour WordPress est capable de convertir en WebP toutes les nouvelles images que vous allez télécharger, ainsi que celles déjà présentes dans votre Médiathèque.

Pour vous, rien ne change : vous continuez à ajouter vos images à la volée, dans le format de votre choix, et le plugin WebP sur WordPress se charge de la conversion automatiquement.

Si le navigateur de votre visiteur prend en charge le WebP, la version WebP de votre image s’affichera. Dans le cas contraire, c’est le format original de l’image (JPEG, PNG, GIF) qui sera pris en considération.

Le répertoire officiel de plugins WordPress propose une dizaine d’extensions pour passer à l’action. Parmi celles contenant plus de 100 000 installations actives, on retrouve par exemple : 

• EWWW Image Optimizer ;
• Smush ;
• Imagify ;
• ShortPixel Image Optimizer ;
• Converter for Media ;
• WebP Express. 

Alors, laquelle choisir ? Smush ? ShortPixel ? Imagify ? Pour les besoins de ce test, nous allons vous présenter la configuration de trois d’entre-elles :

• Imagify, parce qu’il s’agit d’une solution made in France ;
• EWWW Image Optimizer, qui est la plus populaire avec Smush (1 million + installations actives) ;
• Converter for Media, l’une des mieux notées (4,9 étoiles sur 5).

L’équipe dédiée en charge de la Performance sur WordPress propose aussi une extension, Performance Lab, pour améliorer les performances de votre site. Elle propose notamment un module pour créer une version WebP de chaque nouvelle image JPEG que vous téléversez.

Option 1 : Convertir des images WebP sur WordPress avec le plugin Imagify

Développé et maintenu par l’équipe de WP Media, qui propose aussi l’extension de cache WP Rocket, Imagify est une extension qui permet d’optimiser vos images en les compressant, sans perte de qualité.

Parmi ses fonctionnalités, elle propose aussi une option pour convertir vos fichiers à des formats nouvelle génération (next gen formats) comme le WebP sur WordPress. 

Pour y parvenir, commencez par installer puis activer le plugin en passant par le menu Extensions > Ajouter.

Après avoir enregistré votre clé API récupérée sur votre compte Imagify (tout se fait en très vite quelques clics), configurez vos réglages d’optimisation concernant le format WebP sur WordPress.

Rendez-vous dans Réglages > Optimisation. Au niveau de l’encart appelé « Optimisation, Format WebP », cochez les cases suivantes :

• « Créer des versions WebP de vos images » afin qu’Imagify s’en charge automatiquement pour vous ;
• « Afficher les images au format WebP sur le site » pour indiquer au plugin qu’il doit proposer les versions WebP aux navigateurs web qui les prennent en charge. Par défaut, Imagify remplacera vos balises <img> par des balises <picture> : il s’agit de sa solution recommandée.
  Si jamais cela cause un bug sur votre site, cochez plutôt le bouton radio « Utiliser des règles de réécriture ». au niveau de votre fichier .htaccess.

Pensez à sauvegarder vos réglages. Pour cela, cliquez sur le bouton « Enregistrer les modifications », en bas de la page. 

Par la suite, vous pouvez aussi optimiser en masse (bulk optimization) toutes les images de votre site en allant dans Médias > Optimisation en masse. Dans ce cas, vos réglages concernant le WebP sur WordPress s’appliqueront à l’ensemble de votre Médiathèque, en un clic.

Imagify est un plugin WordPress freemium. Sa version gratuite est limitée à l’optimisation de 20 MB par mois, soit environ 200 images. Les tarifs premium vont ensuite de 4,99 €/mois (pour 500 MB) à 9,99 $/mois (illimité).

Option 2 : L’extension EWWW Image Optimizer

EWWW Image Optimizer est l’un des plugins d’optimisation d’images parmi les plus populaires du répertoire officiel WordPress. Comme Imagify, elle compresse et optimise le poids de vos images pour vous aider à rendre le chargement de vos pages plus rapide.

Elle n’impose pas de limitation de taille pour traiter vos images et présente la particularité de compresser vos images sur votre serveur (pas besoin de clé API ici).

Après avoir activé l’extension, dirigez-vous dans l’onglet « Général » du menu de réglages (dans Réglages > EWWW Image Optimizer). 

Au niveau de l’option « Conversion WebP », cochez la case correspondante pour convertir vos images dans ce format :

Désormais, à chaque fois que vous téléchargerez une nouvelle image sur votre site WordPress, EWWW Image Optimizer la générera au format WebP.

Si vous voulez convertir en masse tous les fichiers de votre Médiathèque, allez dans Médias > Optimisation de masse. Cochez la case « Uniquement WebP » et le tour est joué :

EWWW Image Optimizer ne vous convient pas, notamment au niveau de son interface ? Essayez la version gratuite de ShortPixel ou Smush, par exemple.

Option 3 : Afficher des images WebP sur WordPress avec Converter for Media

Contrairement à Imagify et à EWWW Image Optimizer, qui permettent d’optimiser le poids de vos images (le WebP est une option parmi d’autres), Converter for Media est spécifiquement dédié à une action précise : remplacer vos fichiers d’image standards (JPG, PNG, GIF) par leur version au format WebP, sur WordPress.

Après activation de cette extension WebP pour WordPress, la conversion WebP est active par défaut.

Néanmoins, vous pouvez affiner vos réglages via deux onglets, accessibles dans Réglages > Converter for Media :

• « General Settings » (« Réglages Généraux ») permet par exemple de choisir le type de compression (allant de lossy à loseless). Vous pouvez aussi sélectionner les répertoires dans lesquels les fichiers qui s’y trouvent seront convertis en WebP (ex : Téléchargements / Plugins / Thèmes).
• « Advanced Settings » (« Réglages Avancés ») vous laisse la main sur le choix des fichiers à convertir en WebP sur votre WordPress, sur le mode de chargement de l’image ou sur des fonctions supplémentaires (ex : suppression automatique des fichiers dans les formats de sortie plus grands que l’original).

Dans sa version Pro, WebP Converter for Media propose également la conversion au format AVIF. Ce format né en 2019 propose des niveaux de compression encore plus élevés qu’en WebP. Cependant, pour le moment, il est encore peu pris en charge par la plupart des logiciels, dont les navigateurs web.

Comment vérifier que vos images sont bien converties au format WebP ?

En principe, quel que soit le plugin que vous choisirez, vos images seront converties au format WebP. Pour vous en assurer, effectuez une petite manipulation toute simple sur votre écran. 

Après avoir ajouté une image dans un article de blog ou une page de présentation de vos services, ouvrez-la dans un nouvel onglet de votre navigateur en effectuant un clic droit dessus :

Si son extension se termine par webp dans votre barre de recherche, tout a fonctionné :

WebP et WordPress : le récapitulatif

Utiliser le format WebP sur WordPress constitue un excellent moyen de compresser vos images sans perte de qualité visible par l’internaute. Cela améliore aussi la vitesse de chargement de vos pages, tout en soignant l’expérience utilisateur. 

De mieux en mieux pris en charge par les navigateurs web, le format WebP pourrait même faire son apparition en natif dans le Coeur de WordPress, au cours de la sortie de l’une de ses prochaines versions majeures.

En attendant pareille évolution, l’usage d’un plugin représente la façon la plus simple et rapide de convertir vos images en WebP. 

Vous pouvez soit : 

• passer par un plugin tout-en-un comme Imagify, qui vous aidera à la fois à activer le format WebP mais aussi à optimiser le poids et la taille fichier de vos images. Si ce plugin ne répond pas à vos besoins, donnez sa chance à un concurrent comme EWWW, ShortPixel ou Smush, pour ne citer qu’eux ;
• opter pour une extension spécifique au WebP sur WordPress comme Converter for Media.

Si malgré les conseils et explications présentés dans cet article, vous avez besoin d’être accompagné pour implémenter le format WebP sur WordPress, l’équipe d’experts de Maintenance WP se tient à votre disposition. 

Nous sommes disponibles 7 jours/7 pour vous accompagner sur-mesure. Contactez-nous pour en savoir plus.