Imaginez que vous entrez dans un magasin où les articles sont rangés de façon désordonnée sur les étagères, où la disposition du magasin rend les déplacements difficiles et où il n’y a pas d’échantillons ou de présentoirs pour vous permettre de voir ce que vous achetez exactement.
Vous allez probablement faire demi-tour et passer la porte.
Il en va de même pour les boutiques Shopify.
Dans le cas d’une image de produit Shopify, la taille du fichier peut affecter les temps de chargement de votre page. Des images granuleuses, des dimensions incohérentes, un espacement insuffisant entre les photos de produits et des images qui semblent avoir été extraites au hasard de plusieurs sites Web suffisent à envoyer les internautes vers le bouton Précédent.
En ce cas on peut le dire : la taille impore !
Voici ce que vous devez savoir sur les tailles d’image idéales pour les boutiques Shopify.
Quelles sont les tailles d’image idéales pour Shopify ?
Vos images doivent être suffisamment grandes pour montrer les détails du produit, mais la taille du fichier doit être suffisamment petite pour ne pas ralentir la vitesse de chargement de la page.
En général, Shopify autorise des images d’une taille maximale de 4472 x 4472 pixels et d’une taille maximale de 20 Mo. Cela ne signifie pas que vous devez toujours utiliser les dimensions définies sur votre site.
Les experts de Shopify recommandent que la taille des images Shopify soit de 2048 x 2048 pixels pour une photo de produit carrée pour une meilleure qualité.
Au minimum, vous devez opter pour une taille d’image de produit de 800 x 800 pixels. Vous avez besoin d’images en haute résolution dans lesquelles les visiteurs peuvent zoomer.
Votre thème peut également recommander des tailles d’image. Par exemple, le thème Debut recommande une taille de 1200 à 2000 pixels en largeur et de 400 à 600 pixels en hauteur pour les images.
Il est important de respecter les tailles recommandées pour votre thème, car les thèmes peuvent recadrer les images différemment.
Voici quelques indications spécifiques à prendre en compte concernant les tailles des différents types d’images sur votre site.
Taille des images des diaporamas Shopify
Les images de votre diaporama sont les premières choses que vos visiteurs verront sur votre boutique en ligne et l’occasion de faire une impression.
Il est préférable d’opter pour des images de grande taille et de haute définition qui sortiront véritablement de la page pour le visiteur. Cependant, la façon dont vos diapositives apparaissent sera affectée par les paramètres de votre thème.
Si l’on prend le thème Debut comme exemple, quatre facteurs influent sur l’affichage des images de votre diaporama. Ces facteurs sont les suivants :
- la taille de l’image
- Paramètres de position de l’image
- Paramètres de hauteur de la diapositive
- Rapport largeur/hauteur (ou rapport d’aspect)
- Pour la taille des images, Debut recommande ce qui suit :
Réglage de la hauteur de la diapositive Largeur recommandée Hauteur recommandée
Adapter à la première image 1200 px 600 px
Petit 1200 px 475 px
Moyen 1200 px 489 px
Grand 1200 px 775 px
Vous pouvez constater que les meilleures tailles d’image de diaporama dépendent fortement des paramètres de votre thème.
Taille de l’image de la bannière Shopify
Les images de bannière Shopify sont souvent utilisées avec des diaporamas ou parfois avec une superposition de texte en haut de la page d’accueil du thème de la boutique en ligne. Certaines personnes appellent ces photos des images héroïques.
Comme pour les images de votre diaporama, vous devez envisager d’utiliser des images d’arrière-plan haute résolution et simples afin de ne pas être encombré par une superposition de texte.
Cela étant dit, vérifiez s’il existe des tailles d’image recommandées pour le thème que vous utilisez. Vous devrez peut-être définir une hauteur différente pour la vue mobile de votre site afin de vous assurer que l’image s’affiche correctement.
Dans notre exemple du thème Debut, les utilisateurs rencontrent souvent le problème suivant : les images de la bannière sont tronquées si vous modifiez la taille de la fenêtre.
Les côtés sont coupés et vous ne pouvez pas voir l’image complète sur le bureau et sur le mobile. Il faut généralement ajouter du code pour modifier l’alignement, le rapport hauteur/largeur et le remplissage afin d’obtenir une image correcte.
Le thème Debut ne précise pas la taille des images de bannière, mais il recommande généralement une taille de 1200 à 2000 px en largeur et de 400 à 600 px en hauteur pour les images.
Taille des images de produits Shopify
Pour obtenir des conversions à partir des pages de votre boutique, vous devez inclure des photos de produits détaillées et de haute qualité afin que les visiteurs puissent examiner attentivement le produit.
Par exemple, si vous êtes dans le secteur de la mode, les visiteurs aiment généralement faire un gros plan du produit pour évaluer le matériau, la texture et les détails avant de décider d’acheter.
Les clients potentiels ne peuvent pas toucher ou sentir le produit comme ils le feraient dans un magasin physique, c’est pourquoi les bonnes images sont si importantes.
Il est recommandé d’utiliser des images carrées pour les images de produits, surtout si la plupart de vos visiteurs viennent d’appareils mobiles. Les appareils mobiles redimensionnent automatiquement les images, et les photos carrées avec le produit au centre donnent les meilleurs résultats.
L’image doit être d’au moins 800 x 800 pixels ou plus. Tout ce qui est inférieur à ces dimensions ne permettra pas aux visiteurs de voir clairement le produit, et l’image aura l’air pixélisée lorsqu’un client potentiel zoomera.
Shopify vous permet également de télécharger un maximum de 250 photos. Prévoyez des photos avec des angles différents de vos produits pour votre boutique de commerce électronique en ligne afin que les visiteurs puissent mieux comprendre vos produits.
De nombreux magasins optent également pour un fond blanc, bien que vous puissiez toujours opter pour des fonds de couleur si vous pouvez vous assurer que les couleurs correspondent toutes à votre thème.
Vérifiez toujours l’aspect de vos images sur le mobile et sur le bureau lorsque vous les ajoutez.
Taille des images de collection Shopify
Une collection Shopify est un groupe de produits sur les pages de votre boutique de commerce électronique en ligne. Comme les images sont côte à côte, il est essentiel de s’assurer que toutes les images Shopify de votre collection ont le même rapport d’aspect et la même taille d’image. Il est extrêmement évident qu’une image de produit n’a pas la même taille que les autres.
Comment optimiser la taille de vos images Shopify ?
1. Modifier le rapport hauteur/largeur de l’image
Le rapport hauteur/largeur de l’image est le rapport calculé entre la largeur de l’image et sa hauteur. Par exemple, une photo de produit dont les dimensions sont de 250 x 500 a un rapport d’aspect de 1:2. Si l’image Shopify a des dimensions de 300 x 900, le rapport d’aspect est de 1:3.
Les rapports d’aspect sont particulièrement importants pour les images de collection Shopify, les images de bannière et les images de diaporama. Pour les images de collection de produits, vous devrez vous assurer d’utiliser les mêmes rapports d’aspect pour toutes les images.
Pour savoir si les images de produits ont un rapport d’aspect égal, vous pouvez diviser la largeur définie de l’image par sa hauteur, puis les comparer.
Par exemple, si la largeur de la première image de produit est de 500 px et sa hauteur de 250 px, le rapport d’aspect après division est de 1:2. Si la largeur de la deuxième image est de 800 px et sa hauteur de 400 px, le rapport hauteur/largeur après la division est toujours de 1:2. Les valeurs sont les mêmes et votre thème Shopify les redimensionnera à la même taille d’image.
Vous pouvez utiliser l’éditeur d’images de Shopify pour recadrer vos images à un certain rapport d’aspect. Dans votre tableau de bord Shopify, allez dans Produits > Tous les produits et sélectionnez le produit avec la photo que vous voulez modifier. Cliquez sur le fichier image que vous voulez modifier et vous pouvez utiliser les trois icônes dans le coin inférieur gauche pour recadrer ou redimensionner la photo.
2. Compresser les images
La compression de vos images est l’un des meilleurs moyens d’augmenter la vitesse de chargement de vos pages. Un bon compresseur d’images peut réduire la taille du fichier tout en conservant la résolution de vos photos.
Shopify compresse les images que vous téléchargez dans une certaine mesure. Vous pouvez utiliser des outils gratuits en ligne comme squoosh pour compresser vos images Shopify et vous pouvez souvent compresser plusieurs images en même temps.
Vous avez peut-être remarqué que nous n’avons recommandé que des compresseurs PNG. Cela nous amène à notre prochain point…
3. Vérifiez le format de l’image
Shopify prend en charge différents formats, notamment JPG, PNG, GIF, TIFF et BMP. Le format JPG est le plus populaire, mais nous allons vous expliquer pourquoi vous devriez opter pour le format PNG.
De nombreuses personnes affirment que vous devriez utiliser le format JPG pour votre boutique Shopify car il permet d’utiliser une taille de fichier plus petite tout en ayant une excellente gamme de couleurs.
Une image JPG Shopify est facilement compressée afin que vos pages puissent se charger rapidement, ce qui est particulièrement important pour les appareils mobiles.
Cependant, l’utilisation du format PNG présente de nombreux avantages. Ce format a été initialement créé pour améliorer le format GIF en supprimant la limitation à 256 couleurs. Sa capacité à réduire la taille des fichiers sans nuire à la qualité de la photo (ou capacité sans perte) le rend populaire pour les photos de haute qualité comme celles dont vous avez besoin pour votre boutique Shopify.
Vous pouvez également créer un arrière-plan transparent en PNG, ce qui vous permet de personnaliser plus facilement le design de votre boutique Shopify. Bien que le format PNG ait été critiqué pour la taille importante de ses fichiers, les outils de compression vous permettent de trouver plus facilement un équilibre entre la qualité des photos et des pages au temps de chargement court.
Comment faire pour que les photos aient la même taille dans Shopify ?
Pour que les photos Shopify aient la même taille, allez dans Produits dans le menu de gauche de votre tableau de bord Shopify :
- Cliquez sur Tous les produits
- Cliquez sur le produit avec la photo que vous voulez changer et cliquez sur l’image.
- Cliquez sur l’icône en bas à gauche pour redimensionner. Vous pouvez définir les dimensions avec l’option de conserver votre rapport hauteur/largeur.
Comment uploader des images en masse sur Shopify ?
Dans votre tableau de bord Shopify, cliquez sur Paramètres dans le menu de gauche :
- Cliquez sur Fichiers
- Téléchargez des fichiers en masse depuis votre ordinateur. Vous pourrez maintenant les utiliser dans votre boutique.
Le mot de la fin
Il se peut que vous passiez plus de temps que prévu sur la taille des images Shopify. Des images de produits correctement dimensionnées peuvent donner à votre boutique un aspect professionnel et attirer les clients.
N’oubliez pas que vos images de produits doivent également être optimisées pour ne pas ralentir votre site et augmenter le temps de chargement de votre page produit. De nombreux thèmes redimensionnent les images de vos produits, mais vous pouvez également les compresser pour réduire davantage la taille du fichier.
Consultez attentivement la documentation du thème de votre boutique en ligne pour obtenir des conseils sur la taille optimale des diaporamas, bannières, collections et images de produits.
Jeu de briques
Snake
Pacman
Bubble