Fournir des Formats d'Image Optimisés

L'objectif est d'optimiser le poids des composants de type image, qui sont souvent les plus lourds sur une page, afin de réduire la consommation globale du service.

Objectif : Réduire le poids sans dégrader la qualité

Pour limiter l'impact des images sur un service, il est crucial d'utiliser les formats modernes AVIF et WebP.

Ceux-ci sont beaucoup plus légers que les formats historiques (JPG, PNG) pour une qualité d'image équivalente ou supérieure.

Des outils de conversion (comme Convertio ou Squoosh) permettent de modifier les formats facilement.

Exemple de Gain

Image au format JPG

(Créé en 1992)

165 ko

Image au format AVIF

(Créé en 2021)

20,7 ko

87,5 %

du poids de l'image

Comment faire ?

UI Designers : Exporter si possible les images dans ces formats ou le spécifier aux intégrateurs.
Intégrateurs : Utiliser la balise <picture> en HTML pour proposer plusieurs formats. Le navigateur choisira le format le plus moderne qu'il supporte (AVIF, puis WebP, puis JPG en dernier recours).

<picture>
    <!-- Le navigateur essaie d'abord de charger l'AVIF -->
    <source srcset="image.avif" type="image/avif">
    <!-- S'il ne peut pas, il essaie le WebP -->
    <source srcset="image.webp" type="image/webp">
    <!-- En dernier recours, il charge le JPG -->
    <img src="image.jpg" alt="...">
</picture>