Images web : choisir le format, la taille et le chargement

Accessibilité et performance web · 6 min de lecture

Pour l’optimisation des images web, prenez trois décisions séparées : le format adapté au contenu, les dimensions nécessaires à l’affichage et le moment du chargement. Une photo de produit, un logo et une image située en bas de page n’ont pas les mêmes besoins. Conservez les originaux, comparez les exports à leur taille réelle d’utilisation et vérifiez le fichier effectivement téléchargé par le navigateur.

À retenir

• Le format, les dimensions et le poids sont trois caractéristiques différentes.
• Préparez les images selon leur usage, pas selon une taille unique.
• Ne retardez pas l’image qui constitue le contenu principal au chargement.
• Un fichier plus léger reste à contrôler visuellement et dans la page.

Choisir le format selon le contenu

Le guide des formats de MDN distingue leurs usages. WebP et AVIF permettent une compression adaptée aux images web, avec notamment la prise en charge de la transparence. JPEG reste une option pour la photographie. PNG utilise une compression sans perte ; SVG décrit des formes vectorielles, adaptées aux logos, icônes ou schémas.

Photographies et détails produits

Comparez des exports WebP, AVIF ou JPEG à qualité visuelle acceptable. Examinez les zones difficiles : texture, contours, petits caractères, dégradés et couleur du produit. Le réglage de qualité n’est pas directement comparable entre formats ou outils. Le choix doit venir de l’image exportée, pas uniquement d’une valeur dans le logiciel.

Logos, schémas et transparence

Pour un logo dont vous possédez une source vectorielle, privilégiez un export SVG adapté. Renommer une photographie en SVG ne la transforme pas en dessin vectoriel. Pour une capture ou un graphique matriciel, composé de pixels, dont la précision compte, comparez des exports sans perte. La transparence seule n’impose pas le PNG : WebP et AVIF peuvent aussi la conserver.

Si vous proposez plusieurs formats, le composant doit prévoir une solution de repli compatible avec les navigateurs visés. Contrôlez également la prise en charge par votre outil de gestion de contenu et par le traitement des images.

Adapter les dimensions à l’emplacement

Les dimensions correspondent aux pixels de l’image ; le poids correspond aux données du fichier. Une image comprimée peut rester surdimensionnée. Inversement, une petite image peut manquer de détail dans un zoom produit. Commencez par distinguer vignette de grille, visuel principal et vue agrandie, puis relevez leurs tailles d’affichage.

Le navigateur peut choisir parmi plusieurs variantes grâce à srcset. L’attribut sizes décrit l’espace d’affichage prévu quand les variantes sont indiquées par leur largeur. La densité de l’écran intervient aussi dans ce choix. Le guide MDN des images adaptatives explique cette sélection. Ces attributs ne créent pas les fichiers : votre système doit produire et servir les variantes correspondantes.

Ne pas confondre résolution et recadrage

Plusieurs résolutions peuvent montrer la même composition. Un recadrage mobile change, lui, le contenu visible. L’élément picture permet notamment de proposer des compositions différentes. Pour une boutique, vérifiez qu’aucun recadrage ne retire une information utile sur le produit. Gardez une vue détaillée distincte lorsque le visiteur doit examiner une matière ou un assemblage.

Charger les images au bon moment

Le chargement différé, avec loading="lazy", laisse le navigateur attendre qu’une image approche de la zone visible. Il convient aux visuels non critiques situés plus bas dans la page. La référence MDN de l’élément img décrit ce fonctionnement : le déclenchement dépend du navigateur, pas d’une distance universelle à imposer.

En revanche, n’appliquez pas le chargement différé à l’image identifiée comme élément LCP. Le guide web.dev d’optimisation du LCP avertit que cela retarde inutilement sa requête. Une priorité élevée via fetchpriority peut être envisagée pour l’image principale, mais la distribuer à toutes les images retire l’intérêt de la hiérarchisation.

Renseignez aussi width et height avec les dimensions intrinsèques et un ratio cohérent. Ces attributs permettent au navigateur de réserver l’espace avant le téléchargement, selon MDN. La mise en page peut toujours adapter la taille affichée. Vérifiez surtout que le ratio réservé correspond au visuel réellement présenté.

Exemple illustratif : une photo utilisée partout

Dans cet exemple fictif, une boutique de luminaires utilise le même original pour la grille, la fiche produit et le zoom. La correction commence par séparer les usages : variantes adaptées à la grille, image principale lisible et version détaillée pour l’agrandissement.

L’équipe compare les formats sur les contours et la texture du luminaire. Elle garde le visuel principal disponible dès le chargement, diffère les images complémentaires hors écran et réserve leur espace. Le contrôle porte ensuite sur les fichiers réellement demandés sur téléphone et ordinateur. Aucun poids cible ni gain de vitesse n’est supposé.

Checklist opérationnelle

• Conserver les originaux hors des exports destinés à l’affichage courant.
• Inventorier chaque emplacement, sa taille et son besoin de détail.
• Comparer format, poids et qualité visuelle des exports.
• Produire les variantes nécessaires et vérifier srcset et sizes.
• Contrôler les recadrages et les solutions de repli.
• Réserver l’espace et choisir le chargement selon la position.
• Vérifier le fichier téléchargé, puis le zoom et le défilement.

Limites et erreurs fréquentes

Convertir tout le catalogue sans échantillon de contrôle peut dégrader les détails produits. Compresser davantage ne corrige pas un chargement déclenché trop tard. Une extension qui optimise les fichiers ne prouve pas que le navigateur reçoit la bonne variante. Enfin, un texte important ne devrait pas exister uniquement dans une image : gardez les informations essentielles accessibles dans le contenu de la page.

Questions fréquentes

Faut-il convertir toutes les images en AVIF ?

Non. Comparez les exports, la compatibilité requise et le fonctionnement de votre outil. Le format ne remplace ni des dimensions adaptées ni un chargement bien choisi.

Quel poids maximal faut-il imposer ?

Il n’existe pas de valeur unique pertinente pour une icône, une photo principale et un zoom détaillé. Fixez vos critères par emplacement, puis testez la page et la lisibilité.

Le texte alternatif sert-il à accélérer une image ?

Non. L’attribut alt fournit une alternative textuelle, notamment pour l’accessibilité, comme l’indique MDN. Décrivez l’information utile dans le contexte de la page ; ne remplissez pas cet attribut de mots-clés. Pour une image purement décorative qui ne transmet aucune information, utilisez une alternative vide, alt="", plutôt qu’une description inutile.

Prochaine étape

Choisissez une fiche produit et une grille. Pour leurs images, relevez emplacement, dimensions affichées, fichier téléchargé et mode de chargement. Validez ensuite un export et son intégration avant d’appliquer la méthode au reste du catalogue.

Sources et ressources

• MDN : guide des formats d’image.
• MDN : images adaptatives.
• MDN : élément img et attributs.
• web.dev : optimiser le LCP.