Quelle importance dans la page web ?
Les images sont le type de ressources le plus utilisé sur le web d’après le rapport des archives (Report: State of Images).
Le poids d’une page moyenne sur desktop était de 2174 Ko sur l’échantillon testé en janvier 2022, et le poids moyen des images transférées pour une page était de 958 Ko.
Les images représentent ainsi en moyenne 44% du poids d’une page web en 2022 !
OPTIMISER LES IMAGES
Choisir le bon format
Sur une page web éco-conçu, on ne s’interdit pas de mettre des visuels, mais il est essentiel de les optimiser.
Il s’agit alors de choisir le bon format d’image, la bonne dimension (finie l’image en 4K redimensionnée automatiquement en 500px) et surtout de réduire son poids en la compressant le plus possible sans réduire sa qualité afin d’optimiser la vitesse de chargement de votre site web.
FORMAT D’IMAGE WEB
Qu’est-ce que le format Webp?
Créé par Google en 2010, WebP est un format d’image qui vise à remplacer JPEG, PNG, GIF,…
Le format webp traite plusieurs types d’images, en réduisant la taille et avec une qualité comparable à l’orignal.
Au total, environ 95 % des utilisateurs d’Internet utilisent un navigateur qui prend en charge WebP.
Ces 5 % sont un obstacle mineur, surtout quand il s’agit d’utilisateurs de Safari sur d’anciennes versions de macOS. .
Autre obstacle, le plus célèbre des CMS, WordPress, ne permet toujours pas de charger ce type d’image par défaut. Il faut obligatoirement passer par une extension pour profiter du format Webp.
Comparaison des différents poids
A qualité égale, un poids réduit de 26 % par rapport à PNG ; et de -25 à -34 % par rapport à JPG
FORMAT WEBP
Compression avec ou sans perte
Le format Webp permet de compresser vos images avec perte ou sans perte.
Compression avec perte
vous obtenez une image la plus légère possible.
Mais elle ne vous permet pas de garder une qualité similaire à l’originale.
Compression sans perte
vous réduisez considérablement le poids de l’image, tout en conservant les propriétés similaire à l’originale comme :
- le nombre de couleurs et leur restitution,
- la définition,
- l’animation et le fond transparent.
En plus de la compression, ce nouveau format d’image prend en charge les images animées (ex. gif) et la transparence (ex. png).
