Image Size : Définition, Optimisation Web, Best Practices

Qu'est-ce que image size ?

"Image size" sur le web est un terme confus parce qu'il signifie trois choses différentes :

• Dimensions (intrinsic size) — width × height en pixels.
• Taille fichier (byte size) — combien de KB/MB.
• Taille display (rendered size) — quelle taille apparaît dans le viewport.

Chacune est indépendamment optimisable.

Pourquoi image size importe

Tailles fichier recommandées

Comparaison formats image

Images responsive

<picture>
  <source srcset="hero-800.avif 800w, hero-1200.avif 1200w"
          type="image/avif">
  <source srcset="hero-800.webp 800w, hero-1200.webp 1200w"
          type="image/webp">
  <img src="hero-1200.jpg"
       width="1200" height="675"
       loading="lazy">
</picture>

Best practices image size

• Spécifier width + height attrs.
• Compresser agressivement.
• Utiliser formats modernes.
• Resize à display size.
• srcset pour responsive.
• Lazy-load below-fold.
• Preload hero image.
• CDN avec image optimization.
• Strip metadata.
• SVG pour icônes + logos.

Pièges courants

• Servir full-resolution à mobile.
• Pas de srcset.
• Width/height manquants.
• PNG pour photos.
• JPEG pour transparence.
• Formats non optimisés.
• Bloat mémoire décodée.

Outils pour optimiser

FAQ : image size

Meilleur format image ?

Pour photos : AVIF avec WebP et JPEG fallbacks.

Quelle taille pour hero image ?

Sous 200KB idéalement.

Lazy-load toutes les images ?

Non — seulement below-the-fold.

Différence intrinsic size vs display size ?

Intrinsic = dimensions réelles. Display = quelle taille en CSS.

Pourquoi PNG produit-il d'énormes fichiers pour photos ?

PNG est lossless.

Comment fonctionne srcset ?

Le navigateur pick la meilleure image selon viewport.

Taille fichier maximale acceptable ?

1MB est élevé ; 2MB+ est wasteful.

Testez la performance des images avec LoadFocus

LoadFocus exécute des audits Lighthouse depuis 25+ régions pour flagger les images oversized. Inscrivez-vous sur loadfocus.com/signup.