Bien souvent, quand on souhaite mettre des images sur son site internet, on fait appel aux formats classiques. Que ce soit JPEG pour des images standard ou bien PNG pour des images gérant la transparence. Or ces formats sont un peu vieillots : JPEG date de 1991 et PNG de 1996.

La technologie évolue, et les formats d’images avec : focus sur les nouveaux formats d’images web.

Intérêt des formats d’images web nouvelle génération

Aujourd’hui, les moteurs de recherche tels que Google privilégient les sites qui chargent rapidement. En d’autres termes plus votre site aura un temps de chargement rapide, plus il aura de chance de se classer devant ses concurrents dans les résultats de recherches.

Il faut également savoir que les images constituent une grande part du poids d’une page web (~65%).

C’est donc pourquoi il est intéressant de se pencher sur ces nouveaux formats d’images : car ils sont conçus pour le web d’aujourd’hui. En effet, ils permettent une plus grande compression des images et améliorent donc le temps de chargement des sites internet.

De plus, force est de constater que plus votre site internet chargera rapidement, plus l’expérience utilisateur sera bonne. En effet, on estime que les sites qui mettent plus de 3 secondes à charger perdent près de la moitié de leurs utilisateurs.

Les bénéfices de ces nouveaux formats d’images sont donc multiples :

• Meilleur référencement,
• Amélioration de l’expérience utilisateur,
• Site web plus performant.

Quelques formats d’images web nouvelle génération

Intéressons-nous donc aux 3 formats principaux en 2024 que sont SVG, WebP et AVIF. Mais pour commencer voici une illustration de test qui va nous servir d’exemple tout au long de notre présentation :

Format PNG – Taille 47ko

SVG (Scalable Vector Graphic)

• Créé par un groupe de sociétés au sein du W3C,
• Format vectoriel, idéal pour les illustrations 2D, les formes et  la cartographie,
• Aucune perte de qualité,
• Interactif (se présente sous la forme de code et donc accessible et modifiable en CSS/ JS).

Format SVG – Taille 43ko

Le fichier fait presque le même poids que le PNG car l’illustration commence à être complexe avec beaucoup d’éléments. En revanche elle comporte deux atouts

1. Il est possible de l’agrandir à l’infini sans perte de qualité,
2. Il est possible d’interagir avec l’image (cliquez sur l’image puis essayez de survoler le bouton rouge avec votre souris)

WebP

• Créé par Google,
• Il prend en charge la transparence,
• Son gain de compression moyen est de 40% par rapport à l’image originale optimisée au format jpeg ou png.

Format WebP – Taille 23ko

Le fichier est ici 50% plus léger que le PNG à qualité équivalente

AVIF

• Développé par le consortium Alliance for Open Media,
• Il prend également en charge la transparence ainsi qu’une très large gamme de couleurs,
• Son gain de compression moyen est de 50% par rapport à une image déjà optimisée au format WebP.

Format AVIF – Taille 9ko

Le fichier est ici 60% plus léger que le format WebP et 80% plus léger que le format PNG 🤯

Comment générer ces nouveaux formats d’images ?

Le format SVG est en principe généré à partir d’applications de PAO spécialisées dans le vectoriel comme Illustrator par exemple.

Il est également possible d’exporter ses images directement en WebP depuis la plupart des logiciels de PAO (Photoshop, Illustrator…). Quand au format AVIF, c’est plus compliqué. Il faut utiliser des convertisseurs en ligne ou bien des plug-ins tiers afin de pouvoir exporter avec ce format depuis votre application favorite.

Mais le plus simple reste encore d’utiliser une extension qui s’occupera de faire les conversions vers ces nouveaux formats à votre place.

Attention à bien penser aux problèmes de compatibilité avec les vieux navigateurs : https://developers.google.com/speed/webp/faq

Vous voilà désormais incollables sur les nouveaux formats d’images web. Vous allez pouvoir booster la vitesse de votre site à celle de la lumière 😉