La meilleure taille et le meilleur format d'image pour les sites web en 2026
Les images non optimisées sont la principale cause des sites web lents. Ce guide vous donne des recommandations concrètes sur les dimensions, tailles de fichiers et formats d'image, basées sur la façon dont les images sont réellement affichées sur les sites web modernes.
La règle d'or : servir les images à la taille d'affichage
Ne téléversez jamais une image de 4000px de large si elle ne s'affichera qu'à 800px de large. Le navigateur télécharge l'image complète mais l'affiche à une fraction de sa taille — toutes ces données supplémentaires sont de la bande passante gaspillée.
Redimensionnez toujours vos images à la taille maximale à laquelle elles seront affichées avant de les téléverser.
Dimensions recommandées selon le cas d'usage
| Type d'image | Largeur maximale | Taille de fichier cible |
|---|---|---|
| Bannière/héro pleine largeur | 1920px | Moins de 200 Ko |
| Image mise en avant d'article | 1200px | Moins de 100 Ko |
| Image intégrée dans l'article | 800px | Moins de 60 Ko |
| Photo de produit (e-commerce) | 1000px | Moins de 80 Ko |
| Miniature / image de carte | 400px | Moins de 25 Ko |
| Logo (raster) | 200px | Moins de 10 Ko |
| Texture d'arrière-plan | 1000px (tuile) | Moins de 30 Ko |
Recommandations de meilleur format
- Photos et images de produit : WebP (premier choix) ou JPG à 80 % de qualité
- Logos et icônes : SVG (vectoriel) — s'adapte parfaitement à toute taille, fichiers minuscules
- Captures d'écran et images d'interface : PNG ou WebP sans perte
- Illustrations avec des couleurs unies : SVG ou WebP
Objectifs Core Web Vitals
Google note les pages selon les Core Web Vitals. Pour les images, la métrique pertinente est le Largest Contentful Paint (LCP) — la vitesse à laquelle l'image visible principale se charge :
- Bon : LCP inférieur à 2,5 secondes
- À améliorer : 2,5 – 4 secondes
- Mauvais : Plus de 4 secondes
Si votre image héro dépasse 200 Ko, elle contribue probablement à un mauvais score LCP sur les connexions mobiles.
Flux de travail étape par étape pour l'optimisation des images
- Déterminez la taille d'affichage — Vérifiez la largeur maximale réelle en CSS/HTML à laquelle votre image sera rendue.
- Redimensionnez à cette largeur — Utilisez notre Redimensionneur d'images. Incluez des versions 2x pour les écrans retina (si nécessaire).
- Convertissez en WebP — Utilisez JPG vers WebP ou PNG vers WebP.
- Compressez — Utilisez notre Compresseur d'images avec une qualité de 75 à 80 %.
- Définissez les attributs width et height — Évite le Cumulative Layout Shift (CLS), une autre métrique Core Web Vitals.
- Ajoutez le chargement différé —
loading="lazy"pour les images sous la ligne de flottaison.
Écrans Retina / HiDPI
Les écrans retina (la plupart des smartphones et MacBooks modernes) affichent à une densité de pixels 2x ou 3x. Un emplacement de 400px de large sur votre page nécessite une image de 800px pour paraître nette sur un écran retina. Utilisez l'attribut HTML srcset pour servir différentes tailles selon la densité d'écran :
<img
src="image-400.webp"
srcset="image-400.webp 1x, image-800.webp 2x"
width="400" height="300"
alt="Description"
>Utilisateurs de Next.js
Si vous utilisez Next.js, le composant intégré <Image> gère tout cela automatiquement — il redimensionne, sert le WebP et ajoute le chargement différé nativement. Fournissez simplement l'image originale en haute résolution et laissez Next.js optimiser la livraison.