Format WebP : quelle utilité pour votre site internet ? Comment convertir vos images ?
Article mis à jour le 16 mai 2023
Paramètre technique essentiel de l’Expérience Utilisateur et de votre référencement naturel sur les moteurs de recherche, le temps de chargement de votre site dépend en partie du poids de vos photos. Si JPEG était le format le plus populaire pour illustrer vos sites e-commerce ou vos blogs, il se révèle gourmand en ressource. Bonne nouvelle : les développeurs de Google ont déployé un « nouveau » format bien plus performant, il y a déjà plus de 10 ans : le format d’image WebP.
Quels sont les avantages de passer d’une simple compression d’image à WebP ?
Comment transformer vos illustrations en WebP ?
Quelles extensions choisir pour intégrer le format WebP à votre site internet ?
Pourquoi utiliser les images en WebP ?
Les images représentent généralement 60 % du poids d’une page Web. Leur optimisation se révèle alors primordiale pour donner un signal positif aux algorithmes de Google. En effet, la vitesse de chargement demeure une donnée technique importante pour le SEO. Le format WebP vous permettra donc de charger plus vite votre e-boutique ou votre site web et offrira une expérience de meilleure qualité aux internautes et mobinautes qui le consultent.
Convertir vos images et fichiers au format WebP, c’est :
- Réduire la taille de vos images de 34 % pour les images JPEG et de 50 % pour les PNG ;
- Convertir tous vos formats d’image même l’animation : JPG, PNG, GIF et BMP ;
- Disposer d’une compression avec perte ou sans perte de vos clichés ;
- Posséder des fichiers légers et qui conservent toutes leurs qualités ;
- Réduire votre impact CO2 et votre consommation d’électricité grâce à la rapidité d’affichage de votre site.
Le format WebP allège le poids de vos fichiers images tout en préservant la transparence des fichiers PNG. Il n’altère pas non plus la luminosité de votre cliché. Cependant, pour vos images vectorielles comme le logo, le format SGV se révèle pour le moment le plus adapté pour les éléments graphiques.
En fonction de votre CMS, WebP ne sera pas natif. Vous choisirez une extension qui vous permettra de réduire le poids de vos photos numériques et de proposer, selon le navigateur de votre client, les formats d’images usuels ou le format WebP. WebP sera bientôt supporté par tous nos navigateurs, même Safari d’Apple, dans sa dernière version.
Comment passer d’une image JPEG à une image WebP ?
Selon votre CMS, le procédé diffère. Sur Shopify, utilisez l’outil d’optimisation des images intégré à votre CMS pour intégrer vos fichiers WebP. Pour les autres CMS comme Magento, le choix d’une extension s’impose. Vous pourrez convertir tous les fichiers de JPEG à GIF.
Depuis la version 5.8 de WordPress, vous pouvez téléverser directement vos images dans votre bibliothèque de médias en format WebP, de la même manière que les formats JPEG, PNG et GIF. Toutefois, WordPress ne supporte pas encore la conversion automatique des images au format WebP. Si vos images ne sont pas en format WebP, il vous faudra soit les convertir avant de les téléverser, soit utiliser une des extensions listées plus bas dans votre WordPress.
Convertir ses images en WebP
Pour convertir vos illustrations directement depuis votre navigateur, installez un convertisseur d’image puis exportez les visuels sur votre site web :
- L’extension d’image WebP de Microsoft est gratuite. Vous devez posséder le système d’exploitation Windows 10.
- Gratuit pour les non professionnels, XnConvert vous permettra de convertir par lot l’ensemble de vos prises de vue. Disponible sous Windows et Mac, la licence est de 15 € pour les entreprises.
- Si vous utilisez GIMP, vous pouvez lui ajouter le plug-in GIMP WebP Import Export, pensez à spécifier le facteur de qualité de 0 à 100 avant de sauvegarder votre image en WebP. Toutefois, gardez en tête que plus le chiffre choisi est élevé, plus le fichier sera volumineux.
- Vous possédez le logiciel de retouche Photoshop ? Adobe Photoshop WebP plug-in vous permettra d’ouvrir et d’enregistrer les images Webp dans le format de compression suggéré par Google soit 24 bits. Il est compatible avec Windows et Mac OS 32 et 64 bits.
Si votre site est développé sous Shopify, vous trouverez de nombreux outils pour générer vos images en WebP. Avec Mac, vous pouvez télécharger l’extension Webp Converter.
Néanmoins, si votre site est réalisé sous Magento ou WordPress, il vous faudra, pour le moment, ajouter une extension.
Les extensions Magento pour vos images en WebP
Lorsque vous possédez un e-commerce, l’illustration de vos produits est intimement liée aux images. L’utilisation d’images haute résolution peut vous apparaître judicieuse, mais elles alourdissent le chargement de vos pages par leurs nombreux pixels.
Afin de conserver au maximum les caractéristiques visuelles de votre produit, il sera pertinent de choisir une compression sans perte avec les extensions WebP Image Support ou WebP Optimized Images respectivement à 79, 00 $ ou 99,00 $.
Des plug-ins WebP pour votre site web WordPress
De nombreuses extensions sont disponibles en version gratuite et vous permettront d’alléger vos images et d’accélérer la vitesse de chargement de votre site WordPress :
- Imagify développé par la team WP-Rocket le permet dans sa version gratuite au quota mensuel de 25 MO.
- WebP Express plug-in fournira les images en WebP aux navigateurs qui le prennent en charge avec sa solution « WebP on Demand ». Gratuit, vous pouvez toutefois offrir un café à son auteur pour qu’il continue de développer son outil.
- Si vous possédez l’extension JetPack, utilisez la fonction Site Accelerator pour convertir vos images aux formats classiques en format WebP.
Si vous possédez un CDN, la fonction Polish de Cloudfare convertira automatiquement vos images en WebP.
Arrêtez de compresser, et décompressez avec le format WebP !
La compression lossy ou lossless de WebP permet d’obtenir des images légères sans sacrifier à leur qualité. Choisir le format WebP est un signal positif pour développer votre référencement naturel et offrir les meilleures performances Web à vos utilisateurs, il serait dommage de ne pas l’utiliser.
De WebP à un autre format utilisable sur le web : png, gif, jpeg
Si vous avez téléchargé une image dans le format webp et que vous souhaitez l’intégrer dans votre site internet ou dans une publication pour vos réseaux sociaux, il va vous falloir ouvrir, puis convertir cette image Webp en gif, png ou jpg.
Si vous hésitez entre ces différents formats, retrouvez ici mon article “Quelles différences entre les formats d’image JPEG, PNG, GIF et BMP et quand les utiliser ?”.
Comment ouvrir un fichier ou une image WebP ?
De nombreux logiciels permettent d’ouvrir un fichier WebP : Photoshop, Gimp, mais aussi Paint avec Windows 10 et les versions antérieures si vous n’avez pas de logiciel graphique. Le macOS d’Apple vous permet d’ouvrir une image Webp en passant par l’aperçu, puis en exportant dans le format que vous souhaitez.
Comment convertir un fichier webp en jpg ?
Vous pouvez convertir vos images WebP en jpg en passant par les logiciels indiqués ci-dessus et qui vous permettent d’ouvrir votre fichier.
Vous pouvez aussi passer par des convertisseurs en ligne.
Comment convertir une image webp en gif ?
Le plus simple sera pour vous de passer par un convertisseur en ligne.
Convertisseur webp en ligne
Personnellement, j’utilise ce site qui permet de convertir dans de nombreux formats : https://convertio.co/fr/webp-jpg/. Il est gratuit et sans pub (au moment de la publication de cet article).
Autres articles qui pourraient vous plaire
Optimisez l’apparence de votre blog WordPress en redimensionnant vos images mises en avant
Lorsque vous créez votre page et vos articles, vous remarquez que sur la page qui présente vos articles, vos images mises en avant ne sont pas toutes de la même dimension. Certaines images mises en avant peuvent être plus grandes ou plus petites que les autres, ce qui affecte l’esthétique globale de votre site. Suivez mes conseils pour harmoniser la dimension de vos images et rendre votre page encore plus attrayante.
Quelles sont les différentes étapes à suivre pour mettre à jour la version PHP chez votre hébergeur OVH ?
Le tableau de bord de votre WordPress vous indique que vous devez effectuer la mise à jour de PHP car vous êtes sur une ancienne version. Vous ne savez pas comment faire et quel risque pour votre site internet. Suivez le pas à pas très simple qui va vous permettre de mettre à jour en toute sécurité les fichiers php de votre hébergement web, que vous ayez un site WordPress ou sur un autre CMS.
Comment travailler et optimiser le référencement local de votre site Web ?
Partie prenante du SEO, le référencement local reste un atout pour votre boutique ou vos services de proximité. S’appuyer sur la création ou la revendication de votre fiche d’établissement Google est un premier pas dans l’attractivité de votre enseigne. Cependant, le moteur se fonde également sur votre e-boutique pour vous positionner dans son Google Pack Local.
Bonjour
Merci pour cet article portant sur le format WebP. Mes clients ne savent pas trop de quoi il s’agit quand je leur mentionne ce format. Votre article va les éclairer.
Merci
Nicolas
Merci pour votre commentaire. N’hésitez pas à revenir vers moi si vous avez des questions.
Bonjour, merci pour cet article mais j’ai une préoccupation svp.
Actuellement j’utilise Elementor et je voudrais pouvoir associer les vidéos et images sur le background de mon landing page mais je n’ai pas la bonne extension car actuellement je peux soit fonctionner avec les images ou alors des vidéos mais je suis a la recherche d’une extension associant les deux.
Et pour le moment je suis en version gratuite d’Elementor.
Que me conseillez vous SVP?
Merci 🙂
Bonjour, merci pour votre commentaire.
Désolée, mais jee ne comprends pas bien ce que vous souhaitez faire. Vous me dites que vous souhaitez associer des vidéos et des images sur le background de votre page.
Associer une vidéo en background me paraît avoir peu d’intérêt, puisque vous avez par dessus du texte et des images probablement.
Pouvez-vous me décrire concrètement ce que vous souhaitez en background ? Et si vous avez un exemple d’une page d’un site avec cette présentation ?
Je peux pas presenter d’exemples mais je voudrais pouvoir associer les vidéos de presentation en 3D d’un produit et les images egalement sur le background de mon landing page mais je n’ai pas la bonne extension.
Je ne sais deja pas si c’est possible.
Mercii!
Qu’entendez-vous par associer ?
Que souhaitez-vous concrètement en background ? Vidéo ou image ?
Merci pour toutes ces explications je pensais pas que le webp avait déjà 10 ans.
Je me suis fait un outil en ligne pour transformer directement mes images en webp sans me prendre la tête à savoir si c´était du jpg ou du png ou autre.
Je vous le partage si ça vous intéresse.
Bonjour,
Certains formats ont parfois du mal à se faire une place dans nos utilisations.
J’ai vu que vous êtes développeur et je trouve intéressant le partage d’informations entre nous.
Je vous laisse donc la possibilité de mettre le lien vers l’outil que vous avez créé, même si, de base, il n’est pas possible d’intégrer une image webp sous WordPress.
J’apprécierai en retour un lien vers mon article.
Merci Cécile,
Il est vrai que la prise en compte du format webp c´est faite tardivement dans wordpress. Mais elle est enfin disponible et c´est une très bonne chose même si ça a pris presque 10 ans…
Merci en tout cas pour le partage et pour ton site qui est vraiment super.
Merci pour ce commentaire ! Cela m’a permis de me rendre compte que je n’avais pas mentionné qu’il était désormais possible de téléverser directement des images en format webp. Toutefois, les extensions peuvent être toujours utiles pour transformer de manière automatique des images d’un autre format en webp. Au plaisir d’échanger et d’apporter de la clarté dans des notions qui peuvent paraître parfois obscure.