Sur le web comme ailleurs, l’image est très importante. Elle permet de véhiculer une ambiance, communiquer sur des valeurs, appuyer des propos…
Mais si avoir un site à la fois agréable et impactant est important, les aspects techniques ne doivent pas être négligés.
Alors parmi tous les formats d’image existants, lequel choisir ? Est ce que le format WebP à vraiment un intérêt pour votre site web ? Je vous explique tout ça !
1. Les différents formats d'image
Au cours des dernières décennies, de nombreux format graphiques ont vu le jour : JPEG (ou JPG), PNG, GIF, TIF, PSD, EPS, AI, INDD, SVG… Il peut être difficile de s’y retrouver.
Certains sont des formats “natifs”, comme .psd pour Photoshop, .ai pour Illustrator et .xcf pour Gimp. Mises en page, créations, retouches, tracés vectoriels… Ils sont surtout destinés aux professionnels du graphisme, même si, sous une licence GNU GPL, Gimp permet notamment, comme Photoshop, de travailler avec des calques qui se superposent les uns aux autres, peuvent être déplacés, masqués, etc.
D’autres sont plus connus du grand public. C’est notamment le cas du JPEG, du GIF, du SVG et, plus récemment, du PNG. Mais connaissez-vous particularités ?
Le JPEG est une norme d’enregistrement et un algorithme de codage développé à la fin des années 70, permettant de compresser une image numérique. Internationale, gratuite et accessible à tous, elle a été adoptée en 1992.
Le GIF, quant à lui, a été mis au point à la fin des années 80. Sa particularité est de permettre l’enregistrement de plusieurs images sous forme d’animation. Si il intègre la transparence, ses couleurs sont elles limitées à 256…
Le PNG a été créé en 1996 pour contourner la licence existante sur le format GIF. Avec 16 millions de couleurs, une variation des degrés de transparence, et un algorithme de compression plus élaboré, il a même fait l’objet d’une Recommandation W3C en 2016.
Enfin, le SVG est un langage de balisage XML décrivant des images vectorielles bidimensionnelles. C’est également une norme développée par le W3C depuis 1999.
Vous l’aurez compris, des formats différents mais tout aussi intéressants…
2. Les formats d'image pour un site web
Pour faire simple, 3 formats sont majoritairement utilisés pour les sites web :
- JPEG pour les photos en raison de son fort taux de compression
- PNG pour les visuels en aplats et/ou avec transparence
- SVG pour les images vectorielles, comme les icônes
En dehors des animation du type giphy.com, le GIF est peu utilisé sur le web.
Mais le développement de la navigation sur mobile et du responsive à clairement changé la donne. Car aujourd’hui, les images représentent jusqu’à 60% du poids des pages web. Et le temps de chargement d’une page ne peut plus être négligé :
- Pour votre référencement car c’est l’un des principaux critères d’évaluation de Google* en matière référencement
- Pour l’UX (Expérience utilisateur) peut vous aider à vous démarquer de vos concurrents auprès de vos visiteurs.
Vous voyez où je veux en venir ?
Un moyen de marquer facilement des points (ou de ne pas en perdre) avec votre site web, c’est d’avoir une vitesse de chargement la plus réduite possible. Concilier qualité et optimisation.
Et c’est là que le format WebP devient très intéressant pour vous et votre site.
* Petit rappel, Google rafle plus de 92% des parts de marché des moteurs de recherche en août 2021 (Données Statcounter.com)
3. C'est quoi le format d'image Webp ?
Le WebP, est un format d’image Open source développé par Google (encore lui).
Sa compression sans perte utilise des fragments d’image déjà vus pour reconstruire les nouveaux pixels. Et si aucune correspondance n’est trouvée, il utilise une palette locale. Donc, à qualité équivalente, le poids d’une image WebP est au moins 26% plus léger que les fichiers .png de 25 à 34% inférieur au format JPEG.
Concrètement, ce gain de poids peut vraiment améliorer le temps de chargement des pages web qui l’utilisent. Et leur référencement.
Google est d’ailleurs assez explicite sur ce point dans ses outils d’analyse. Lighthouse, qui permet de tester plusieurs aspects d’un site web, dont la performance, recommande d’utiliser les formats WebP ou AVIF à la place des PNG ou JPEG.
Pour la petite histoire, la première version du format Webp date de 2010… Si il date de 2010, pourquoi n’est-il pas déjà plus utilisé ?
Tout simplement parce que certains navigateurs ont mis du temps à prendre en charge ce format, notamment Edge (2018), Firefox (2019) et surtout Safari (2020).
Oui, Safari qui est le deuxième navigateur le plus utilisé dans le monde ne l’intègre nativement que depuis septembre 2020.
Attention toutefois, il est possible que sur certaines rares et anciennes versions de navigateurs, l’affichage ne soit pas pris en compte. Des informations détaillées sur les navigateurs qui supportent le format WebP sont disponibles sur le site Can I Use.
Et si vous souhaitez connaître les navigateurs utilisés par vos visiteurs, vous trouverez le détail sur votre console Google Analytics.
4. Comment utiliser le format d'image Webp sur votre site web ?
Vous l’aurez compris, le format Webp est plus léger, plus performant, mais comment l’utiliser sur votre site web déjà en place ?
Il existe deux possibilités :
1. Convertir vous-même tous vos fichiers (en ligne ou grâce à des extensions de Chrome, par exemple) et les uploader sur votre site
2. Utiliser une extension WordPress.
Que votre site soit assez récent ou non, je ne peux que vous conseiller la deuxième méthode, beaucoup moins fastidieuse et plus secure. Mon extension préférée pour la gestion des médias avec WordPress est Imagify mais Smush Pro est une bonne alternative.
Imagify propose une offre gratuite pour convertir jusqu’à 20Mo d’images par mois. Et si vous doutez encore du format WebP, il permet également de conserver une copie des fichiers JPEG et PNG existants afin de les servir aux navigateurs ne supportant pas WebP.
4. Conclusion
Avec près de 1.8 milliards de sites en 2021, la performance doit être l’une de vos priorités. Léger, polyvalent et performant, le format WebP est actuellement le meilleur format d’image pour votre site web.
Et si d’autres formats sont aujourd’hui en cours de développement (JPEG XL) ou déjà déployés comme le HEIC (iOS) ou l’AVIF (Chrome et Firefox uniquement), le WebP a encore de beaux jours devant lui !
Si vous avez des doutes ou des questions sur la mise en place du format WebP sur votre site web, vous pouvez me contacter ici.
