Table des matières
By Marine Larmier - Mis à jour le
Vous vous demandez comment utiliser le WebP sur WordPress et comment convertir vos images actuelles dans la médiathèque WordPress ? Vous êtes au bon endroit !
Si vous testez votre site sur PageSpeed Insights pour mesurer ses performances web, vous verrez peut-être la recommandation « Diffusez des images aux formats nouvelle génération » pour les améliorer. Google vous dit d’oublier le JPEG et le PNG et de concentrer vos efforts d’optimisation des images sur des formats d’image comme le WebP.
Ce guide explique comment résoudre cet avertissement et vous dit tout ce que vous devez savoir sur le WebP dans WordPress. Vous y trouverez aussi une liste des meilleurs outils pour convertir presque n’importe quel format en WebP.
Qu’est-ce que le format d’image WebP ?
Créé par Google, le format WebP est un format nouvelle génération conçu pour le Web. Il offre une compression des images supérieure, sans perte comme avec perte, tout en préservant leur qualité. Par rapport aux JPEG ou PNG traditionnels, ce format moderne vous permet de créer des fichiers encore plus légers, pour une page qui se charge plus vite.
WebP vs PNG vs JPEG
Si vous hésitez entre les trois formats et que les performances comptent pour vous, choisissez le WebP pour servir des images optimisées sur WordPress. Vous allez comprendre pourquoi.
JPEG vs WebP
Ces deux formats de fichier compressent les images pour les rendre plus faciles à partager sur le Web et préserver leur qualité. Ils semblent assez similaires, alors pourquoi choisir le WebP ?
Un fichier WebP est généralement beaucoup plus léger qu’un JPEG classique. Selon Google, une image WebP en compression avec perte pourrait être de 25 à 34 % plus légère qu’un fichier JPEG comparable.
Observez la figure ci-dessous : le WebP (en rouge) obtient une meilleure compression que le JPEG.
Vérifions cette affirmation avec notre image JPEG de 3,7 MB. Après la conversion en WebP, l’image a conservé la même qualité, mais la taille du fichier est tombée à 1,3 MB.
PNG vs WebP
Les PNG sont surtout utilisés pour les visuels web sans arrière-plan, comme les logos et les illustrations, plutôt que pour les photos de haute qualité. Ils occupent généralement plus d’espace de stockage que les autres formats. Les images WebP sans perte sont en moyenne 26 % plus légères que les PNG.
Faisons un autre test rapide en convertissant une image PNG en WebP. Notre fichier d’origine pesait 432 KB et, avec une simple conversion en WebP, il est descendu à 244 KB.
JPEG vs PNG vs WebP
Pour résumer, si vous voulez améliorer le score de performance Lighthouse de votre site WordPress, optez pour le WebP. Voici comment les trois formats se situent les uns par rapport aux autres :
Quels navigateurs sont compatibles avec le WebP ?
En 2023, tous les principaux navigateurs prennent en charge le WebP. Ce format moderne est par exemple pris en charge nativement par Google Chrome, Safari, Firefox, Edge, le navigateur Opera et d’autres outils.
Afficher les images WebP avec une solution de repli pour les anciens navigateurs
Les images sont indispensables pour garantir une excellente expérience utilisateur : elles devraient donc s’afficher pour chaque visiteur, même pour ceux qui utilisent d’anciennes versions de navigateurs. Si vous voulez jouer la sécurité, vous devriez activer une solution de repli vers d’autres formats traditionnels, comme le PNG ou le JPEG.
Comment ajouter une solution de repli aux images WebP
- Vous pouvez ajouter la balise <picture> à votre image pour mettre en place une solution de repli si votre visiteur utilise une ancienne version. Les navigateurs compatibles avec le WebP afficheront « dog.webp », tandis que les anciennes versions de navigateurs qui ne prennent pas en charge le WebP se rabattront sur l’élément « dog.jpg ».
- Utiliser un plugin WordPress comme Imagify, qui vous permet de convertir vos images en WebP et d’utiliser les balises <picture> pour activer la solution de repli sur les images WebP.
Comment créer et utiliser des images WebP sur WordPress
Depuis WordPress 5.8, le format WebP est entièrement pris en charge par WordPress. Il vous suffit de téléverser vos images dans votre médiathèque et de les intégrer à votre contenu.
Les 4 meilleurs plugins pour créer une image WebP
Il n’est plus nécessaire d’installer une extension tierce pour téléverser des images WebP sur WordPress, mais vous aurez besoin d’un plugin pour convertir vos images existantes en WebP. Voici 4 plugins WordPress dédiés au WebP avec lesquels vous pouvez convertir des images en WebP :
- Imagify : un plugin de compression d’images facile à utiliser, qui propose la conversion en WebP. Il est gratuit pour environ 200 images par mois.
- WebP Converter for Media : convertit en WebP les fichiers aux formats standard JPEG, PNG et GIF.
- WebP Express : ajoute une ligne de code pour servir des images WebP aux utilisateurs.
- ShortPixel Image Optimizer : un autre plugin d’optimisation d’images, qui convertit les JPEG, PNG ou GIF en WebP et en AVIF.
Comment créer une image WebP sur WordPress
Le moyen le plus simple de créer une image WebP sur WordPress est d’utiliser un plugin comme Imagify. Toutes vos images peuvent être converties en WebP en un seul clic, en même temps que la compression en masse.
- Téléversez vos fichiers JPEG, PNG, PDF ou GIF dans votre médiathèque WordPress
- Depuis votre tableau de bord WordPress, allez dans Réglages > Imagify > onglet Optimisation
- Cochez les cases suivantes : « Create WebP versions of images » et « Display images in WebP format on the site »
Bonus : si vous n’utilisez pas WordPress, vous pouvez aussi passer par un logiciel de création graphique comme Photoshop, Lightroom ou Sketch et exporter vos médias directement au format WebP :
Donnez un coup de pouce supplémentaire à l’optimisation des images
En plus de la compression des images et de la conversion en WebP, le lazy-loading est un moyen supplémentaire de servir des images optimisées à vos visiteurs et d’accélérer le chargement de vos pages. Avec un script comme Lazy Load, le navigateur ne charge que les images situées au-dessus de la ligne de flottaison (dans la fenêtre d’affichage de l’utilisateur).
Par ailleurs, dans son rapport de performances, PageSpeed Insights émet la recommandation « Différez le chargement des images hors écran », ce qui revient à appliquer le lazy-loading :
Comment appliquer le lazy-loading à vos images WebP
Le moyen le plus simple d’appliquer le script de lazy-loading à vos images WebP est d’utiliser un plugin WordPress comme WP Rocket. Pour mettre en place le lazy-loading, suivez ces deux étapes simples directement depuis l’administration de WordPress :
- Allez dans Réglages > WP Rocket > onglet LazyLoad
- Cochez les cases de votre choix parmi images, images background CSS et iframes et vidéos.
🏆 WP Rocket est le premier plugin à proposer le lazy-loading des images d’arrière-plan CSS en un seul clic !
Enfin, PageSpeed Insights peut détecter si WP Rocket est installé sur votre site WordPress et vous recommande, le cas échéant, d’activer la fonctionnalité « LazyLoad » :
🚀 Vous voulez améliorer les performances globales de votre site web ? WP Rocket est aussi l’un des meilleurs plugins de cache WordPress : il optimise votre base de données et votre code, et améliore vos Core Web Vitals en quelques clics.
FAQ
WebP, c’est quoi ?
Le WebP est un format d’image nouvelle génération créé par Google pour le Web. Il offre une compression des images supérieure, sans perte comme avec perte, tout en préservant leur qualité. Par rapport aux JPEG ou aux PNG traditionnels, il permet de créer des fichiers plus légers, et donc des pages qui se chargent plus vite.
Comment utiliser des images WebP sur WordPress ?
Depuis WordPress 5.8, le format WebP est entièrement pris en charge : il vous suffit de téléverser vos images WebP dans votre médiathèque et de les intégrer à votre contenu. Pour convertir vos images existantes en WebP, en revanche, vous aurez besoin d’un plugin comme Imagify ou WebP Converter for Media, qui permet de le faire directement depuis le tableau de bord WordPress. Avec Imagify, allez dans Réglages > Imagify > onglet Optimisation et cochez les cases « Create WebP versions of images » et « Display images in WebP format on the site ».
Comment convertir une image en WebP ?
Sur WordPress, vous pouvez convertir une image en WebP avec un plugin comme Imagify, WebP Converter for Media, WebP Express ou ShortPixel Image Optimizer. Avec Imagify, toutes vos images peuvent être converties en WebP en un seul clic, en même temps que la compression en masse. Si vous n’utilisez pas WordPress, vous pouvez aussi exporter vos médias directement au format WebP depuis un logiciel de création graphique comme Photoshop, Lightroom ou Sketch.
Pourquoi utiliser le format WebP plutôt que le JPEG ?
Un fichier WebP est généralement beaucoup plus léger qu’un JPEG classique : selon Google, une image WebP en compression avec perte pourrait être de 25 à 34 % plus légère qu’un fichier JPEG comparable. Lors de notre test, une image JPEG de 3,7 MB est passée à 1,3 MB après sa conversion en WebP, en conservant la même qualité. Des fichiers plus légers se traduisent par des pages qui se chargent plus vite et aident à améliorer vos Core Web Vitals.
Quels navigateurs prennent en charge le WebP ?
En 2023, tous les principaux navigateurs prennent en charge le WebP : Google Chrome, Safari, Firefox, Edge et Opera, par exemple, le gèrent nativement. Pour les visiteurs qui utilisent une ancienne version de navigateur, vous pouvez ajouter la balise <picture> à vos images afin de prévoir une solution de repli vers un format traditionnel comme le PNG ou le JPEG. Un plugin comme Imagify vous permet aussi de convertir vos images en WebP et d’utiliser les balises <picture> pour activer cette solution de repli.
Conclusion
Servir vos images au format WebP sur WordPress est un moyen simple de gagner en performances. Ce format nouvelle génération aide à améliorer vos Core Web Vitals en servant à vos visiteurs des fichiers image plus légers, sans nuire à la qualité !
WordPress et les principaux navigateurs prennent désormais en charge le WebP : vous n’avez donc pas à vous soucier de la compatibilité. Avec un outil comme Imagify ou WebP Converter for Media, convertir vos images en WebP directement depuis le tableau de bord WordPress n’a jamais été aussi simple.
Si vous êtes prêt à aller plus loin pour booster vos performances et optimiser encore davantage vos images (avec le lazy-loading, par exemple), essayez WP Rocket. Il applique 80 % des bonnes pratiques de performance dès son activation, et aucune connaissance technique n’est requise. De plus, une garantie satisfait ou remboursé de 14 jours s’applique : vous ne prenez donc aucun risque, si ce n’est celui de voir votre site se charger plus vite !
