Chez WPBeginner, nous évaluons constamment les nouvelles technologies qui peuvent aider les utilisateurs de WordPress à créer des sites Web plus rapides et plus performants. Les images WebP sont sur notre radar depuis un certain temps, et bien que nous ne les ayons pas encore implémentées sur notre propre site, nous sommes conscients du potentiel de ce format.
Ce qui rend WebP intéressant, c'est sa capacité à réduire la taille des fichiers image jusqu'à 35 % sans perte de qualité notable. Nous avons vu des sites utilisant WebP obtenir des améliorations significatives en termes de vitesse de chargement et d'engagement des utilisateurs.
Sur la base de nos recherches et de nos tests, nous vous montrerons comment utiliser les images WebP dans WordPress pour bénéficier des avantages de vitesse de ce format d'image moderne.
Qu'est-ce que WebP ?
WebP est un format d'image moderne développé par Google spécifiquement pour une utilisation sur le Web. Ce qui le rend spécial, c'est sa technologie de compression supérieure. Les images WebP sont généralement 25 à 35 % plus petites que les fichiers JPEG et PNG tout en conservant une qualité visuelle identique.
Pour mettre cela en perspective, si votre image PNG actuelle fait 100 Ko, la même image au format WebP ferait environ 65 à 75 Ko sans différence de qualité visible. Cette réduction de taille se traduit directement par des temps de chargement de page plus rapides et une meilleure expérience utilisateur.
Le format prend en charge la compression avec perte et sans perte, ainsi que des fonctionnalités telles que la transparence et l'animation, ce qui en fait un remplacement polyvalent pour plusieurs formats traditionnels.
Vous pouvez en apprendre davantage sur la compression d'images dans notre guide sur comment optimiser les images pour le Web.
Prise en charge des navigateurs : WebP est-il prêt pour votre site ?
Actuellement, WebP bénéficie d'une large prise en charge par les navigateurs, avec plus de 95 % de couverture mondiale. Tous les navigateurs majeurs, y compris Chrome, Firefox, Safari (depuis iOS 14) et Edge, prennent entièrement en charge les images WebP.
Les 5 % restants se composent principalement d'anciennes versions de navigateurs dont l'utilisation diminue rapidement.
Faut-il utiliser des images WebP dans WordPress ?
Pour la plupart des sites WordPress, la réponse est oui. L'implémentation de WebP peut considérablement accélérer votre site WordPress et fonctionne parfaitement en parallèle avec d'autres optimisations de performance comme les plugins de mise en cache et les CDN.
Depuis WordPress 5.8, la plateforme prend en charge nativement WebP, ce qui signifie que vous pouvez télécharger et utiliser des images WebP directement sans aucun plugin. Cependant, cette prise en charge de base n'inclut pas la conversion automatique ni les options de repli.
Pour de meilleurs résultats, nous recommandons d'utiliser un plugin d'optimisation d'images dédié. Ces plugins convertissent automatiquement vos images existantes au format WebP et servent des versions JPEG ou PNG traditionnelles au faible pourcentage d'utilisateurs disposant de navigateurs non compatibles.
WebP est particulièrement bénéfique si votre site est riche en images (comme les blogs de photographie, les boutiques e-commerce ou les portfolios) ou si votre blog WordPress a actuellement du mal à se charger lentement en raison de la taille des images.
Voici comment utiliser les images WebP dans WordPress. Nous vous montrerons plusieurs méthodes afin que vous puissiez choisir celle qui vous convient le mieux :
- Utiliser des images WebP dans WordPress avec EWWW Optimizer
- Utiliser des images WebP dans WordPress avec Imagify
- Utiliser des images WebP dans WordPress avec SG Optimizer
- Guides d'experts sur l'utilisation des images dans WordPress
Tutoriel vidéo
Si vous préférez des instructions écrites, continuez à lire.
Méthode 1 : Utiliser des images WebP dans WordPress avec EWWW Optimizer
EWWW Image Optimizer est l'un des meilleurs plugins de compression d'images WordPress qui vous permet d'optimiser vos images WordPress. Il prend également en charge les images WebP et peut les afficher automatiquement sur les navigateurs compatibles. Consultez notre avis sur EWWW Image Optimizer pour plus de détails.
La première chose à faire est d'installer et d'activer le plugin EWWW Image Optimizer. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.
Après l'activation, allez à la page Paramètres » EWWW Image Optimizer pour configurer les options du plugin. Vous serez accueilli par un assistant de configuration, mais vous pouvez cliquer sur le lien « Je sais ce que je fais » pour quitter l'assistant.
Sur l'écran suivant, vous verrez un tas d'options de plugin.
Faites défiler vers le bas et cochez la case à côté de l'option « Conversion WebP ».
Après cela, cliquez sur le bouton « Enregistrer les modifications » pour sauvegarder vos paramètres.
Ensuite, vous devez faire défiler vers le bas jusqu'à la section Conversion WebP. Le plugin vous montrera maintenant des règles de réécriture avec une image d'aperçu rouge.
Vous devez cliquer sur le bouton « Insérer les règles de réécriture », et le plugin essaiera automatiquement d'insérer ces règles de réécriture dans votre fichier .htaccess.
Si le plugin réussit à ajouter ces règles, l'aperçu de l'image rouge deviendra vert avec le texte « WebP ».
Parfois, le plugin peut ne pas être en mesure d'insérer les règles. Dans ce cas, vous devez copier les règles de réécriture de la page des paramètres du plugin et les coller manuellement en bas de votre fichier .htaccess.
Une fois que vous avez terminé, retournez à la page des paramètres du plugin et cliquez à nouveau sur le bouton « Enregistrer les modifications ». Si l'image d'aperçu devient verte, cela signifie que vous avez activé avec succès la diffusion d'images WebP sur votre site WordPress.
Alternativement, vous pouvez choisir entre les méthodes de réécriture WebP JS ou de réécriture WebP comme options de livraison WebP. Celles-ci sont un peu plus lentes que la méthode .htaccess, mais elles feront le travail.
Convertissez en masse vos anciennes images en versions WebP
EWWW Image Optimizer vous permet de convertir facilement vos fichiers image précédemment téléchargés en images WebP. Allez simplement sur la page Média » Bibliothèque et passez en vue liste.
Ensuite, vous devez cliquer sur le bouton « Options de l’écran » et changer le « Nombre d’éléments par page » à 999. Si vous avez plus de 1000 images, celles-ci apparaîtront sur la page suivante.
De cette façon, vous pourrez sélectionner rapidement un grand nombre d’images pour l’optimisation en masse. Ensuite, cliquez sur la case à cocher Tout sélectionner en haut pour sélectionner toutes les images.
Après cela, cliquez sur le menu déroulant « Actions groupées » et sélectionnez l’option « Optimisation groupée ». Enfin, cliquez sur le bouton « Appliquer ».
Sur l’écran suivant, le plugin vous donnera la possibilité de sauter la compression d’image et de simplement les convertir en WebP. Vous pouvez cocher cette option si vos images sont déjà optimisées.
Après cela, cliquez sur le bouton « Rechercher les images non optimisées » pour continuer. Le plugin vous indiquera alors le nombre d’images qu’il a trouvées, vous pouvez donc cliquer sur le bouton Optimiser pour continuer.
Vos images seront maintenant optimisées, et EWWW Optimizer générera des versions WebP pour vos images.
Test de votre livraison d’images WebP
Une fois que vous avez optimisé vos images, vous pouvez aller sur un article de blog contenant plusieurs images.
Passez la souris sur n’importe quelle image et faites un clic droit pour ouvrir l’image dans un nouvel onglet.
Cela ouvrira l’image dans un nouvel onglet du navigateur.
Vous pourrez voir qu’elle a une extension .webp dans la barre d’adresse.
Si le plugin ne parvient pas à servir l’image WebP, vous pouvez retourner à la page des paramètres du plugin. À partir de là, vous pouvez changer l’option de livraison WebP pour les méthodes « Réécriture WebP JS » ou « Réécriture WebP ».
Méthode 2 : Utiliser des images WebP dans WordPress avec Imagify
Imagify est un plugin d'optimisation d'images WordPress créé par les développeurs de WP Rocket, le meilleur plugin de mise en cache WordPress. Il vous permet d'optimiser et de convertir facilement vos images au format WebP. Consultez notre test d'Imagify pour en savoir plus.
La première chose à faire est d'installer et d'activer le plugin Imagify. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.
Après l'activation, vous devez visiter la page Paramètres » Imagify pour configurer les paramètres du plugin. À partir de là, cliquez sur le bouton « Créer une clé API gratuite » pour continuer.
Il vous sera demandé d'entrer une adresse e-mail professionnelle. Ensuite, vous pourrez vérifier votre boîte de réception pour un e-mail contenant votre clé API. Copiez et collez la clé dans la page des paramètres du plugin et cliquez sur le bouton « Enregistrer les modifications ».
Ensuite, vous devez faire défiler jusqu'à la section Optimisation. Là, vous devez cocher les options à côté de « Créer des versions webp des images » et « Afficher les images au format webp sur le site ».
Ci-dessous, vous pouvez choisir entre deux méthodes de livraison pour afficher les images WebP dans WordPress. La première est la méthode .htaccess, et la seconde utilise une balise.
La méthode .htaccess est plus rapide, mais elle ne fonctionne pas si vous utilisez un service CDN. La méthode de la balise fonctionne également avec les CDN, mais elle peut casser certains thèmes WordPress.
Vous pouvez choisir l'une ou l'autre qui convient bien à votre site. Ensuite, cliquez sur le bouton « Enregistrer & Aller à l'optimiseur en masse » en bas.
Cela vous amènera à la page Médiathèque » Optimisation en masse.
Le plugin commencera automatiquement à optimiser toutes vos images WordPress en arrière-plan.
Si vous avez beaucoup d'images, cela peut prendre un certain temps. Ne vous inquiétez pas, vous pouvez fermer la page et y revenir plus tard, car la fermeture de la page n'arrêtera pas le processus d'optimisation des images.
Tester vos images WebP dans WordPress
Une fois l'optimisation terminée, vous pouvez visiter une page ou un article contenant quelques images. Passez votre souris sur une image, puis faites un clic droit pour sélectionner « Ouvrir l'image dans un nouvel onglet ».
Cela ouvrira l’image dans un nouvel onglet du navigateur.
Vous pourrez voir l'extension .webp dans la barre d'adresse.
Méthode 3 : Utiliser des images WebP dans WordPress avec SG Optimizer
Cette méthode est recommandée si vous êtes un utilisateur de SiteGround.
SiteGround est l'une des meilleures solutions d'hébergement WordPress. Ils offrent un plugin SG Optimizer gratuit à leurs utilisateurs, qui vous permet d'optimiser les performances de votre WordPress. Il inclut également l'option d'optimiser les images WordPress.
Tout d'abord, vous devez installer et activer le plugin SG Optimizer.
Après l'activation, le plugin ajoutera un nouvel élément de menu dans votre barre latérale d'administration intitulé « SG Optimizer ». Cliquer dessus vous mènera à la page des paramètres du plugin.
À partir de là, vous pouvez activer les paramètres de mise en cache si vous souhaitez utiliser le système de mise en cache intégré de SiteGround.
Ensuite, vous pouvez passer à l'onglet Optimisation des médias et activer l'option « Générer des copies WebP des nouvelles images ».
En dessous, vous verrez l'option « Générer en masse des fichiers WebP ».
Cliquer sur le bouton bascule de cette option lancera la génération de copies WebP pour tous les fichiers image de votre bibliothèque de médias WordPress.
Une fois terminé, votre site WordPress commencera à servir des images WebP.
Tester les images WebP dans SG Optimizer
Pour voir si votre site Web sert des images WebP, vous devez ouvrir une page de votre site avec quelques images.
Après cela, faites un clic droit et sélectionnez l'outil Inspecter. Cela ouvrira la console du développeur, où vous devrez passer à l'onglet Réseau.
À partir de là, cliquez sur l'onglet « img », puis rechargez la page (CTRL+R sous Windows et Commande+R sur Mac). Pendant que votre site Web se recharge, vous verrez toutes les images chargées dans la console du développeur.
Guides d'experts sur l'utilisation des images dans WordPress
Nous espérons que cet article vous a aidé à apprendre comment utiliser les images WebP dans WordPress. Vous pourriez également vouloir consulter d'autres guides pour utiliser des images sur votre site WordPress :
- Comment ajouter correctement des images dans WordPress (étape par étape)
- Comment ajouter des images mises en avant ou des miniatures d'articles dans WordPress
- WebP vs. PNG vs. JPEG : le meilleur format d'image pour WordPress
- Comment optimiser les images pour les performances web sans perdre en qualité
- Comparatif des meilleurs plugins de compression d'images pour WordPress
- Outils pour créer de meilleures images pour vos articles de blog
- Excellents plugins WordPress pour la gestion des images (mis à jour)
- Texte alternatif d'image vs Titre d'image dans WordPress – Quelle est la différence ?
- Où WordPress stocke-t-il les images sur votre site ?
- Comment charger paresseusement les images dans WordPress
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Olaf
Chaque fois que nous nous posons la question de savoir comment accélérer un site web, les médias sont un domaine où il y a presque toujours une marge d'optimisation. Pratiquement tous les utilisateurs de WordPress, à moins qu'ils ne soient des professionnels, téléchargent des images sur le site telles qu'elles sont enregistrées sur leur ordinateur, souvent inutilement grandes en dimensions et en taille de fichier. Il est intéressant de voir à quel point la vitesse d'un site web peut s'améliorer simplement en ajustant les médias, en particulier en compressant les images dans un format différent. J'aime le WebP car il offre toujours une qualité suffisante tout en gardant des tailles de fichier beaucoup plus petites par rapport à l'original. Pour les sites web existants avec des dizaines d'images, il est utile de connaître une méthode pour faire tout cela en masse, et c'est là que des tutoriels comme ceux-ci sont incroyablement précieux.
Paul
J'ai suivi les étapes que vous avez décrites, mais lors des tests, le nouvel onglet qui s'ouvre lorsque je sélectionne « Ouvrir l'image dans un nouvel onglet » ne se termine pas par webp, comme vous le montrez, mais par l'extension de fichier d'origine. Lorsque je sélectionne « Enregistrer l'image sous... », cependant, il affiche webp. Je ne suis pas tout à fait sûr de ce que cela signifie. L'image est-elle vraiment en webp, et est-elle affichée comme telle ? Le navigateur que j'utilise est la dernière version de Chrome, il ne devrait donc pas récupérer l'image de secours. J'utilise un plugin de mise en cache, mais j'ai vidé le cache avant de tester.
Support WPBeginner
Vous utilisez des images WebP si c'est ce que vous voyez lors de l'enregistrement. Cela dépendra de l'outil que vous utilisez, mais il y a une redirection WebP pour l'URL afin que vous gardiez l'URL mais affichiez la version WebP de l'image pour éviter les erreurs 404.
Admin
MOINUDDIN WAHEED
Je cherchais un mécanisme pour convertir mes images WordPress en WebP car j'ai constaté une énorme différence de taille de fichier entre les images PNG et JPG et les images WebP.
Avoir des images WebP aidera certainement à charger le site Web plus rapidement. Cela améliorera la vitesse et les performances du site Web.
Merci pour le guide de conversion des images WordPress existantes au format WebP.
Support WPBeginner
You’re welcome, glad you found our guide helpful
Admin
Jiří Vaněk
Habituellement, je génère des images WebP dans un éditeur externe. Cependant, est-il préférable de télécharger des images au format PNG sur le web, puis de les générer en WebP ? Je veux dire, est-il préférable d'avoir les deux formats pour que le navigateur puisse choisir ou pas ? Je crains que quelqu'un n'utilise encore un ancien navigateur qui ne prend pas en charge WebP, et dans ce cas, ces images ne s'afficheront pas sur mon site web pour cet utilisateur.
Support WPBeginner
Si vous souhaitez spécifiquement une image de secours, alors laisser les plugins convertir vos images serait la meilleure option. Créer les images WebP avec un éditeur serait la manière recommandée pour économiser de l'espace sur votre site.
Admin
Jiří Vaněk
Merci pour votre réponse. J'ai encore beaucoup d'espace sur mon FTP (100 Go), donc d'après votre réponse, j'utiliserai plutôt un plugin pour avoir plus de formats d'image sur le site web, en m'assurant qu'il fonctionne bien même pour les anciens navigateurs qui ne prennent pas en charge le webp. Je sais qu'il reste très peu de navigateurs de ce type, mais ils existent toujours. Merci pour vos conseils.
emir
Nous avons utilisé quelques images de webp dans WooCommerce, lors de la sauvegarde de woocommerce sur un autre serveur, les images webp n'ont pas été transférées, nous sommes revenus au format jpeg.
Support WPBeginner
Merci d'avoir partagé votre expérience avec les images webp. Si vous contactez le support de votre outil de sauvegarde, il existe normalement des extraits de code ou d'autres moyens de résoudre ce problème !
Admin
Ashikur Rahman
si je suis l'étape 1, j'aurai de vieux fichiers aux formats jpg/png, n'est-ce pas ? cela créera un désordre dans le dossier de téléchargement. ils ont supprimé l'option de fichier original, si j'utilise cette option. cela cassera-t-il mes images de publication ?
et surtout, que se passe-t-il si je désactive/supprime le plugin eww, cela supprimera-t-il aussi l'image webp convertie ?
que devrais-je faire ?
Support WPBeginner
Le plugin conserve actuellement les anciennes images pour les navigateurs qui ne prennent pas en charge les images WebP et ne créerait l'image WebP que si elle est de meilleure taille que le jpg/png. La suppression de l'original ne casserait pas votre site, mais si une majorité de vos visiteurs utilisent d'anciens navigateurs qui ne prennent pas en charge WebP, cela pourrait être problématique pour ces utilisateurs.
Vous devrez vérifier auprès du support du plugin l'état actuel des images créées lorsque le plugin est supprimé.
Admin
Rebecca
Bonjour, j'ai remarqué que certains plugins comme wp-optimize offrent une option pour préserver les données EXIF lors de la conversion en webp. Ces données sont-elles nécessaires à conserver ?
Merci d'avance
Support WPBeginner
Ce n'est pas obligatoire, mais c'est utile pour les sites qui utilisent ces informations.
Admin
Theo
voici ce que je cherche,
Très utile
Support WPBeginner
Heureux que notre guide vous ait été utile !
Admin
Kim
Merci beaucoup pour votre réponse rapide !
Support WPBeginner
Glad we could help
Admin
Kim
C'est une excellente astuce, juste une question... devrai-je exécuter l'optimiseur EWWW à chaque fois que je télécharge une nouvelle image (PNG, JPG) ?
Support WPBeginner
The plugin will automate the process for new uploads
Admin