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 est vraiment le meilleur format d’image pour le web en 2023 ? Je t’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 connais-tu leurs 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.
Tu l’auras compris, des formats différents mais tout aussi intéressants…
2. Quels formats d'image pour le 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 ton référencement car c’est l’un des principaux critères d’évaluation de Google*
- Pour l’UX (Expérience utilisateur) at te permettre de te démarquer de tes concurrents.
Tu vois où je veux en venir ?
Un moyen de marquer facilement des points (ou de ne pas en perdre) avec ton 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 toi et ton site.
* Petit rappel, Google rafle plus de 92% des parts de marché des moteurs de recherche en 2023 (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. Pagespeed, 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 tu souhaites connaître les navigateurs utilisés par tes visiteurs, tu trouveras le détail sur ta console d’analyse statistique.
4. Comment utiliser le format d'image Webp sur ton site web ?
Tu l’auras compris, le format Webp est plus léger, plus performant, mais comment l’utiliser sur ton site web déjà en place ?
Il existe deux possibilités :
1. Convertir toi-même tous tes fichiers et les uploader sur ton site
2. Utiliser une extension WordPress.
Si ton site est récent, je te recommande de convertir tes images avant de les uploader avec Shortpixel ou Bulkresize. Tous les deux sont gratuits, extrêmement performants et rapides.
Si ton site est assez ancien et/ou avec beaucoup de visuels, la deuxième solution sera moins fastidieuse, Imagify et Smush Pro sont de bonnes options (payantes).
Avantage, ils servent des fichiers au format supporté par le navigateur, ce qui supprime les problèmes de compatibilité.
Inconvénient de taille, ils créent des versions WebP de chaque format d’image par défaut de WordPress (thumbnail, medium, medium-large, large…) si tu ne les as pas supprimés initialement. Chaque image se trouve donc multipliée par 6 tailles, puis par 2 formats, ce qui n’est plus du tout économe en espace de stockage…
4. WebP est-il le meilleur format d'image pour le web en 2023 ?
Avec plus de 1.9 milliards de sites en 2023, la performance doit être l’une de tes priorités (avec la qualité). Léger, polyvalent et performant, le format WebP est de très loin le meilleur format d’image pour ton site.
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 !
Et si tu souhaites confier la création ou la refonte de ton site à une experte WordPress, c’est par ici !
