Taille d’image pour site web : les bonnes pratiques

Il n’y a pas si longtemps, les ordinateurs étaient le principal moyen utilisé pour surfer sur Internet. Mais qu’en est-il maintenant ? D’après le rapport 2025 de We Are Social, le mobile représente 64,5 % du trafic web dans le monde.

C’est pour cette raison qu’optimiser les images pour les visiteurs sur mobile est crucial lorsque vous créez votre site Internet. Si vous ne le faites pas, ils risquent de voir des images trop petites, ce qui les obligera à zoomer. Ils pourraient même ne pas voir d’images du tout. Dans tous les cas, leur expérience s’en trouvera grandement dégradée.

La bonne nouvelle, c’est que vous pouvez facilement rendre vos images compatibles avec plusieurs appareils. Les méthodes courantes consistent à choisir la bonne taille d’image pour site web, à réduire au minimum la taille des fichiers et à utiliser un design de site internet responsive.

Suivez notre tutoriel en quelques étapes ci-dessous pour optimiser vos images aussi bien sur mobile que sur desktop.

Les meilleures tailles d’image pour site web

Taille de l’image : la taille optimale globale (en pixels) de vos images dépend de votre utilisation. Par exemple, les images d’arrière-plan doivent être plus grandes qu’un visuel d’article de blog.

Largeur en pixels : dépend de la zone d’affichage, mais les recommandations générales suggèrent 1 920 pixels pour les bannières, 1 200 pixels pour le contenu principal et 400 à 800 pixels pour les miniatures. Les images compressées au format WebP sont idéales pour préserver la rapidité de chargement de vos pages.

Taille du fichier : chaque image d’une taille de fichier supérieure à 20 mégaoctets peut avoir un impact considérable sur la vitesse de votre site web. En règle générale, il est préférable d’utiliser des images plus légères (en moyenne 500 kilooctets et jusqu’à 2 mégaoctets).

Attribut de l’image : les attributs d’image sont du texte et n’ont pas vraiment d’impact sur les performances de votre site. Cependant, certains attributs comme « alt » sont utilisés par les personnes malvoyantes avec des logiciels de lecture d’écran. Ces textes sont donc importants pour l’accessibilité web en plus de pouvoir contribuer à votre SEO. Rédigez des textes courts et simples : idéalement moins de 100 caractères, y compris les espaces.

Meilleures dimensions d’image pour site web sur ordinateur et mobile

Le tableau ci-dessous indique les dimensions recommandées pour les images sur les sites web sur ordinateur et mobile :

Il s’agit de suggestions. Il peut être nécessaire d’adapter ces dimensions en fonction de l’utilisation ou non d’un site internet responsive.

Gardez aussi en tête qu’il est presque toujours souhaitable que la taille de rendu de vos images soit inférieure à la taille des fichiers téléchargés.

La meilleure taille d’image pour site web par utilisation

• Taille d’image d’arrière-plan
• Taille d’hero image
• Taille d’image de bannière
• Taille d’image de blog
• Taille de logos

Chaque type d’image sur le web a ses propres recommandations de taille. Voici les types les plus courants :

Taille d’image d’arrière-plan

L’image d’arrière-plan est le plus grand type d’image que vous verrez. Comme son nom l’indique, elle sert de toile de fond à votre page d’accueil ou à d’autres landing pages. L’arrière-plan remplit l’écran et doit donc pouvoir s’adapter à l’appareil sur lequel on le voit.

Largeur d’image recommandée : 2 560 pixels

Hauteur d’image recommandée : 1 400 pixels

Ratio hauteur/largeur : 16:9

Taille de fichier recommandée : 20 Mo

Taille de hero image

On peut parfois confondre « hero image » et arrière-plan. La principale différence réside dans le fait que les hero images sont généralement moins hautes (environ la moitié de la taille). Ce type d’image est une bonne option si vous avez besoin d’afficher tout de suite du texte à l’écran, sans que les utilisateurs aient à scroller pour le voir.

Largeur d’image recommandée : entre 1 280 pixels et 2 500 pixels

Hauteur d’image recommandée : entre 720 pixels et 900 pixels

Ratio hauteur/largeur : 16:9

Taille de fichier recommandée : 10 Mo

Taille de bannière

