Il n’y a pas si longtemps, les ordinateurs étaient le principal moyen utilisé par les gens pour surfer sur Internet. Mais qu’en est-il maintenant ? D’après Statista, le mobile représente plus de 50 % du trafic web en France.
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 se retrouvera largement dégradée.
La bonne nouvelle, c'est qu'il est facile de rendre vos images compatibles avec plusieurs appareils. Les méthodes courantes consistent à choisir la bonne taille d’image de 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 correctement pour le mobile et le desktop.
Les meilleures tailles d'image de site web
Largeur en pixels : dans la plupart des cas, 2 500 pixels est parfait pour un affichage en plein écran dans un navigateur. Toute image plus petite risque d'être coupée ou d'apparaître floue si elle doit occuper toute la largeur.
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.
Taille du fichier : toute image d'une taille 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 petites (en moyenne 500 kilo-octets et jusqu'à 2 mégaoctets).
Attribut de l'image : les attributs d'image (texte alt ou balise alt) sont du texte et n'ont pas vraiment d'impact sur les performances de votre site. Cependant, les malvoyants les utilisent via les logiciels de lecture d'écran, et ils sont utiles pour le référencement naturel. Rédigez des textes courts et simples.
Le tableau ci-dessous indique les dimensions recommandées pour les images sur les sites web sur ordinateur et mobile :
Type d’image de site web | Dimensions d’image sur ordinateur (L x H) | Dimensions d’image sur mobile (L x H) | Ratio recommandé |
---|---|---|---|
Image d’arrière-plan | 2 560 x 1 400 pixels | 360 x 640 pixels | 16:9 |
Image hero | 1 280 x 720 pixels | 360 x 200 pixels | 16:9 |
Bannière | 1 200 x 400 pixels | 360 x 120 pixels | 3:1 |
Image de blog | 1 200 x 800 pixels | 360 x 240 pixels | 3:2 |
Logo (rectangle) | 400 x 100 pixels | 160 x 40 pixels | 4:1 |
Logo (carré) | 100 x 100 pixels | 60 x 60 pixels | 1:1 |
Favicon | 16 x 16 pixels | 16 x 16 pixels | 1:1 |
Icônes de réseaux sociaux | 32 x 32 pixels | 48 x 48 pixels | 1:1 |
Image pour une lightbox | 1 920 x 1 080 pixels | 360 x 640 pixels | 16:9 |
Image miniature | 300 x 300 pixels | 90 x 90 pixels | 1:1 |
Il s'agit de suggestions. Il peut être nécessaire d'adapter les tailles 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.
Pourquoi la taille des images est importante pour les sites web ?
Pour les sites web, la taille de l’image est importante pour trois raisons principales :
- L’expérience utilisateur
- La vitesse des pages
- Le SEO (référencement naturel)
De mauvais choix en matière de taille d'image de site web peuvent avoir un impact sur ces trois éléments, et souvent en même temps. Cela signifie aussi que l'utilisation des bonnes tailles d'image sur votre site internet peut contribuer à les améliorer tous simultanément.
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 avoir un impact sur 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é des produits.
À l'inverse, des images de haute qualité et de taille correcte améliorent la valeur perçue de vos produits et fournissent davantage d'informations visuelles aux clients potentiels.
Par exemple, les images ci-dessous de la marque de chaussures Allbirds améliorent l'expérience de l'utilisateur en mettant clairement en évidence les différentes caractéristiques de leur produit.
Améliorer la vitesse des pages
Lorsque vous avez des images de grande taille sur votre site, le serveur met plus de temps à charger la page lorsqu'un utilisateur y arrive. En termes de référencement d'images, c'est ce qu'on appelle le « largest contentful paint ». Les images de petite taille (principalement la taille du fichier image) ont tendance à se charger plus rapidement sur les différents appareils.
Voici un exemple de mauvaise vitesse de chargement de pages :
Vous pouvez voir ici que le serveur met 2,1 secondes pour charger la première image et 4,1 secondes pour charger l'image la plus grande. Quand on sait que 53 % des internautes sur mobile quittent la page si elle met plus de 3 secondes à se charger, il est essentiel d'améliorer la vitesse de chargement pour éviter un taux de rebond élevé.
Améliorer le référencement naturel
Le SEO fait référence au positionnement de votre site dans les résultats de recherche lorsqu'un utilisateur recherche des mots-clés spécifiques. Les sites Internet optimisés pour la recherche seront bien classés pour les requêtes de recherche pertinentes des utilisateurs.
Google utilise une multitude de paramètres pour déterminer quelles pages 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 sans doute un des facteurs qui rentrent dans l'algorithme de Google.
La meilleure taille d’image de site web par utilisation
Il est pertinent d’examiner les tailles idéales pour des types spécifiques d’images pour le web, car elles ne sont pas toutes identiques. Il existe cinq principaux types d'images destinées au web :
- les images d'arrière-plan
- les images dites « hero »
- les bannières
- les images de blog
- les logos
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. Vous pouvez aussi les trouver sur les pages principales de type « piliers ».
Largeur maximale de l'image : 2 500 pixels
Hauteur maximale de l'image : 406 pixels
Ratio hauteur/largeur : 16:9
Taille du fichier : 20 Mo maximum
Voici un excellent exemple d’image d’arrière-plan sur un site e-commerce :
La boutique en ligne de vélos Cowboy met en scène son produit phare avec cette image. Elle remplit l'écran et est conçue pour s’adapter visuellement quel que soit l'appareil sur lequel on la voit.
Image hero
Vous avez peut-être déjà confondu une « hero » avec une image d'arrière-plan. La principale différence réside dans le fait qu'elles sont généralement plus petites en hauteur (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 la page pour le voir.
Largeur maximale de l'image : entre 1 280 pixels et 2 500 pixels
Hauteur maximale de l'image : entre 720 pixels et 900 pixels
Ratio hauteur/largeur : 16:9
Taille du fichier : 10 Mo maximum, mais idéalement plus petit (sans sacrifier la qualité)
Voici un bon exemple de hero :
Comme vous pouvez le voir, la marque française Noyoco a opté pour une image aussi large que possible.
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.
Google Ads est l'un des services les plus populaires dans ce domaine, et les responsables de l’entreprise de Mountain View ont formulé quelques recommandations concernant les tailles de bannières idéales :
Comme vous pouvez le constater, les options sont nombreuses. Cependant, si vous envisagez d’avoir une bannière qui n’est pas une publicité, les options rectangulaires (par exemple 300 x 200 pixels ou 970 x 90 pixels) sont généralement plus appropriées. La taille du fichier doit être réduite pour améliorer la vitesse de votre page web. Un maximum de 150 kilo-octets est idéal.
Image de blog
Les visuels de blog peuvent aussi largement varier en type et en taille. Gardez à l’esprit que si on parle de l’image principale « d’en-tête » (celle qui s’affiche en haut, « au-dessus de la ligne de flottaison »), leur taille doit être uniforme sur l'ensemble de votre blog.
Largeur maximale de l'image : 1 200 pixels
Hauteur maximale de l'image : 800 pixels
Ratio hauteur/largeur : 3:2
Taille du fichier : maximum de 3 Mo, mais idéalement plus petit (toujours sans sacrifier la qualité)
Vous trouverez un exemple d'image de blog en haut de la page que vous êtes en train de lire, mais en voici un autre :
Cet exemple du site Kulala montre une image dont la taille est de 1 200 x 620 pixels, mais elle est ici rendue beaucoup plus petite (894 x 462 pixels).
Notez que la définition d'une taille de rendu pour vos pages web permet d'affiner votre design et de réduire la taille des fichiers (l'image de l'article de Kulala ne fait que 95,1 Ko).
Logo
Votre logo sera probablement l'une des plus petites images de votre site (excepté le favicon dans la barre d'onglets). Selon le type de logo, vous pouvez opter pour un rectangle ou un carré.
Les formes rectangulaires conviennent bien aux noms de marque plus longs ou lorsque le logo est composé de mots plutôt que d'un graphique. Le logo du site internet de Shopify utilise un ratio plus long de 4:1.
Largeur maximale de l'image : 100 pixels
Hauteur maximale de l'image : 100 pixels
Ratio hauteur/largeur : 1:1, 2:3, 4:1
Taille du fichier : 1 Mo maximum
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 la taille du fichier.
Les images 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 rapport hauteur/largeur afin de proposer un design uniforme pour tous les types de pages.
Par exemple, vous pouvez choisir de les rendre toutes 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. De plus, les images carrées et verticales occupent une plus grande partie de l’écran du téléphone, ce qui permet aux clients de profiter davantage de votre photo.
Sur Shopify, vous pouvez importer des images d'une taille maximale de 5 000 x 5 000 pixels, avec une taille de fichier allant jusqu'à 20 mégaoctets.
Mais l’outil de création de site de Shopify recommande généralement d'utiliser 2 048 x 2 048 pixels pour les photos de produits carrées.
Gardez aussi en tête que, pour que la fonctionnalité de zoom fonctionne, vos images doivent avoir une taille supérieure à 800 x 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. Et si votre site est trop lent, cela augmente les risques que la personne le quitte et se dirige plutôt vers une autre option dans sa recherche Google.
C'est pourquoi vous devriez compresser les grandes images, pour que leur taille ne soit pas trop importante. D'autant plus que de nombreux sites ont une taille de fichier maximale qu'ils vous autorisent à télécharger. Shopify, par exemple, impose une taille de fichier maximale de 20 mégaoctets.
Il existe des outils en ligne pour vous aider, comme iLoveIMG ou Compress JPEG. Avec ces outils, vous pouvez facilement importer vos gros fichiers image, les compresser pour qu'ils soient plus petits (tout en conservant la qualité de l'image) puis re-télécharger le nouveau fichier.
En règle générale, les images d'en-tête ou d'arrière-plan ne doivent pas dépasser 1 mégaoctet et les photos de produits environ 300 kilooctets.
3. Modifier la taille de l’image du site web pour un écran mobile
Shopify redimensionne automatiquement vos images pour les adapter à des écrans plus petits, mais certains visuels peuvent parfois nécessiter une modification manuelle. Gardez à l’esprit que les écrans sur desktop et mobile sont non seulement de tailles différentes, mais ont aussi des orientations opposées.
Les thèmes et les algorithmes réactifs de Shopify sont efficaces pour redimensionner et afficher vos images sur tous les appareils. Malgré tout, il est opportun de minimiser les risques en réfléchissant à la taille de ses fichiers, pour cible une expérience d'achat encore plus fluide. Essayez l’outil de redimensionnement d'image gratuit de Shopify pour réduire rapidement la taille de vos visuels.
À nouveau, les fichiers volumineux ralentissent le temps de chargement de votre site. 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. Pensez à utiliser les fichiers les plus petits avec la meilleure résolution.
Quels sont les meilleurs formats d'images à utiliser ?
Le bon type de fichier garantit des 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.
JPG
JPG (ou JPEG) est le format de fichier d'image numérique le plus courant, car il offre un équilibre entre la taille du fichier et la qualité de l'image. Il convient bien à l’affichage de photographies et d'images complexes comportant de nombreuses couleurs.
Cependant, JPG utilise une compression avec perte, ce qui signifie que l’image perd en qualité lorsqu’elle est compressée.
PNG
Le format PNG a été créé pour améliorer le format GIF en supprimant sa limitation de 256 couleurs. Il est largement supporté, sans perte (réduit la taille du fichier sans réduire la qualité) et il prend en charge la transparence (par exemple, pour les arrière-plans transparents).
Un des principaux inconvénients est que la taille des fichiers PNG peut être importante en raison de la compression sans perte. Par ailleurs, le format n'est pas aussi universellement compatible que le JPG.
SVG
SVG est un format d'image vectorielle, ce qui signifie qu'il utilise des équations mathématiques pour rendre une image. Cela signifie que les images SVG peuvent ê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 petits que les autres formats, ce qui permet d'améliorer les temps de chargement.
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 universellement pris en charge sur les appareils autres que ceux d'Apple.
WebP
WebP est un format d'image moderne, développé par Google, qui offre une compression supérieure pour les images web, avec une économie moyenne de plus de 30 % en taille de fichier par rapport aux formats de fichiers traditionnels comme PNG et JPG.
Cela peut améliorer considérablement les temps de chargement des sites, mais WebP n'est pas encore universellement pris en charge par tous les navigateurs.
GIF
Le GIF est un format d'image 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 réduire 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. Il est universellement reconnu par les navigateurs.
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. Mais 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 et consulter ses spécifications) consiste à utiliser les outils de développement ou d’inspection du navigateur.
Cette méthode fonctionne que vous utilisiez un système d'exploitation Mac, Windows ou Linux, car elle dépend du navigateur. Elle fonctionne avec Safari, Chrome et Firefox.
Tout ce que vous avez à faire est d'accéder à la page web et de survoler l'image sur laquelle vous souhaitez obtenir des informations, puis de cliquer avec le bouton droit de la souris ou d'utiliser Contrôle/CTRL + clic pour afficher les options.
Ensuite, cherchez l’option « Inspecter » :
Vous obtiendrez le code HTML de la page web (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, et vous remarquerez qu'en survolant le texte mis en évidence, l'image sera recouverte d'une couche bleutée qui vous indiquera la partie du code que vous êtes en train de regarder :
Dans ce cas, vous pouvez voir que le navigateur vous indique au-dessus de l'image combien de pixels l'image utilise. Ce chiffre changera si vous redimensionnez la page.
Si vous cherchez les propriétés d’origine de l’image, survolez le lien de stockage de l’image.
Pour quitter le panneau d’inspection, appuyez simplement sur le X dans le coin supérieur droit ou gauche.
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 de votre site web. Voici trois outils d'optimisation d'images populaires sur l’interface Shopify.
Modifier la taille des images du site web avec l’outil dédié de Shopify
L’outil de redimensionnement d'image gratuit de Shopify permet d'ajuster vos images pour les utiliser sur vos canaux marketing et réseaux sociaux.
Vous pouvez choisir parmi une variété de dimensions officielles pour les posts et les stories Instagram, les vignettes YouTube et d'autres types de contenu.
Optimiser les images avec Squirai
L’outil d'optimisation d'image Squirai est soumis à des tests de vitesse pour s’assurer que vos images sont optimisées pour le SEO. Il améliore automatiquement toutes les images de votre site web, y compris celles que vous ajouterez ultérieurement.
Vous pouvez aussi personnaliser et appliquer un filigrane pour protéger la photo des produits, sans avoir besoin de maîtriser le code.
Optimiser les images avec LoyaltyHarbour
L'optimiseur d'image LoyaltyHarbour est un plugin qui fonctionne de la même manière que Squirai, en compressant pour vous les images sur votre site.
Le tableau de bord vous permet de définir automatiquement le texte alt de l'image et de la convertir dans le type de fichier image le plus optimal pour améliorer la vitesse de la page.
Alternativement, si vous en avez la possibilité, utilisez Photoshop pour réduire la taille des fichiers. Mais le processus peut s'avérer plus compliqué que les outils présentés.
Les problèmes courants de formatage d’images
En gérant votre site Internet, tôt ou tard, vous rencontrerez des problèmes liés aux formats d'image. Ils peuvent aller d'une taille incorrecte à des liens qui ne fonctionnent pas.
Voici les solutions à quelques problèmes courants liés aux images de sites web.
Taille de l’image du site web incorrecte
Problème : Les images apparaissent trop grandes ou trop petites et peuvent modifier la mise en page, ce qui compromet l'expérience de l'utilisateur.
Solution : Si vous utilisez un thème ou un template de site web, recherchez des ressources sur les dimensions d'image adaptées à votre design. Dans votre outil de création de site web, assurez-vous de sélectionner les tailles de rendu pour chaque image afin que les images ne s'affichent pas dans leur taille originale.
Temps de chargement longs
Problème : Les images se chargent plus lentement que le reste de la page web, voire pas du tout.
Correction : Un mauvais format de fichier peut entraîner 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, qui permet une mise à l'échelle sans perte de qualité. Pour les autres images, pensez à les convertir en WebP pour compresser les fichiers volumineux.
Mauvaise qualité d'image
Problème : Les images sont pixelisées ou floues.
Solution : Essayez de vous procurer une version à plus haute résolution. N'oubliez pas que la résolution d'une image diffère de sa taille. La résolution fait référence à la quantité 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.
Les images ne s'affichent pas du tout
Problème : Liens d'image cassés entraînant l'absence d'affichage du visuel.
Correction : Vérifiez l'URL source de vos images. Cette URL doit mener directement à l'emplacement de votre fichier image. Comparez le nom du fichier image dans l'URL avec le nom réel de votre fichier image. Ils doivent correspondre exactement, y compris l'extension du fichier (.jpg, .png, .svg).
Utilisez les meilleures images web pour votre marque
Il est essentiel de disposer sur votre site d'images adaptées à différentes tailles d'écran pour améliorer l’expérience utilisateur et booster le référencement de votre site sur les moteurs de recherche.
La taille de vos images est importante. Si elles sont trop grandes, votre site risque de se charger trop lentement. Trop petites, vos images peuvent apparaître pixelisées ou floues.
Veillez à bien comprendre les exigences de votre 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.
FAQ sur la taille des images d’un site web
Quelle est la meilleure taille d’image pour un site web ?
Si vous souhaitez une image pleine largeur, la meilleure option est une largeur de 2 500 pixels. Les différentes tailles d'image dépendent de l‘utilisation du visuel (hero image, bannière, image de blog ou logo du site) et du design global du site.
Quel est le meilleur format d'image pour un site Internet ?
WebP est un format d'image populaire pour les sites web. Il garantit des performances rapides. Développé par Google, WebP offre une compression sans perte pour les images sur le web, réduisant la taille des fichiers de 30 % par rapport aux formats JPEG et PNG. Notez quand même que WebP n'est pas pris en charge par tous les navigateurs.
Quelle est la différence entre la taille d'une image et sa résolution ?
La taille de l'image fait référence aux dimensions de l'image, généralement mesurées par sa largeur et sa hauteur en pixels. La résolution d'une image correspond à la quantité de détails qu'elle contient, souvent mesurée en pixels par pouce (PPI). Une résolution plus élevée signifie plus de détails et une image plus nette, quelle que soit sa taille.
Quel est l'impact de la taille de l'image sur le temps de chargement du site ?
Plus le fichier d'une image est volumineux, plus le téléchargement et l'affichage de l'image sur l'écran de l'utilisateur prennent du temps. Cela peut ralentir le temps de chargement des pages web, ce qui peut avoir un impact négatif sur l'expérience de l'utilisateur et le référencement sur les moteurs de recherche. Pensez à optimiser les images en prenant en compte à la fois la qualité et la taille du fichier.
Comment réduire la taille des fichiers d'images sans perdre en qualité ?
Vous pouvez réduire la taille des fichiers sans nuire à la qualité de l’image en utilisant la compression sans perte, qui supprime les données inutiles du fichier sans affecter l'apparence de l'image. Des outils comme Adobe Photoshop ou des optimiseurs d'images en ligne permettent de comprimer sans perte.