1. Classer l’image avant de l’optimiser
Inventoriez les images par modèle de page. Enregistrez le rôle de chaque image, ses largeurs rendues maximale et minimale, son statut par rapport au viewport initial, et si les petits écrans nécessitent un autre recadrage. Cela transforme le travail de réduction de taille en décisions testables sur les pages importantes.
Les photos tolèrent souvent une compression lossy après revue. Les logos, symboles d’interface, dessins vectoriels et graphiques peuvent convenir au SVG ou à un format raster qui préserve les arêtes nettes. SVG convient au dessin linéaire, aux diagrammes et aux graphiques, pas aux photos détaillées.
Conservez le détail essentiel et fournissez un texte qui transmet la finalité de l’image.
Utilisez un texte alternatif vide (alt=""); ne la faites pas servir de seule source d’information importante.
Nommez l’action ou la destination, pas seulement les pixels de l’image.
2. Dimensionner pour l’emplacement rendu, puis proposer des candidats responsives
Adaptez les dimensions intrinsèques au slot CSS. Un fichier à l’échelle desktop dans une carte étroite gaspille des octets ; un raster trop petit étiré devient flou. Tenez compte du device pixel ratio, mais validez visuellement plutôt que de supposer que chaque écran nécessite le candidat le plus grand.
Pour une composition unique à plusieurs largeurs, utilisez srcset avec des descripteurs de largeur (width descriptors) et sizes pour indiquer la largeur réelle du slot. Le navigateur choisira alors un candidat. Utilisez picture pour l’art direction : un recadrage mobile qui préserve le sujet est différent d’une simple réduction de l’image desktop. Conservez un fallback img avec src et alt à l’intérieur de picture.
Même composition, différentes dimensions en pixels.
Recadrage ou composition différente quand le redimensionnement masque le message.
Conservez src sur img pour les clients qui n’utilisent pas les attributs responsives.
3. Choisir format et compression selon les caractéristiques de l’image
WebP et AVIF peuvent réduire le transfert raster dans les cas appropriés, mais le format n’est pas une garantie de qualité. Testez des visages représentatifs, des textures fines, des dégradés de marque, du texte intégré et la transparence. JPEG reste un fallback courant pour les photos ; PNG peut convenir au détail raster sans perte ou à la transparence. Vérifiez le support AVIF et l’adéquation opérationnelle pour votre audience et votre chaîne de livraison.
La compression lossy supprime de l’information pour économiser des octets et est généralement plus tolérante sur les photos détaillées que sur les lignes nettes ou le texte. La compression lossless préserve les pixels codés mais peut économiser moins. Choisissez la qualité par revue côte à côte à la taille rendue, pas uniquement via un réglage numérique. Supprimez les métadonnées seulement après avoir confirmé l’orientation, la couleur et les besoins du workflow.
Comparez AVIF lossy, WebP et un fallback JPEG à la taille d’affichage.
Privilégiez le SVG adapté ou protégez les arêtes nettes des rasters via des tests.
Confirmez l’apparence de l’alpha dans chaque format livré et son fallback.
4. Faire du balisage qui protège la vitesse et la stabilité du layout
Donnez à chaque img de contenu des attributs width et height correspondant à son ratio d’aspect intrinsèque. Le navigateur peut réserver l’espace avant l’arrivée du fichier, ce qui réduit les mouvements de mise en page. Le CSS peut toujours définir les dimensions affichées.
N’utilisez loading=lazy que pour l’extérieur du viewport initial. Ne mettez pas en lazy-loading une image susceptible d’être visible au chargement, en particulier une candidate LCP. LCP (Largest Contentful Paint) est le temps de rendu du plus grand élément image, bloc de texte ou vidéo visible dans le viewport. fetchpriority=high n’est qu’un indice relatif ; appliquez-le avec parcimonie et mesurez le résultat. Utilisez le balisage d’image HTML pour le contenu qui a besoin d’un texte alternatif ou d’être découvert ; Google indique qu’il n’indexe pas les images mises en CSS.
Définissez width et height, y compris pour les images de galerie en lazy-load.
Gardez les images probables de LCP eager et inspectez la priorité des requêtes.
Lazy-load les images hors écran et testez le défilement sur un réseau contraint.
5. Préserver le sens, la découverte et la qualité visuelle
Le texte alternatif dépend de l’objectif et du contexte. Décrivez l’information essentielle pour une image informative, utilisez alt="" pour la décoration, et indiquez la fonction d’une image liée ou dans un bouton. Pour un graphique ou diagramme complexe, fournissez une explication équivalente dans le texte proche. N’utilisez pas de listes de mots-clés.
Pour les images découvrables, utilisez des éléments HTML standard, un texte proche pertinent, des noms de fichiers descriptifs courts quand c’est possible, et un src de secours avec un balisage responsive. Ne transformez pas des arrière-plans décoratifs en contenu redondant uniquement pour la découverte.
Vérifiez les fichiers compressés aux tailles les plus grandes et petites prévues.
Privilégiez le texte réel ; sinon fournissez l’équivalent textuel.
Placez les images informatives près du texte de page pertinent.
6. Vérifier la page, pas seulement l’actif
Testez des pages représentatives aux viewports étroits et larges. Dans les outils dev du navigateur, inspectez le candidat choisi dans srcset, la taille transférée, les dimensions rendues et les mouvements de mise en page. Limitez la vitesse réseau pour révéler les images hero tardives et les galeries lentes. Une comparaison d’export ne peut pas dévoiler une valeur sizes incorrecte, un recadrage inattendu, ou un problème de transformation en production.
Utilisez signaux de lab et de terrain quand disponibles. Lighthouse et PageSpeed Insights peuvent identifier des images mal dimensionnées ; le LCP en champ reflète les visites réelles dans le temps. Comparez le même template, la même classe d’appareil, la même version de release et la même fenêtre de mesure. Ne créditez pas les images pour un changement de métrique quand le temps serveur, des scripts, des polices ou des tiers ont aussi changé. Mettez en scène les changements de templates partagés et conservez une voie de rollback jusqu’à validation.
Confirmez que le slot ne sélectionne pas un candidat surdimensionné de manière inattendue.
Vérifiez le recadrage, la netteté, la couleur, les alternatives et la stabilité du layout.
Nommez le responsable, le signal attendu et le chemin de retour.