Les bannières englobent de nombreuses tailles et formes, en fonction de leur emplacement et de ce que vous voulez montrer au visiteur. Le type de bannière web le plus courant est la bannière publicitaire. L’un des services les plus populaires pour promouvoir les bannières publicitaires est Google Ads.

Google Ads fournit des directives de dimensionnement optimal pour les bannières publicitaires affichées sur les appareils mobiles.

Si vous envisagez d’avoir une bannière qui n’est pas une publicité, les options rectangulaires (par exemple 300 × 200 pixels ou 970 × 90 pixels) sont généralement plus appropriées.

Largeur d’image recommandée : vérifiez auprès de la plateforme publicitaire

Hauteur d’image recommandée : vérifiez auprès de la plateforme publicitaire

Ratio hauteur/largeur : divers

Taille de fichier recommandée : 150 Ko (vérifiez auprès de la plateforme publicitaire)

Taille d’image de blog

Les visuels de blog peuvent aussi largement varier en type et en taille. Dans le doute, une astuce consiste à prévoir une image de grandes dimensions à l’origine, mais de sélectionner une taille de rendu plus petite lors de son intégration à votre article. Définir une taille de rendu pour vos pages web permet d’affiner votre design et d’avoir des visuels moins lourds (et donc plus rapide).

Prenez garde à ce que les images d’en-tête principales de vos articles de blog (celles en haut de la page) aient les mêmes dimensions sur l’ensemble de votre blog. Ce détail peut avoir un fort impact sur votre cohérence de marque entre les articles.

Largeur d’image recommandée : 1 200 pixels

Hauteur d’image recommandée : 800 pixels

Ratio hauteur/largeur : 3:2

Taille de fichier recommandée : 3 Mo

Taille de logos

Votre logo sera probablement l’une des plus petites images de votre site (excepté le favicon dans la barre d’onglets). Selon votre design de logo, vous devriez opter pour un ratio rectangulaire ou carré.

La plupart des logos se prêtent à un ratio carré (1:1). Les ratios rectangulaires sont particulièrement adaptés lorsque le logo est composé de mots plutôt que d’un visuel, ou si le nom de votre marque y figure. Le logo du site internet de Shopify, par exemple, utilise un ratio plus long, en 4:1.

Largeur d’image recommandée : 100 pixels

Hauteur d’image recommandée : 100 pixels

Ratio hauteur/largeur : 1:1, 2:3, 4:1

Taille de fichier recommandée : 1 Mo

Conseils pour les images sur mobile

1. Choisissez les bonnes dimensions de l’image

Sur les écrans de mobile, plus petits, de nombreux utilisateurs apprécient de pouvoir zoomer sur une image. C’est pour cette raison qu’il est conseillé de trouver un équilibre entre la taille de l’image et celle du fichier.

Les images en haute résolution donnent à votre boutique un aspect professionnel et complet, avec d’excellentes capacités de zoom. Veillez à ce que les images similaires aient le même ratio hauteur/largeur afin de proposer un design uniforme pour tous les types de pages.

Par exemple, vous pouvez choisir de rendre toutes les images de produits d’une boutique e-commerce carrées. Gardez à l’esprit que beaucoup de vos clients navigueront sur mobile et que les images carrées sont plus faciles à adapter aux petits écrans. Elles permettent aussi aux visiteurs de voir plus de vos produits sans avoir besoin de faire défiler.

💡 Sur Shopify, vous pouvez importer des images d’une taille maximale de 5 000 × 5 000 pixels, avec une taille de fichier allant jusqu’à 20 mégaoctets.

Pour les images de produits carrées, on recommande une taille de 2 048 × 2 048 pixels.

Gardez aussi en tête que, pour que le zoom fonctionne, vos images doivent avoir une taille supérieure à 800 × 800 pixels.

2. N’oubliez pas la taille du fichier

Les images avec des fichiers de grande taille peuvent avoir un impact considérable sur la vitesse de votre site, en particulier lorsque les visiteurs tentent d’y accéder depuis leur smartphone. De nombreuses plateformes de création de sites web ont également des contraintes de taille de fichier maximale pour les téléchargements. Par exemple, Shopify impose une taille de fichier maximale de 20 mégaoctets.

