Internet est omniprésent dans le monde entier et les internautes utilisent de nombreux appareils différents pour y accéder. Il n’y a pas si longtemps, les ordinateurs fixes étaient le principal moyen utilisé par les gens pour surfer sur Internet, mais maintenant ? Le trafic mobile représente en effet plus de 50% du trafic total français.
Ainsi, optimiser correctement les images pour les visiteurs mobiles est crucial. Si vous ne le faites pas, ils risquent de voir des images trop petites, ce qui les obligera à zoomer, et 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 n'y a pas grand-chose à faire pour que vos images soient compatibles avec plusieurs appareils. Les principales méthodes consistent à utiliser les bonnes tailles d'image au départ (pixels et taille de la mémoire) et à utiliser des outils d'optimisation d'image en ligne.
Sommaire
- Meilleures tailles d'image pour les sites internet
- Pourquoi la taille des images est importante pour les sites web ?
- Taille image site web selon l’utilisation
- Recommandations pour les images mobile
- Quels sont les meilleurs formats d'images pour le web ?
- Comment connaître la taille des images sur votre site web ?
- Outils d'optimisation d'images
- Utilisez les meilleures images web pour votre marque
- FAQ sur la taille des images d’un site web
Suivez notre tutoriel en quelques étapes ci-dessous pour optimiser vos images correctement pour les appareils mobiles et de bureau.
Meilleures tailles d'image pour les sites internet
Largeur des pixels : dans la plupart des cas, 2500 pixels sont parfaits 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 de la fenêtre.
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'une image 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 (jusqu'à 2 mégaoctets).
Attribut de l'image : Les attributs d'image (texte alt ou balise alt) sont basés sur du texte et n'ont pas vraiment d'impact sur les performances de votre site. Cependant, ils sont utilisés pour les malvoyants via les logiciels de lecture d'écran, et sont utiles pour le référencement. Rédigez des textes court et simples.
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 et le classement SEO. De mauvais choix en matière de taille d'image peuvent avoir un impact sur ces trois mesures, et souvent en même temps.
Cela signifie aussi que l'utilisation des meilleures tailles d'image sur votre page web pour chaque cas d'utilisation, 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 de l'utilisateur en facilitant la lecture, sans qu'il soit nécessaire de zoomer pour obtenir des détails ou de faire défiler l'image pour la voir dans son intégralité.
Voici un exemple de ce qui se passe lorsque vous utilisez une image d’arrière-plan trop petite pour être mise à l’échelle sur une page (ce qui entraîne l’utilisation d’images « répétitives » pour s’adapter à l’écran) :
Si le propriétaire de ce site avait choisi d'essayer d'adapter la petite image à l'écran, elle serait trop floue pour être vue. Les images répétées sont également peu esthétiques, ce qui nuit là encore à l'expérience de l'utilisateur.
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 "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 a une vitesse de chargement supérieure à 2,1 secondes pour charger la première image, et de 4,1 secondes pour charger l'image la plus grande. Sachant que la moitié des clients abandonnent leur panier lorsque les pages mettent plus de 6 secondes à se charger, il est essentiel d'améliorer la vitesse de chargement de vos pages pour éviter un taux de rebond élevé.
Améliorer le classement SEO
Le classement SEO peut faire référence au classement général de votre site (par exemple, l'évaluation du domaine) ou à la proximité de la première page (ou du haut de la première page) des résultats de recherche de votre page lorsqu'un utilisateur recherche des mots-clés spécifiques.
Google utilise une multitude de critères dans son algorithme pour déterminer ce qui apparaît sur la première page des résultats de recherche. La qualité de vos images (et l'expérience utilisateur qu'elles génèrent) en fait partie.
Taille image site web selon l’utilisation
Dans cette section, nous examinerons les exigences de taille 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 et 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 (bien que vous puissiez également les trouver sur les pages principales de type “piliers”).
Largeur maximale de l'image : 2500 pixels
Hauteur maximale de l'image : 1406 pixels
Ratio hauteur/largeurt :16:9
Taille du fichier :20 Mo maximum
Voici un excellent exemple d’image d’arrière-plan sur un site e-commerce :
Le revendeur 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 elle est visualisée.
Hero image
Vous avez peut-être déjà confondu une “image 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 1280 pixels et 2500 pixels
Hauteur maximale de l'image : entre 720 pixels et 900 pixels
Ratio hauteur/largeur :16:9
Taille du fichier : maximum de 10 Mo, mais idéalement plus petit (sans sacrifier la qualité)
Voici un bon exemple de hero image :
Comme vous pouvez le voir, la marque de café américaine BLK & Bold a opté pour une image aussi large que possible, avec une hauteur d'image fixe plus courte.
Bannière
Les bannières sont un peu plus délicates à commenter que les autres types d'images, car elles englobent une large gamme de tailles et de formes, en fonction de ce que vous voulez montrer au visiteur. Cependant, le type de bannière web le plus courant est la publicité.
Google Ads étant l'un des services les plus populaires dans ce domaine, les responsables de Google 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 afin d'améliorer la vitesse de votre page web. Un maximum de 5 mégaoctets est idéal.
Image de blog
Les images de blog peuvent également largement varier en type et en taille. Cependant, il convient de noter que si nous parlons de l’image principale « d’en-tête » (celle qui s’affiche en haut, « au-dessus de la ligne de flottaison »), leur taille se doit être uniforme sur l'ensemble de votre blog.
Largeur maximale de l'image : 2240 pixels
Hauteur maximale de l'image : 1260 pixels
Ratio hauteur/largeur : 16:9
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 intrinsèque est de 1 200 x 620 pixels, mais elle est ici rendue est beaucoup plus petite (894 x 462 pixels). La taille du fichier n'est alors que de 95,1 kilo-octets.
Logo
Votre logo sera probablement l'une des plus petites images de votre site (sauf si vous comptez le favicon dans la barre d'onglets). Selon le type de logo, vous pouvez opter pour l'une des deux options suivantes : rectangulaire ou carré.
La plupart des logos se prêtent à un ratio carré de 1:1, que vous pouvez observer dans le coin inférieur gauche de l'exemple de Kulala ci-dessus. Mais un logo plus rectangulaire pourrait utiliser un ratio d'image de 2:3 pour aspect “presque carré”, voire même un ratio 4:1.
Largeur maximale de l'image : 250 pixels
Hauteur maximale de l'image : 250 pixels
Ratio hauteur/largeur : 1:1, 2:3, 4:1
Taille du fichier : maximum de 1 Mo, mais idéalement plus petit (sans sacrifier la qualité)
Le logo du site de Shopify utilise un ratio plus long de 4 : 1 :
Cette taille d'image convient aux logos de noms de marque plus longs ou lorsque le logo n'est constitué que de mots et non d'un visuel.
Recommandations pour les images mobile
1. Choisissez les bonnes dimensions de l'image
Il est essentiel de trouver un équilibre entre les images de grande taille, afin que les utilisateurs puissent zoomer, et celles qui ont une taille optimale, pour qu'elles ne prennent pas trop de place et ne ralentissent pas les temps de chargement de vos pages.
Sur Shopify, vous pouvez importer des images d'une taille maximale de 4 472 x 4 472 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.
Ces images haute résolution donnent à votre boutique un aspect professionnel et complet, avec d'excellentes capacités de zoom. N'oubliez pas que pour que la fonctionnalité de zoom fonctionne, vos images doivent avoir une taille supérieure à 800 x 800 pixels.
Conservez les mêmes proportions de largeur/hauteur pour toutes vos images principales, pour conserver un aspect uniforme au fil de votre gamme de produits et sur vos pages de collection. Par exemple, vous pouvez choisir les rendre toutes carrées.
L’image de présentation est la première image d'un produit qui apparaîtra dans votre boutique : page d'accueil, page panier, page de paiement et diverses pages de collection. Gardez également toutes vos miniatures de la même taille et de la même forme, pour offrir un aspect soigné à votre boutique.
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 mobile, ce qui permet aux clients de profiter davantage de votre photo.
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, afin 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. Redimensionner les photos pour un écran mobile
Shopify redimensionne automatiquement vos images pour les adapter à des écrans plus petits, mais certaines images peuvent parfois nécessiter une modification manuelle. Gardez à l’esprit que les écrans de bureau et mobiles sont non seulement de tailles différentes, mais ont également des orientations opposées.
Bien que Shopify essaie de tenir compte de ces différences en recadrant légèrement les images, il est préférable que vos images soient carrées et que votre produit soit centré verticalement et horizontalement.
De plus, les images ayant une résolution trop importante (comme celles enregistrées au format maximal de Shopify de 4 000 x 4 000 pixels), peuvent être floues lorsqu'elles sont redimensionnées pour les mobiles. En réduisant votre image à une taille et une forme plus maniables, tout en gardant à l'esprit l'aspect mobile, vous pouvez améliorer l'aspect de votre boutique sur tous les appareils. Essayez l’outil de redimensionnement d'image gratuit de Shopify pour réduire rapidement la taille de vos visuels.
N’oubliez pas que les fichiers volumineux ralentissent également le temps de chargement de votre site. Et en e-commerce, en particulier sur mobile, chaque seconde compte. L’'optimisation de vos images devrait donc être une priorité.
Si la compression sans perte permet d'obtenir une image de qualité supérieure, elle crée souvent des fichiers volumineux qui prennent beaucoup de temps à télécharger (surtout en masse) et qui peuvent ralentir le temps de chargement de vos pages. Et cela pousse les visiteurs à abandonner votre boutique. Cela est particulièrement vrai sur mobile, où les vitesses de chargement sont souvent plus lentes, et où le fait d'attendre qu'une image apparaisse est une grosse source de frustration pour les acheteurs.
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.
Quels sont les meilleurs formats d'images pour le web ?
Examinons maintenant les formats de fichiers les plus largement utilisés pour les images. Ils sont répertoriés ici selon la fréquence à laquelle ils sont utilisés pour les photographies de produits.
JPG
JPG est le format de fichier d'image numérique le plus courant. Il est très fréquemment supporté et se caractérise par une taille de fichier réduite et une bonne gamme de couleurs. Sa compression vous permet d'équilibrer la taille du fichier et la qualité de l'image.
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). Les inconvénients sont que la taille des fichiers PNG peut être importante en raison de la compression sans perte, et que le format n'est pas aussi universellement compatible que le JPG.
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.
WebP
WebP est un format d'image moderne 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.
GIF
Le format GIF permet de réduire la taille des fichiers en compressant et en réduisant les images à 256 couleurs. Bien qu’il ait été largement remplacé par le PNG, il est toujours utilisé pour l’animation, car c’est le seul format qui le prend en charge et qui est universellement reconnu par les navigateurs.
TIFF
Le format TIFF est un format de compression sans perte qui est largement pris en charge par une série d'applications d'édition et d'applications web. Il offre une résolution d'image de haute qualité et permet d'enregistrer plusieurs images et pages dans un seul fichier. Cependant, la taille du fichier a tendance à être importante.
En résumé :
- JPG est le format le plus pratique pour combiner une taille plus petite avec une qualité décente.
- PNG offre une compression sans perte de qualité, mais au prix d’une taille de fichier plus importante.
- Le format GIF est utile si vous proposez des prises de vue à 360 degrés et que vous souhaitez des fichiers légers.
- Le TIFF, en comparaison, peut offrir une excellente qualité, mais la taille des fichiers est généralement assez lourde et peu pratique.
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 :
En cliquant sur Inspecter, vous obtiendrez toutes les informations relatives au code de la page web (cela peut sembler intimidant, mais ne vous inquiétez pas).
Dans le panneau d'inspection, les informations relatives à l'image sur laquelle vous avez cliqué devraient être mises en évidence, 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 (Microsoft Edge) vous indique au-dessus de l'image combien de pixels l'image utilise. Ce chiffre changera si vous redimensionnez la page. Cependant, si vous survolez le lien de stockage de l’image, les propriétés fixes de l’image s’afficheront :
Et voilà, c'est tout. Vous n’avez pas besoin de télécharger l’image ou un outil spécifique : tout se trouve directement dans le navigateur. Pour quitter le panneau d’inspection, appuyez simplement sur le X dans le coin supérieur droit ou gauche.
Outils d'optimisation d'images
La meilleure approche consiste à utiliser un outil d'optimisation pour aider à redimensionner vos images. Voici deux excellents outils qui vous aideront à le faire dans l'interface d'administration de Shopify.
Optimisation d'images avec Squirai
L’outil d'optimisation d'image Squirai est soumis à des tests de vitesse et s'assure que vos images sont prêtes pour le référencement. Il optimise automatiquement toutes les images de votre site Web, y compris celles que vous ajouterez ultérieurement.
De plus, vous pouvez également personnaliser et appliquer un filigrane pour protéger la photographie de vos produits, sans avoir nullement besoin de maîtriser le code.
Optimisation d'images avec LoyaltyHarbour
L'optimiseur d'image LoyaltyHarbour plug-in fonctionne de manière similaire à l'outil Squirai, en compressant pour vous vos images sur votre site.
Par contre, il ne dispose pas de la même fonction de filigrane. En revanche, le tableau de bord détaillé vous permet de définir automatiquement un texte alternatif pour vos images et de les convertir vers le meilleur type de fichier image pour une vitesse optimale.
Si vous en avez la possibilité, vous pouvez également utiliser Photoshop pour réduire la taille des fichiers, mais cela peut être un processus plus compliqué qu’avec les outils ci-dessus.
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 rendre les pages attractives et booster le référencement de votre site dans les pages de résultats des moteurs de recherche. La taille de vos images est importante : si elles sont trop grandes, votre site risque de se charger trop lentement ; si elles sont trop petites, l'expérience de l'utilisateur risque d'être médiocre.
Cependant, il existe différentes recommandations concernant la taille des images en fonction du type d'image que vous souhaitez. Au lieu d'essayer de tous les mémoriser, vous pouvez ajouter ce guide à vos favoris pour vous y référer lorsque vous devez télécharger des images.
Si vous utilisez Shopify et l'un des outils d'optimisation recommandés, vous n'avez pas à vous inquiéter d’une éventuelle lenteur de site liée à la taille des fichiers.
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, ainsi que de la conception globale du site.
Quelle est la meilleure façon de sauvegarder une image pour le web ?
La meilleure façon d'enregistrer une image prête pour le Web est d'utiliser un outil d'optimisation tel que Squirai ou LoyaltyHarbour. Vous obtiendrez ainsi une image de qualité tout en veillant à ce que la taille du fichier soit suffisamment petite pour ne pas nuire à la vitesse de votre site web.
Article publié par Aleks Ignjatovic
Aleks est la rédactrice en chef du blog de Shopify en français. Elle est responsable du marketing de contenu et de la localisation pour les marchés francophones chez Shopify.
Vous souhaitez contribuer au blog de Shopify en français ? Lisez nos conseils !