Meilleure taille d'image pour un site web : guide des images d'en-tête, de blog et des miniatures

La meilleure taille d'image pour un site web correspond à environ deux fois la largeur d'affichage de l'image. À titre indicatif, utilisez 1920 à 2560 px de large pour les images d'en-tête pleine largeur, 1200 à 1600 px pour les images de blog, et 300 à 600 px pour les miniatures. Enregistrez en WebP ou en JPG compressé, et gardez la plupart des images sous environ 200 Ko.

Ce sont des points de départ pratiques, pas des normes officielles. Votre thème et votre mise en page déterminent les vrais chiffres, et la méthode ci-dessous montre comment les trouver.

Quelle est la meilleure taille d'image pour un site web ?

Partez de l'espace que chaque image occupe dans votre mise en page. Ouvrez la page dans un navigateur sur ordinateur, faites un clic droit sur l'image et choisissez Inspecter. Les outils de développement indiquent la largeur affichée en pixels CSS. Doublez ce chiffre pour que l'image reste nette sur les téléphones et ordinateurs portables à écran haute densité.

Un mémo rapide pour les types d'images courants :

• Image d'en-tête ou bannière pleine largeur : 1920 à 2560 px de large.
• Images dans un article de blog ou une colonne de contenu : 1200 à 1600 px de large.
• Photos de produits : 1000 à 2000 px sur le plus grand côté, davantage si votre boutique propose le zoom.
• Miniatures et cartes : 300 à 600 px de large.
• Logos et icônes : SVG dès que possible, car il reste net à toutes les tailles.
• Image de partage social (Open Graph) : 1200 x 630 px est la taille la plus utilisée.

L'erreur la plus fréquente consiste à envoyer une photo de 4000 px issue d'un téléphone ou d'un appareil photo dans une colonne de 700 px. Le navigateur télécharge tous les pixels, puis en jette la plupart. Sur une connexion mobile, ce sont des secondes d'attente pour rien.