Si vous devez compresser vos images pour réduire leur taille, il existe des outils de redimensionnement d’image en ligne qui peuvent vous aider. En règle générale, les images d’en-tête ne doivent pas dépasser 10 mégaoctets et les photos de produits environ 300 kilooctets.

3. Modifier la taille d’une image pour site web pour un écran mobile

Shopify redimensionne automatiquement vos images pour les adapter à des écrans plus petits. Mais sur d’autres plateformes, les images peuvent nécessiter une modification manuelle pour les rendre compatibles avec le mobile. Gardez à l’esprit que les écrans sur desktop et mobile ont aussi des orientations opposées, en plus d’être de tailles différentes.

Si la compression sans perte permet d’obtenir une image de très bonne qualité, elle crée souvent des fichiers volumineux qui prennent beaucoup de temps à charger. Visez d’utiliser les fichiers les plus petits possibles avec la meilleure résolution.

Bien que les designs responsive et les algorithmes de Shopify soient efficaces pour redimensionner et afficher vos images sur tous les appareils, leur donner un coup de main en préparant les dimensions de fichier peut créer une expérience d’achat plus fluide.

Pourquoi la taille des images est importante pour les sites web ?

Créer une meilleure expérience utilisateur

L’utilisation d’une taille d’image adaptée à chaque cas d’utilisation permet d’améliorer l’expérience utilisateur en facilitant la lecture. Il n’est alors pas nécessaire de zoomer ou de faire défiler l’image pour la voir en entier.

Lorsque les images sont de mauvaise qualité, pixelisées ou trop petites, elles peuvent affecter la perception de votre contenu. Dans le cas d’un site e-commerce, cela peut amener les clients à douter du sérieux de votre entreprise ou de la qualité de vos produits.

À l’inverse, des images de haute qualité et aux tailles judicieusement choisies améliorent la valeur perçue de vos produits et fournissent davantage d’informations visuelles aux clients potentiels.

Améliorer la vitesse des pages

On ne le dira jamais assez, les images affectent la vitesse d’un site web. Lorsque vous téléchargez de grandes images sur votre site web, le serveur met plus de temps à charger la page. Les images plus petites (aussi bien en dimensions qu’en taille de fichier) ont tendance à se charger plus rapidement sur les différents appareils.

La vitesse de chargement des images est souvent appelée « contentful paint ». Vous pouvez vérifier le contentful paint de votre page web et d’autres indicateurs de vitesse de page en utilisant l’outil PageSpeed Insights de Google.

De manière générale, optimiser vos vitesses de page est une bonne pratique afin d’éviter un taux de rebond élevé. Faire attention à la taille des images pour votre site web est un premier pas sur cette voie.

Améliorer le référencement naturel

Google utilise une multitude de paramètres pour déterminer quelles pages web sont classées en tête de ses résultats de recherche. La qualité des images (ou, plus précisément, l’amélioration de l’expérience utilisateur qu’elles génèrent) est l’un des facteurs qui rentrent dans l’algorithme de Google.

Quels sont les meilleurs formats d’images à utiliser ?

Une image numérique peut se présenter sous différents formats de fichiers. Chacun présente des avantages et des inconvénients en termes de qualité, de taille de fichier ou encore de compatibilité. Utiliser le bon type de fichier pour un objectif précis permet un équilibre : vous profitez d’images de haute qualité, tout en maintenant la taille du fichier à un niveau raisonnable pour améliorer les performances du site web. Voici les formats de fichiers d’image les plus courants et leurs cas d’usage les plus adaptés.

WebP

WebP est un format d’image moderne, développé par Google, qui assure une compression sans perte pour les images web. Une même image sera souvent jusqu’à 30 % plus légère en WebP qu’aux formats JPEG ou PNG.

Cela peut améliorer considérablement les temps de chargement des sites, mais il convient de noter que le format WebP n’est parfois pas pris en charge par les navigateurs les plus anciens.

JPG

JPG (ou JPEG) est l’un des formats de fichier d’image numérique les plus largement utilisés, car il offre un bon équilibre entre la taille du fichier et la qualité de l’image. C’est un choix populaire pour afficher des photographies et des images complexes comportant de nombreuses couleurs.

Cependant, JPG utilise une compression avec perte, ce qui signifie qu’une image devient de moins bonne qualité après sa compression.

