Tailles d'images pour site web : le tableau complet
Guide des tailles d'images pour site web
Tailles d'images pour site web : hero, blog, produit, logo, OG | We.Inc
Un seul tableau des tailles en pixels, des ratios et des budgets de poids pour chaque emplacement d'image d'un site web, plus un calculateur qui transforme la largeur de votre mise en page en tailles srcset.
Dimensionnez chaque image pour l'espace le plus large qu'elle occupe, puis doublez cette largeur pour les écrans haute densité. Un hero pleine largeur fonctionne en 2560 sur 1440, une image dans le corps d'un article de blog en 1600 de large, une photo produit carrée en 2048 sur 2048 sur Shopify, et une image de partage sur les réseaux sociaux en 1200 sur 630. Gardez les photos sous environ 200 KB.
Tailles rapides pour les emplacements les plus courants
Emplacement
Pixels à exporter
Ratio
Hero pleine largeur
Image dans le corps d'un article
Photo produit (Shopify)
Image de partage (og:image)
Logo
SVG, ou PNG à 2x sa taille d'affichage
Celui du logo
Il n'existe aucune norme officielle pour une image hero ou de blog. Ce qui existe, c'est une arithmétique simple : la largeur de l'emplacement en pixels CSS, multipliée par la densité d'écran sur laquelle vous voulez une image nette. Le tableau ci-dessous applique cette règle à chaque emplacement courant, et lorsqu'une plateforme publie son propre chiffre, comme Shopify pour les produits ou Facebook pour les images de partage, nous reprenons ce chiffre.
Trouvez l'emplacement dans le tableau, ou mesurez sa largeur d'affichage dans votre mise en page avec l'inspecteur du navigateur.
Saisissez cette largeur CSS dans le calculateur et choisissez les densités à couvrir.
Exportez les largeurs indiquées, compressez chacune, et collez le srcset généré dans votre balise img.
Comparez le poids du fichier à la colonne budget avant de l'envoyer.
Exportez à 2x la largeur affichée ; le 3x ajoute un poids que peu de gens perçoivent sur une photo.
Recadrez au bon ratio avant l'envoi pour que la mise en page n'ait jamais à étirer l'image ni à ajouter des bandes.
Mettez les attributs width et height sur chaque img pour que le navigateur réserve l'espace avant l'arrivée du fichier.
Préférez le SVG pour les logos et les icônes, car un fichier vectoriel reste net à toutes les tailles avec un seul petit téléchargement.
Gardez l'image de partage en 1200 sur 630 même sur les sites étroits, car les applications sociales la récupèrent indépendamment de votre mise en page.
Questions fréquentes
Quelle taille pour une image hero ?
Pour un hero qui couvre toute la largeur du navigateur, exportez en 2560 sur 1440 pour les grands écrans et ajoutez des versions de 1280 et 1920 de large dans srcset pour que téléphones et portables téléchargent moins. Si le hero est dans un conteneur de 1200 pixels, 2400 de large suffit.
Quelle taille pour les images produits Shopify ?
Le centre d'aide de Shopify indique que les images produits carrées s'affichent généralement le mieux en 2048 sur 2048 pixels. Les fichiers envoyés peuvent aller jusqu'à 5000 sur 5000 pixels et doivent peser moins de 20 MB. Gardez le même ratio pour toutes les photos produits afin que les grilles de collection restent alignées.
Quelle taille pour une image de partage Open Graph ?
La documentation de Facebook sur le partage recommande au moins 1200 sur 630 pixels, un ratio de 1,91 pour 1 et un fichier de moins de 8 MB. Des images plus petites fonctionnent encore jusqu'à 600 sur 315, mais s'affichent en taille réduite.
Quel poids de fichier viser, au-delà des pixels ?
Taille en pixels et poids du fichier sont deux choses distinctes. Une photo de 1600 de large enregistrée en WebP ou en JPEG bien compressé pèse généralement entre 80 et 200 KB. Si une image dépasse largement ce poids, baissez le réglage de qualité ou changez de format avant de réduire ses dimensions.
Faut-il des images différentes pour le mobile ?
En général, pas de recadrages différents, seulement des copies plus petites du même fichier listées dans srcset. N'utilisez l'élément picture que lorsqu'un téléphone a besoin d'un autre cadrage, comme une version verticale d'une bannière large.
La règle unique derrière chaque chiffre
Les navigateurs mettent en page en pixels CSS. Un téléphone ou un portable Retina place deux ou trois pixels physiques dans chacun d'eux, si bien qu'une image exportée exactement à sa largeur CSS y paraît floue. Doubler la largeur règle le problème pour presque tout le monde.
Aller au-delà de 2x est rarement rentable pour des photos. Le fichier double encore à peu près de poids et le détail supplémentaire se remarque difficilement à distance de lecture normale.
Le ratio compte plus que les pixels exacts
La plupart des mises en page redimensionnent les images à la largeur de leur colonne, donc le ratio décide de la place qu'occupe une image sur la page. Choisissez un ratio par emplacement, recadrez chaque image en conséquence, et la grille reste nette quelle que soit la largeur.
Les choix courants sont 16:9 pour les heros et les images d'articles, 1:1 pour les produits et les avatars, 4:5 pour les cartes portrait, et 1.91:1 pour les images de partage.
Les budgets gardent les pages rapides
La plus grande image au-dessus de la ligne de flottaison est souvent l'élément qui détermine le Largest Contentful Paint. Un hero lourd ralentit la page plus que n'importe quel autre fichier, il mérite donc le plus de soin.
Fixez un budget par emplacement et tenez-vous-y. Quand une photo ne rentre pas dans le budget avec une bonne qualité, essayez WebP ou AVIF avant de réduire la résolution.
Tailles d'images pour chaque emplacement
Les largeurs d'emplacement correspondent à des mises en page de bureau typiques. Mesurez votre propre thème et appliquez la règle du 2x si les vôtres diffèrent.
Tailles d'export, ratios et budgets de poids par emplacement
Emplacement
Largeur CSS
Pixels à exporter
Ratio
Budget
Remarque
Hero pleine largeur
100vw (jusqu'à 1280+)
250 KB
Ajoutez des copies de 1280 et 1920 de large dans srcset
Hero dans un conteneur
200 KB
Deux fois la largeur du conteneur
Bandeau
150 KB
Évitez le texte sur les bords ; les côtés sont rognés sur téléphone
Image à la une d'un article
800 à 1200
1600 x 900 jusqu'à 2400 x 1350
150 KB
Alignez-vous sur la largeur de contenu de votre thème
Image dans le corps d'un article
720 à 800
16:9 ou 3:2
150 KB
Les colonnes de texte sont plus étroites que les heros
Photo produit
Carte de grille
200 KB
Taille carrée recommandée par Shopify
Carte de collection ou de catégorie
800 x 800 ou 800 x 1000
1:1 ou 4:5
80 KB
Utilisez un seul ratio sur toute la grille
Photo d'équipe ou avatar
40 KB
Souvent affichée dans un cercle ; centrez le visage
Logo dans l'en-tête
environ 160
SVG, ou PNG de 320 de large
Celui du logo
20 KB
Le SVG reste net à toutes les tailles
Texture d'arrière-plan
150 KB
Une qualité plus basse convient derrière du texte
Image de partage (og:image)
Non affichée sur la page
Moins de 8 MB (visez bien moins)
Taille recommandée par Facebook
Favicon
16 à 32
SVG plus ICO ou PNG 32 x 32
5 KB
Consultez le guide des favicons pour toutes les tailles
Balisage d'un hero responsive
Hero pleine largeur avec trois largeurs
Le navigateur choisit le plus petit fichier qui couvre encore le viewport à la densité de l'écran. width et height fixent le ratio pour que rien ne saute pendant le chargement.
Calculateur de taille d'image
Saisissez la largeur qu'occupe une image dans votre mise en page, en pixels CSS, et choisissez les densités d'écran à couvrir. Le calculateur liste les largeurs en pixels à exporter et écrit le srcset correspondant.