La meilleure taille et qualité d'image pour le web (selon l'usage)

« Quelle taille pour mes images ? » est l'une des questions les plus fréquentes du webdesign — et la réponse est toujours « ça dépend d'où elles s'affichent ». Une mauvaise taille ralentit la page ou dégrade la qualité ; avec des repères par usage, on évite les deux. Ce guide donne des points de départ concrets en dimensions, poids et qualité pour arrêter de deviner.

Deux chiffres qui comptent

Chaque image web a deux tailles : ses dimensions en pixels (par exemple 1600×900) et son poids en kilo-octets. Les dimensions doivent correspondre à peu près à l'espace occupé à l'écran, et le poids être aussi faible que possible tant que l'image reste nette. Optimiser les deux, voilà l'objectif.

Repères par usage

Images d'en-tête pleine largeur

Visez environ 1600–2000 px de large pour les grands écrans et gardez le fichier sous environ 200 Ko en WebP ou AVIF. L'image d'en-tête étant souvent l'élément LCP, son poids pèse énormément sur la vitesse ressentie.

Photos de blog et de contenu

La plupart des colonnes d'article font 700–900 px de large : une image de 1200–1600 px couvre donc les écrans retina. Visez bien moins de 150 Ko. La qualité 75 en WebP suffit presque toujours.

Miniatures et cartes

Les miniatures sont petites à l'écran : 400–600 px suffisent largement. On peut souvent les faire passer sous 30–50 Ko — ce qui compte beaucoup quand une page en affiche des dizaines.

Un point de départ pour la qualité

Pour les formats avec perte, la qualité 70–80 est la plage sûre pour les photos. L'AVIF obtient le même rendu avec des valeurs un peu plus basses. Comparez toujours avant/après — la bonne valeur est la plus basse où la différence reste invisible.

Passer à la pratique

Choisissez une largeur cible par usage, redimensionnez, puis convertissez en WebP ou AVIF à la qualité 75. Avec Scrunch, convertissez tout un lot d'images et vérifiez chaque résultat face à l'original avant de télécharger — chaque image reste aussi légère que nécessaire.

Questions fréquentes

Puis-je téléverser des images plus grandes que la taille d'affichage ?

Jusqu'à environ 2x la taille d'affichage, c'est utile pour les écrans retina. Au-delà, vous gaspillez de la bande passante et ralentissez la page — considérez 2x comme le plafond.

Plus le fichier est petit, mieux c'est ?

En allant trop loin, la qualité se dégrade visiblement. L'objectif est le plus petit fichier qui reste net. Comparez avant/après pour trouver l'équilibre.

Faut-il la même qualité pour toutes les images ?

La qualité 75 est une valeur par défaut solide, mais soyez plus prudent avec les grandes images d'en-tête et plus agressif avec les petites miniatures. Ajuster par usage donne les meilleurs résultats.

Les noms de fichiers influencent-ils le SEO ?

Oui. Des noms descriptifs et un texte alt aident la recherche d'images et l'accessibilité. Préférez red-running-shoes.webp à img12345.jpg. Combiné à l'optimisation de taille et de poids, cela renforce votre SEO d'images.