PNG

Le format PNG est un format de compression sans perte, ce qui signifie qu’il réduit la taille du fichier sans sacrifier la qualité de l’image. Il permet également d’avoir un arrière-plan transparent, ce qui n’est pas le cas de tous les formats.

Bien que les PNG aient souvent des tailles de fichier plus importantes que les JPEG, leur capacité à conserver leur netteté les rend adaptés aux visuels détaillés et aux logos.

SVG

SVG (pour « Scalable Vector Graphics », graphique vectoriel adaptable) est un format d’image vectorielle, ce qui signifie qu’il utilise des équations mathématiques pour rendre une image. Cela permet aux images SVG d’être mises à l’échelle dans n’importe quelle taille sans perte de qualité.

C’est un format idéal pour les logos, les icônes et autres graphiques qui doivent être utilisés à plusieurs endroits. Les SVG sont aussi généralement plus légers que les autres formats, ce qui permet d’améliorer les temps de chargement.

AVIF

AVIF (AV1 Image File Format) est un format d’image moderne conçu pour le web. Il assure une compression avancée, qui réduit énormément la taille des fichiers tout en maintenant une haute qualité visuelle. Les fichiers AVIF sont souvent beaucoup plus petits que leurs équivalents WebP ou JPEG.

Si vos objectifs principaux sont les performances les plus rapides possibles et la plus petite taille de fichier, ce format est tout indiqué. Sa principale limitation est qu’il s’agit d’un format assez récent et qu’il n’est pas toujours pris en charge par les navigateurs web plus anciens.

GIF

Le GIF est un format d’image bitmap connu pour sa capacité à prendre en charge des animations simples. Il utilise une compression sans perte et réduit les images à un maximum de 256 couleurs, ce qui permet de limiter la taille des fichiers.

Bien que le format GIF ait été largement remplacé par le format PNG pour les images statiques, il reste un choix populaire pour les courtes animations en boucle et est universellement reconnu par les navigateurs.

HEIC

Les fichiers HEIC sont un format de fichier peu encombrant qui occupe environ la moitié de l’espace d’un fichier JPEG équivalent, grâce à une technologie de compression avancée. Il est le plus souvent utilisé pour stocker des photos sur des appareils iOS, car il s’agit du format de fichier standard d’Apple.

Cependant, HEIC n’est pas naturellement pris en charge sur la plupart des appareils et navigateurs autres que ceux d’Apple.

TIFF

Le format TIFF est un format de compression sans perte qui est largement pris en charge par des applications d’édition d’image. Il offre une résolution de haute qualité et est idéal pour le stockage d’images destinées à l’impression professionnelle en raison de sa haute résolution et de sa profondeur de couleur. Cependant, attendez-vous à une taille de fichier importante.

Comment connaître la taille des images sur votre site web ?

Le moyen le plus rapide de connaître la taille d’une image sur une page web (sans télécharger l’image) consiste à utiliser l’outil d’inspection de votre navigateur. Cette méthode fonctionne, entre autres, sur Mac et Window avec des navigateurs comme Safari, Chrome ou Firefox.

Allez sur la page web et survolez l’image sur laquelle vous souhaitez obtenir des informations. Cliquez avec le bouton droit de la souris pour afficher le menu d’options et cherchez l’option « Inspecter » :

Cliquer sur Inspecter affichera le code HTML de la page (cela peut faire peur, mais ne vous inquiétez pas). Dans le panneau d’inspection, les informations relatives à l’image sur laquelle vous avez cliqué devraient être surlignées. En survolant le code pertinent, l’image sera également mise en évidence :

Dans ce cas, le navigateur vous indique combien de pixels l’image utilise. Si vous redimensionnez la page web, ce chiffre changera en conséquence.

Si vous cherchez les propriétés d’origine de l’image telle qu’elle est stockée sur le serveur, survolez le lien de source de l’image :

Vous pourrez ainsi voir la taille rendue et la taille d’origine de l’image, ainsi que la taille du fichier lui-même.

Pour quitter le panneau d’inspection, cliquez simplement sur la croix dans le coin supérieur droit.

Quels outils d’optimisation d’images utiliser ?

Les outils d’optimisation d’images en ligne sont un moyen simple, rapide (et généralement gratuit) de redimensionner les images pour votre site web. Voici trois outils d’optimisation d’images populaires :

