Optimiser les images d’un site ne consiste pas à convertir toute la médiathèque dans un nouveau format. Il faut livrer des fichiers adaptés à leur emplacement, préserver leur lisibilité et vérifier ce que le visiteur reçoit réellement. Une photo légère mais mal recadrée, un logo entouré de blanc ou une capture illisible ne constituent pas une amélioration.
Ce guide porte sur la préparation et la livraison technique des images. Pour choisir les prises de vue, consultez le guide de photographie pour un site professionnel. Pour leur contexte et leur visibilité dans les recherches, consultez le guide du référencement des images.
1. Partir des emplacements, pas d’un poids universel
Listez les usages : photo principale, portrait, carte de réalisation, galerie produit, capture de logiciel ou logo. Relevez la place occupée sur ordinateur et sur mobile. Un visuel de galerie avec un zoom et une vignette de navigation n’ont pas le même besoin de détail.
Pour chaque emplacement, consignez le fichier original, le recadrage attendu, les variantes nécessaires et la personne qui valide le résultat. Gardez les originaux séparés des exports destinés au site. Ne remplacez pas toute la bibliothèque avant d’avoir testé une page représentative et prévu le retour à la version précédente.
2. Comparer les exports sur les détails utiles
Essayez plusieurs exports sur une même image, puis comparez leur poids et leur rendu à la taille d’utilisation. Examinez le visage d’un portrait, les contours d’un logo, les caractères d’une capture et les détails d’un produit. Le réglage retenu pour une photographie ne doit pas devenir automatiquement celui de toutes les captures.
Selon vos fichiers et votre chaîne de publication, comparez JPEG, PNG, WebP ou AVIF. Vérifiez que le format choisi est accepté à l’import et correctement affiché sur les navigateurs visés. Le choix repose sur les exports observés, pas sur un pourcentage de compression promis. Pour un logo détouré, contrôlez aussi le fond transparent sur les thèmes clair et sombre.
3. Adapter la taille sans déformer la composition
Préparez des variantes correspondant aux différents emplacements. Les attributs srcset et sizes permettent de proposer plusieurs fichiers au navigateur et de décrire la place prévue pour l’image. La balise picture peut servir à proposer un autre recadrage ou des formats alternatifs. Ces fonctions sont expliquées dans la documentation sur les images adaptatives de web.dev.
Le contrôle reste visuel : le sujet est-il visible sur téléphone, le texte d’une capture est-il lisible, le recadrage conserve-t-il l’information ? Vérifiez également les dimensions déclarées et l’espace réservé avant le chargement. Corrigez les variantes ou les règles d’affichage plutôt que d’agrandir artificiellement un original trop petit.
4. Régler le chargement à partir de la page réelle
Identifiez l’élément qui détermine le LCP, le moment où la plus grande image ou le plus grand bloc de texte visible est affiché. Ce n’est pas nécessairement la première photo ni le fichier le plus lourd. Le guide d’optimisation du LCP recommande de ne pas différer une image qui constitue cet élément et de mesurer les différentes causes du retard.
Réservez le chargement différé aux images non critiques. Une priorité élevée ou un préchargement doit répondre à un besoin constaté, pas être ajouté à chaque visuel. Rejouez les essais après modification : réduire un fichier ne résout pas un retard provoqué par un script qui masque le contenu.
5. Vérifier le fichier public, pas seulement l’export
Ouvrez la page et relevez l’adresse du fichier effectivement chargé. Contrôlez son affichage, ses dimensions et le type annoncé par le serveur. Renommer un fichier ne le convertit pas. La documentation MDN sur les types de médias explique le rôle de l’en-tête Content-Type pour interpréter la réponse.
Après un remplacement, vérifiez l’adresse habituelle du site et les caches concernés. Une prévisualisation correcte ne prouve pas que les visiteurs reçoivent la nouvelle version. Vérifiez aussi le texte alternatif selon la fonction du visuel : information, décoration ou lien. L’arbre de décision du W3C aide à choisir cette alternative, sans certifier à lui seul l’accessibilité de la page.
6. Remettre une fiche de contrôle exploitable
Exemple illustratif : pour une carte de réalisation, la fiche indique l’original conservé, les variantes exportées, le recadrage validé sur mobile, le fichier réellement reçu et les essais avant et après. Ce n’est pas un résultat client ni une mesure de performance.
Pour les mesures, consignez la page, l’appareil, les conditions de réseau, le nombre d’essais et les fichiers comparés. Séparez les tests en laboratoire des données de visiteurs réels. Aucun score, classement ou gain commercial n’est garanti par un changement de format.
Vous pouvez intégrer ce travail à une création ou reprise de site. Pour une intervention ciblée, présentez votre page et les images à vérifier : les fichiers concernés et les contrôles à réaliser seront précisés dans la mission.
