Bonne pratique
Les images représentent souvent la majorité des octets téléchargés, après les vidéos et juste avant les bibliothèques CSS et JavaScript. Leur optimisation est donc cruciale pour réduire la bande passante consommée. La première étape consiste à choisir le format idéal à vos besoins d'affichage.
Les images matricielles doivent être réservées essentiellement aux photos et aux éléments de l’interface qui ne peuvent pas être pris en charge par des icônes ou des styles CSS.
Le choix du format dépend des caractéristiques de l’image : noir et blanc ou couleur, palette de couleurs,
besoin de transparence… Parmi ces caractéristiques, le fait de pouvoir dégrader l’image définitivement (lossy) oriente
plutôt vers les formats JPEG, JPEG XL, AVIF ou WebP, tandis qu’un besoin de transparence et/ou l’impossibilité de dégrader
l’image (lossless) orientera plutôt vers un format PNG ou WebP lossless (qui supporte la transparence).
Le poids des images est beaucoup impacté par le format que vous allez choisir : en moyenne, une image .webp sera 30% plus légère
qu'une image .jpeg ou qu'une image .png. Une image .avif sera jusqu'à 20% plus légère qu'une image .webp et 50% plus légère
qu'une image .jepg.
N'oubliez pas de faire attention à la prise en charge de ces formats d'image sur les navigateurs. Une image .webp
ne sera pas reconnue par un navigateur ancien, et ne s'affichera pas. Pour pallier cette problématique, il est possible de
fournir au navigateur plusieurs formats pour la même image.
Certains modules coté serveur (comme le modPageSpeed de google, disponible pour Apache et NGINX)
permettent même de fournir l'image idéale en rapport au navigateur appelant le serveur.
De nombreux outils vous aideront à réduire au minimum le poids des images :
Le "Référentiel d'écoconception web (REW)" est publié par GreenIT.fr dans le cadre des travaux du Collectif conception numérique responsable selon les termes de la licence Creative Commons Attribution.
Le composant Image de Next.js permet de choisir dynamiquement le meilleur format d'image en fonction des caractéristiques de l'image et des besoins d'affichage. Il prend en charge JPEG, WebP, AVIF, et d'autres formats, optimisant ainsi la bande passante consommée.
Des formats optimisés comme WebP ou AVIF sont préférables, mais ils ne sont pas toujours compatibles avec tous les navigateurs. Le composant Image de Next.js gère automatiquement ces cas en fournissant plusieurs formats, garantissant ainsi une expérience utilisateur cohérente et efficiente.
Règle de validation
Le nombre d'images non optimisées doit être inférieur ou égal à 0
Ressources économisées