Image Size : Définition, Optimisation Web, Bonnes pratiques

Qu'est-ce que l'image size ?

« Image size » (taille d'image) recouvre trois notions différentes sur le web : les dimensions en pixels (par exemple 1920 x 1080), le poids du fichier en Ko ou Mo qui circule sur le réseau, et la taille d'affichage, c'est-à-dire la taille à laquelle l'image est dessinée dans la page en pixels CSS. Chacune peut être mauvaise isolément et se corrige différemment.

Une photo de 4000 x 3000 de 8 Mo affichée en miniature de 200 x 150 gaspille de la bande passante (le fichier entier est téléchargé) et du processeur (le navigateur la réduit). Une bonne optimisation d'images règle les trois.

Pourquoi la taille des images compte

Une image est souvent l'élément du Largest Contentful Paint, et selon web.dev un LCP de 2,5 secondes ou moins est jugé bon. L'absence de dimensions est une cause fréquente de décalage de mise en page.

Choisir le format

Selon web.dev, WebP et AVIF compressent généralement mieux que les formats plus anciens et sont à privilégier quand c'est possible. Proposez-les avec un repli JPEG via <picture>. La différence entre compression avec perte et sans perte fait l'objet d'une entrée dédiée.

Servir la bonne taille

Avec srcset et sizes, le navigateur choisit le candidat adapté à l'emplacement d'affichage et à la densité d'écran : un mobile ne télécharge pas le fichier de bureau. Renseignez toujours width et height : ils permettent au navigateur de réserver la place avant le chargement de l'image.

<picture>
  <source type="image/avif" srcset="hero-800.avif 800w, hero-1200.avif 1200w"
          sizes="(max-width: 600px) 100vw, 1200px">
  <source type="image/webp" srcset="hero-800.webp 800w, hero-1200.webp 1200w"
          sizes="(max-width: 600px) 100vw, 1200px">
  <img src="hero-1200.jpg" alt="Tableau de bord produit"
       width="1200" height="675" decoding="async">
</picture>

Repères de poids par usage

Ce sont des budgets de travail, pas des normes. Jugez-les à votre LCP mesuré, pas au chiffre.

Bonnes pratiques

• Redimensionnez à la plus grande taille réellement affichée et ne gardez une version 2x que là où les écrans l'exigent.
• Compressez : une qualité avec perte d'environ 75 à 85 se distingue souvent mal de l'original, mais vérifiez sur vos propres images.
• Utilisez loading="lazy" pour les images sous la ligne de flottaison, pas pour l'image du LCP. Le chargement différé retarde la requête.
• Donnez fetchpriority="high" à l'image du LCP et préchargez-la si le navigateur la découvre tard.
• Supprimez les métadonnées inutiles, comme l'EXIF.
• Servez depuis un CDN, idéalement un CDN qui convertit et redimensionne à la demande.

Erreurs fréquentes sur la taille des images

• Servir l'original de l'appareil photo à tous les appareils.
• Pas de srcset : les mobiles reçoivent les fichiers de bureau.
• PNG pour des photos : fichiers énormes sans gain visible.
• JPEG pour des logos ou tout ce qui exige de la transparence.
• Charger en différé l'image principale, ce qui retarde le LCP.
• Oublier width et height.

Mesurer le poids des images

Lighthouse signale les images surdimensionnées avec l'audit « Properly size images », qui fait échouer une image dont la taille affichée est inférieure d'au moins 4 KiB à la taille réelle. La surveillance de la vitesse des pages de LoadFocus exécute des audits Lighthouse planifiés depuis 25 régions cloud et suit les Core Web Vitals : une nouvelle image principale trop lourde apparaît comme une régression du LCP, pas comme une surprise. Pour des données réelles d'utilisateurs, essayez le vérificateur gratuit de Core Web Vitals. Pour aller plus loin : pourquoi améliorer les images de votre site et 10 étapes pour accélérer votre site.

Questions fréquentes : image size

Quel est le meilleur format d'image pour le web ?

Pour les photos, AVIF ou WebP avec repli JPEG. Pour les logos et icônes, SVG. PNG quand il faut du détail sans perte et que l'on accepte un fichier plus lourd.

Quel poids pour une image principale ?

Il n'y a pas de limite fixe. Moins d'environ 200 Ko est un budget de départ courant. Vérifiez-le sur votre LCP mesuré et ajustez.

Faut-il charger toutes les images en différé ?

Non. Seulement celles sous la ligne de flottaison. Chargez tout de suite l'image du LCP et envisagez fetchpriority="high" pour elle.

Quelle différence entre taille intrinsèque et taille d'affichage ?

La taille intrinsèque correspond aux dimensions réelles de l'image en pixels. La taille d'affichage est celle à laquelle elle est dessinée en pixels CSS. Le navigateur met à l'échelle, mais télécharge quand même l'image complète.

Pourquoi les photos en PNG sont-elles si lourdes ?

Le PNG est sans perte et conserve chaque pixel. Les photos présentent beaucoup de variations de couleur que la compression sans perte réduit peu, alors que JPEG, WebP et AVIF écartent des détails que l'œil remarque à peine.

Comment fonctionne srcset ?

Vous listez la même image à plusieurs largeurs. Le navigateur combine la largeur d'affichage de sizes avec la densité d'écran et télécharge le meilleur candidat.