Les images sont souvent le plus gros problème derrière un site WordPress lent. Si vos pages mettent trop de temps à se charger, les visiteurs partiront avant même de voir votre contenu.
Heureusement, l'utilisation d'images WebP peut résoudre ce problème. Ce format de fichier moderne réduit la taille des images jusqu'à 35 % sans perte de qualité, ce qui rend votre site considérablement plus rapide.
Dans ce guide, nous vous montrerons comment utiliser les images WebP dans WordPress en utilisant trois méthodes différentes.
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, ce support de base n'inclut pas la conversion automatique pour vos images précédemment téléchargées ni les options de repli pour les anciens navigateurs.
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 :
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 activation, accédez à la page Paramètres » Optimiseur d'images EWWW pour configurer les options du plugin. Vous verrez un assistant de configuration, mais vous pouvez cliquer sur le lien « Je sais ce que je fais » pour le quitter.
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 « Réécriture WebP JS » ou « Réécriture WebP d'image » comme options de livraison WebP. Ce sont des alternatives fiables si la méthode .htaccess ne fonctionne pas pour la configuration de votre serveur (par exemple, si vous utilisez un CDN).
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.
Parce qu'EWWW Image Optimizer utilise des règles de réécriture spéciales, l'URL de l'image dans la barre d'adresse affichera toujours l'extension de fichier d'origine (comme .png ou .jpg).
Pour confirmer qu'il s'agit d'une image WebP, faites un clic droit sur l'image et sélectionnez « Enregistrer l'image sous… ». Dans la fenêtre de téléchargement, vous devriez voir « Image WebP » répertorié comme type de fichier.
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 des balises (utilisant les balises <picture>) fonctionne parfaitement avec les CDN, bien qu'elle modifie légèrement la structure du code de votre site.
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.
Comme Imagify conserve la structure d'URL d'origine, vous ne verrez pas l'extension .webp dans la barre d'adresse. Au lieu de cela, faites un clic droit sur l'image et sélectionnez 'Enregistrer l'image sous...'. Le type de fichier dans la fenêtre d'enregistrement devrait indiquer 'Image WebP'.
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 de filtre 'Img' puis rechargez la page (CTRL+R sous Windows et Commande+R sur Mac). Regardez la colonne 'Type' dans l'inspecteur. Vous devriez voir 'webp' listé comme type pour vos images.
Tutoriel vidéo
Foire aux questions sur les images WebP
De nombreux lecteurs ont des questions sur le passage à ce format de fichier et sur la manière dont il affecte les performances de leur site Web. Voici les réponses à certaines des questions les plus fréquentes que nous recevons concernant l'utilisation des images WebP dans WordPress.
1. Les images WebP aident-elles vraiment au référencement ?
Oui, les images WebP peuvent améliorer considérablement votre classement SEO. Google considère la vitesse de chargement des pages comme un facteur de classement majeur, et l'utilisation de WebP réduit les temps de chargement des pages.
En servant des fichiers image plus petits, vous améliorez vos scores Core Web Vitals, ce qui aide votre site WordPress à se classer plus haut dans les résultats de recherche.
2. Que se passe-t-il si le navigateur d'un visiteur ne prend pas en charge WebP ?
Bien que la plupart des navigateurs modernes prennent en charge WebP, un petit pourcentage de navigateurs plus anciens ne le fait pas.
Si vous utilisez un plugin d'optimisation comme EWWW Image Optimizer ou Imagify, le plugin détecte automatiquement le navigateur du visiteur. Il servira la version WebP aux navigateurs modernes et le fichier JPEG ou PNG d'origine aux navigateurs plus anciens, garantissant que tout le monde peut voir votre contenu.
3. Puis-je télécharger directement des images WebP sur WordPress sans plugin ?
Oui, WordPress 5.8 et les versions ultérieures vous permettent de télécharger directement des fichiers WebP dans votre médiathèque, tout comme vous téléchargez des JPEGs ou des PNG. Cependant, le téléchargement manuel de fichiers ne convertit pas votre médiathèque existante.
Pour convertir automatiquement vos anciennes images, vous avez toujours besoin d'un plugin d'optimisation d'images comme SG Optimizer ou EWWW Image Optimizer.
4. Le WebP est-il meilleur que le JPEG ou le PNG ?
Dans presque tous les cas, le WebP est meilleur pour les performances d'un site Web. Les images WebP sont généralement 25 % à 35 % plus petites que les fichiers JPEG ou PNG comparables, tout en conservant la même qualité visuelle. Cette taille de fichier plus petite économise de la bande passante et rend vos pages beaucoup plus rapides à charger pour vos visiteurs.
5. La conversion en WebP supprimera-t-elle mes images d'origine ?
La plupart des plugins d'optimisation d'images, y compris Imagify et EWWW Image Optimizer, ne suppriment pas vos images d'origine par défaut. Ils créent une version WebP de l'image à afficher aux visiteurs tout en conservant le fichier d'origine sur votre serveur comme sauvegarde. Cela vous permet d'annuler les modifications si vous décidez un jour d'arrêter d'utiliser le format WebP.
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