Outil de redimensionnement d’image de Shopify

L’outil de redimensionnement d’image gratuit en ligne de Shopify est un moyen pratique d’ajuster vos images pour les utiliser sur différents canaux marketing et réseaux sociaux.

Vous pouvez choisir parmi un large éventail de dimensions officiellement reconnues pour les posts et les stories Instagram, les vignettes YouTube et d’autres types de contenu social.

Squirai

L’outil d’optimisation d’image Squirai est conçu pour la vitesse et le SEO des images. Il optimise automatiquement toutes les images de votre site web, y compris celles que vous ajouterez après l’installation de l’application.

De plus, vous pouvez personnaliser et appliquer un filigrane pour protéger vos photographies de produit sans avoir besoin de savoir coder.

LoyaltyHarbour

L’optimiseur d’image LoyaltyHarbour fonctionne de manière assez proche de l’outil de Squirai, en compressant automatiquement les images sur votre site web.

De plus, son tableau de bord vous permet de définir automatiquement le texte alt de l’image et de convertir vos fichiers pour une meilleure vitesse de page.

Autrement, si vous en avez la possibilité, vous pouvez aussi utiliser des programmes comme Photoshop pour réduire la taille des fichiers. Cependant, cela peut être un processus plus compliqué que les outils ci-dessus.

Les problèmes courants de formatage d’images

En gérant votre site Internet, vous rencontrerez probablement des soucis de formatage d’image. Il peut s’agir d’images à la mauvaise taille ou encore de liens morts, par exemple.

Examinons les solutions à quelques problèmes courants liés aux images de site web.

Mauvaise taille de l’image pour le site web

Problème : les images apparaissent trop grandes ou trop petites et peuvent déstabiliser la mise en page d’une page web, ce qui compromet l’expérience utilisateur.

Solution : si vous utilisez un thème ou un template de site web, les dimensions d’image attendues seront notées dans sa description ou dans d’autres ressources annexes. Dans votre outil de création de site, assurez-vous de sélectionner les tailles de rendu pour chaque image afin qu’elles ne s’affichent pas à leur taille originale complète.

Temps de chargement lents

Problème : les images se chargent plus lentement que le reste de la page web, voire pas du tout.

Solution : si vos images sont au mauvais format, elles pourraient avoir des tailles de fichier inutilement élevées qui affectent les temps de chargement. Utilisez un outil d’édition ou de conversion d’images pour modifier le format de vos images. Pour les graphiques ou les logos, envisagez le format SVG pour une mise à l’échelle sans perte de qualité. Pour les autres images, pensez à les convertir en WebP pour limiter leur taille de fichier.

Mauvaise qualité d’image

Problème : les images sont pixelisées ou floues.

Solution : si vos images apparaissent pixelisées ou floues, essayez de vous procurer une version à plus haute résolution (à ne pas confondre avec la taille de l’image). La résolution désigne le niveau de détails qu’une image contient, souvent mesurée en pixels par pouce (PPI). Une résolution plus élevée signifie une image plus nette, quelle que soit sa taille.

Si la qualité de l’image est réduite par la compression, ajustez ses paramètres de compression ou passez à un format de compression sans perte comme PNG.

Les images ne s’affichent pas du tout

Problème : liens morts entraînant l’absence d’affichage du visuel.

Solution : vérifiez l’URL source de vos images. Cette URL doit mener directement à l’emplacement de votre fichier image. Comparez le nom dans l’URL avec le nom de votre fichier image : ils doivent parfaitement correspondre, y compris l’extension du fichier (.jpg, .png, .svg).

Optimisez les images de votre site web pour réussir

Ajouter des images à votre site web ne se limite pas à un détail esthétique : c’est un facteur clé pour améliorer l’expérience utilisateur et booster votre classement dans les moteurs de recherche.

La taille d’image pour votre site web affecte ces deux éléments. Si les images sont trop grandes, vos pages web risquent de se charger lentement. Trop petites, et vos images peuvent apparaître pixelisées ou floues.

Veillez à bien comprendre les exigences de votre design de site web en matière de dimensions d’image et choisissez le bon format de fichier pour équilibrer la résolution et la taille de l’image.