Sur le web, seules les dimensions en pixels comptent. Les écrans ignorent la valeur DPI enregistrée dans un fichier : inutile donc de régler 72 ou 300 DPI pour un site web. Notre guide 300 DPI explique quand ce chiffre compte vraiment (à l'impression).

Taille d'une image d'en-tête : quelle largeur et quelle hauteur ?

Une image d'en-tête (hero) est la grande bannière en haut d'une page. Comme elle s'étend sur tout l'écran, elle doit être l'image la plus large de votre site.

• Largeur : 1920 px couvre la plupart des écrans d'ordinateur. Montez jusqu'à 2560 px si vous la voulez nette sur les grands écrans haute densité.
• Hauteur : cela dépend de votre design. Beaucoup d'images d'en-tête font entre 600 et 1000 px de haut en largeur ordinateur.
• Forme : un cadrage large comme le 16:9 ou le 21:9 fonctionne sur ordinateur. Sur téléphone, la même image est souvent recadrée au centre : gardez donc le sujet au milieu.
• Taille de fichier : essayez de rester sous environ 500 Ko, et moins c'est mieux.

L'image d'en-tête est souvent l'élément Largest Contentful Paint de la page, le moment qu'utilise Google pour juger de la vitesse d'affichage de votre page. Les recommandations web.dev de Google visent un LCP de 2,5 secondes ou moins. Une image d'en-tête trop lourde est la raison habituelle pour laquelle une page n'y parvient pas.

Si du texte est placé sur l'image d'en-tête, une image légèrement plus sombre ou floutée le garde lisible et se compresse mieux, car les zones lisses prennent moins d'octets que les détails fins.

Taille des images de blog pour les articles et les images mises en avant

Pour les images dans un article, regardez la largeur de votre colonne de contenu. La plupart des thèmes de blog utilisent une colonne de 600 à 800 pixels CSS. La doubler donne 1200 à 1600 px, soit la plage de taille d'image de blog indiquée plus haut.

• Images dans le corps de l'article : 1200 px de large conviennent à la plupart des thèmes. Utilisez 1600 px si votre colonne est large.
• Image mise en avant : consultez la documentation de votre thème. Beaucoup utilisent un cadrage large, et 1200 x 630 px sert très bien aussi d'image de partage sur les réseaux sociaux.
• Captures d'écran : gardez-les à leur taille naturelle si elles sont moins larges que la colonne, pour que le texte ne devienne pas flou à l'agrandissement.
• Taille de fichier : visez 100 à 200 Ko pour les photos. Les captures d'écran enregistrées en PNG peuvent être plus lourdes : essayez le WebP pour elles.

Utilisez une forme unique pour les images mises en avant de tout le blog. Des formes différentes rendent les pages d'archives et de catégories inégales.

Quel poids de fichier pour les images d'un site web ?

Il n'y a pas de limite officielle, mais quelques cibles approximatives gardent des pages rapides :

• La plupart des images de contenu : moins d'environ 200 Ko.
• Grandes images d'en-tête : moins d'environ 500 Ko.
• Miniatures : souvent 20 à 50 Ko.

Si les cibles en Ko et en Mo vous embrouillent, notre guide combien de Ko dans un Mo clarifie tout cela.

De bonnes dimensions font l'essentiel du travail. La compression fait le reste. Une photo de 1600 px enregistrée en JPG avec une qualité de 75 à 85, ou en WebP, tombe généralement dans la bonne plage. Si une image reste lourde, utilisez un compresseur avec une taille cible, comme le Compresseur d'images de ConvertorLab. Comparez le résultat avec l'original en taille réelle avant de publier.

Quel format utiliser ?

• Le WebP pour les photos et les visuels. Google indique que le WebP avec perte est 25 à 34 % plus léger qu'un JPEG comparable, et le WebP sans perte 26 % plus léger que le PNG. Tous les principaux navigateurs actuels le prennent en charge.
• SVG pour les logos, icônes et illustrations simples.
• Le JPG comme solution de repli, ou quand votre plateforme n'accepte pas le WebP.
• PNG uniquement quand vous avez besoin d'une qualité sans perte ou de transparence et que vous ne pouvez pas utiliser le WebP.

Notre explication qu'est-ce qu'un fichier WebP détaille la prise en charge par les navigateurs et les apps. Pour convertir des fichiers existants, utilisez le convertisseur d'images en WebP.

Comment redimensionner les images de votre site web, étape par étape

1. Gardez vos fichiers originaux en haute résolution dans un dossier séparé. Ne modifiez jamais la seule copie.
2. Recadrez chaque image à la forme qu'utilise votre mise en page, par exemple 16:9 pour les bannières ou 1:1 pour les cartes.
3. Redimensionnez à la largeur cible. L'outil Redimensionner une image fixe une largeur exacte ou un plus grand côté pour tout un lot et peut produire du WebP ou du JPG.
4. Compressez jusqu'à votre taille de fichier cible, puis vérifiez quelques images en taille réelle pour repérer des taches ou des effets de bandes.
5. Renommez les fichiers avec des noms courts, descriptifs et en minuscules, comme oak-dining-table.webp.
6. Envoyez les images, puis ajoutez un texte alternatif descriptif dans votre CMS.

Beaucoup de plateformes redimensionnent et convertissent les images à l'envoi. Envoyez quand même un fichier de taille raisonnable. Vous économisez de l'espace de stockage et donnez à la plateforme une base propre.

Images responsives, chargement différé et mesure de la vitesse

La façon dont les images se chargent compte autant que leur taille. Quelques habitudes HTML font l'essentiel du travail :

• Ajoutez loading="lazy" aux images situées plus bas dans la page, pour que le navigateur attende que le lecteur s'en approche en faisant défiler.
• Ne différez pas le chargement de l'image d'en-tête. Le guide d'optimisation du LCP de web.dev recommande de ne jamais différer le chargement de l'image LCP, et suggère plutôt fetchpriority="high" pour celle-ci.
• Définissez toujours les attributs width et height sur les images. Le navigateur réserve l'espace, et le texte ne saute pas pendant le chargement de la page.
• Pour les images affichées à des tailles très différentes sur téléphone et sur ordinateur, proposez plusieurs versions avec srcset et sizes. Le guide des images adaptatives de MDN détaille la syntaxe.

Pour repérer les pires coupables, analysez votre page avec PageSpeed Insights ou le panneau Lighthouse des outils de développement de Chrome. Ils signalent les images plus grandes que leur taille d'affichage, celles qui pourraient utiliser un format moderne, et les images hors écran qui devraient se charger en différé. Vous pouvez aussi ouvrir l'onglet Réseau, filtrer sur Img et trier par taille. Tout ce qui, en haut de liste, pèse plus de quelques centaines de Ko mérite d'être redimensionné en priorité.

Questions fréquentes