
S'abonner à la lettre d'information
Saisissez votre adresse électronique ci-dessous et abonnez-vous à notre lettre d'information
Saisissez votre adresse électronique ci-dessous et abonnez-vous à notre lettre d'information
Cet article décrit la configuration et le téléchargement des images de produits sur Shopify. Après la mise à jour du système, la section de téléchargement des images de produits a été renommée « Médias », ce qui signifie que vous pouvez désormais télécharger non seulement des images de produits, mais également des vidéos et des modèles 3D, offrant ainsi davantage de moyens de présenter les produits. Cependant, l'objectif ultime reste le même : convertir le trafic en commandes.
Shopify prend en charge la plupart des formats de fichiers image, les formats PNG, JPEG et GIF étant recommandés. D'autres formats d'image tels que PSD, TIFF, BMP, HEIC et WebP sont également pris en charge. Voici les formats d'image de produit recommandés par Shopify :
Les images JPEG/JPG sont adaptées à l'affichage d'images statiques relativement riches et complexes, telles que des photos. Les images JPEG/JPG sont riches en couleurs et peuvent maintenir la qualité de l'image tout en garantissant l'effet d'affichage, c'est-à-dire la compression sans perte des images. Cela garantit à la fois l'effet d'affichage de l'image et la vitesse d'ouverture du site Web en réduisant la taille du fichier. Dans la même taille de fichier, la couleur des images JPG est nettement plus lumineuse que celle des GIF et des PNG.
Par conséquent, Shopify et l’auteur de « 10 Must Know Image Optimization Tips » considèrent les images au format JPG comme le premier choix pour les images de produits sur les sites de commerce électronique indépendants. « Le meilleur type de fichier pour les images de produits est .jpg. » Les images GIF doivent être évitées autant que possible. Cependant, si nécessaire, vous pouvez créer des animations GIF à insérer dans les descriptions de produits pour augmenter le taux de conversion des commandes, à condition de contrôler la taille des images GIF pour garantir de bonnes performances du site Web.
Par conséquent, les images JPEG/JPG conviennent aux images de produits, aux bannières de sites Web, aux images de carrousel, aux pages de sites Web et aux images d'articles de blog.
Les images PNG sont le format idéal pour les fichiers d'icônes graphiques et prennent également en charge la transparence, ce qui les rend adaptées aux images telles que les logos sur les sites Web et les fichiers d'icônes sociales.
Images au format WebPLors de la création d'images de produits, il n'est pas nécessaire de créer délibérément des fichiers au format WebP à télécharger sur Shopify. Le service d'imagerie de Shopify affichera automatiquement les images dans le meilleur format disponible en fonction du navigateur pris en charge par le client.
Par exemple, si nous ouvrons une page d’un site Web Shopify à l’aide du navigateur Google Chrome, Shopify remplacera automatiquement toutes les images au format JPG de cette page par des images au format « WebP ». Si vous visitez la même page à l’aide d’un navigateur qui ne prend pas en charge le format « WebP », comme le navigateur IE, toutes les images de cette page seront toujours au format JPG. La raison pour laquelle Shopify convertit automatiquement les images au format JPG ou au format WebP est que ces types de fichiers peuvent atteindre une optimisation en termes de rendu des couleurs et de taille de fichier, qui est la vitesse d’ouverture. L’ensemble du processus est effectué par Shopify, et nous n’avons rien à faire.
WebP est un format d'image développé par Google pour accélérer le chargement des images. La taille compressée de l'image est d'environ 2/3 de celle du JPEG, ce qui permet d'économiser beaucoup de bande passante du serveur et d'espace de données. Il peut réduire la taille des ressources de chargement des images, économiser les ressources du trafic utilisateur et réduire les ressources du trafic du serveur. Comme il s'agit d'un service développé par Google, sa compatibilité n'est pas si complète. Cependant, nous n'avons pas à nous en soucier, car Shopify décidera automatiquement d'afficher les images au format JPG ou les images au format Webp en fonction de l'environnement de navigation du client.
Nous pouvons essayer d'ouvrir notre page produit avec le navigateur Google Chrome, puis télécharger une image. En général, le format de fichier enregistré par défaut est WebP, même si le format de l'image que nous avons téléchargée est JPG ou PNG.
Il n'est pas nécessaire que la taille de l'image soit carrée. Par exemple, les images de produits sur le site Web de Fashion Nova sont toutes rectangulaires avec des proportions cohérentes. Cet effet d'affichage peut être meilleur, en particulier pour les vêtements, car il peut remplir tout l'écran d'un téléphone portable. Lorsque vous ouvrez le lien du produit, l'écran entier affiche l'image du produit, ce qui crée un bien meilleur impact visuel.
Plus le nombre de pixels d'une image de produit est élevé, plus elle apparaîtra claire. Cependant, un nombre de pixels élevé signifie généralement des fichiers image plus volumineux, ce qui peut ralentir les temps de chargement des sites Web. Par conséquent, un équilibre doit être trouvé entre le nombre de pixels et la taille du fichier.
Les images téléchargées sur un site Web Shopify sont soumises à des limites en termes de dimensions en pixels et de tailles de fichier. Tout fichier dépassant les limites suivantes affichera une erreur lors du téléchargement :
Pour atteindre photos de haute qualité, nous devrons peut-être utiliser outils d'édition d'images pour les optimiser et les redimensionner pour le Web. Les images plus grandes peuvent ralentir le chargement des pages. La taille idéale de l'image ne doit pas dépasser 200 Ko, et une taille plus petite est préférable.
Lors de la compression des images, veillez à ne pas les compresser excessivement, car cela peut entraîner l'apparition de taches.
Vous avez peut-être entendu dire que si un site Web ne s'ouvre pas dans les 3 secondes sur un ordinateur de bureau, de nombreuses personnes choisiront de le quitter. Sur les appareils mobiles, ce délai passe à 5 secondes. Selon une étude de données réalisée par Amazon, si leur site Web se charge 1 seconde plus lentement, ils perdent environ 1,6 milliard de dollars de ventes par an. Dans l'algorithme de classement de Google, la vitesse de chargement du site Web est également l'un des facteurs importants pour obtenir un meilleur classement.
Par conséquent, si votre site Web se charge lentement, la plupart des utilisateurs choisiront de fermer la page avant la fin du chargement, ce qui signifie qu'il n'y aura pas de conversion en commandes. Bien que Shopify utilise diverses technologies d'accélération de pages Web, telles que la technologie CDN et la technologie de compression d'images, si votre site Web doit charger de nombreux fichiers volumineux, tels que les images de bannière de taille 2 Mo couramment utilisées et les images de produits volumineuses, ces facteurs continueront d'affecter la vitesse de chargement du site Web.
Il est donc recommandé de contrôler la taille des fichiers image tout en garantissant la qualité de l'image. Il existe de nombreux outils à cet effet, tels que Tinypng. Voici quelques outils de compression recommandés que vous pouvez essayer :
Pour accélérer le chargement du site Web, réduire les temps de chargement des pages et stocker davantage d'images sur un nombre spécifique de disques, Shopify compresse les images qui répondent à des exigences spécifiques dans des conditions spécifiques. La compression d'image peut entraîner des modifications de la qualité de l'image. La résolution de l'image compressée est liée à la résolution de l'image que vous avez téléchargée et à la taille de l'image. En général, la résolution de l'image compressée après compression est la suivante :
La résolution spécifique de l'image peut être visualisée et ajustée à l'aide de PS (raccourci Ctrl+Alt+I). Comme le montre la figure ci-dessous, la résolution « 72 » dans la figure correspond à la valeur DPI de l'image.
Exigences relatives aux images des produits de la boutique Shopify et optimisation des images
Pour les fichiers au format JPEG, Shopify décidera de compresser ou non l'image en fonction de la résolution de l'image d'origine. Par exemple, si la résolution de l'image que nous téléchargeons est supérieure à 86 et que chaque côté de l'image est supérieur ou égal à 1024 px, Shopify compressera l'image et la résolution de l'image compressée sera de 85.
Si la résolution de l'image avant le téléchargement est comprise entre 65 et 85, et que chaque côté de l'image est supérieur ou égal à 1024 px, Shopify ne traitera en aucun cas l'image et utilisera l'image d'origine que vous avez téléchargée.
Résolution originale | Taille de l'image | Résolution compressée |
---|---|---|
86 ou plus | Largeur ou hauteur de l'image >= 1024px | 85 |
65 – 85 | Largeur ou hauteur de l'image >= 1024px | Qualité d'origine |
64 ou moins | Largeur ou hauteur de l'image >= 1024px | 65 |
76 ou plus | Largeur et hauteur de l'image < 1024px | 75 |
65 – 75 | Largeur et hauteur de l'image < 1024px | Qualité d'origine |
64 ou moins | Largeur et hauteur de l'image < 1024px | 65 |
En ce qui concerne la façon de prendre de bonnes photos de produits, le contenu impliqué est trop professionnel et je n'ai actuellement pas la capacité de l'expliquer en détail. Cependant, prendre de bonnes photos de produits a un impact très positif et important sur nous pour gérer des sites Web indépendants et augmenter les taux de conversion des sites Web. Il est recommandé à tout le monde de demander plus à Google. Il existe un dicton : dans le commerce électronique, ce qui est réellement vendu, ce sont des images. Mais ce que je sais, c'est que pour les sites Web indépendants, vous n'êtes pas obligé de vous conformer aux exigences d'Amazon concernant les images de produits. L'image principale ne doit pas être une image de fond blanc, mais une image de scène du produit.
iFoto Éditeur de photos iFoto Photo Editor est un outil de retouche d'image de pointe qui exploite une technologie d'IA avancée pour améliorer efficacement la résolution des images, garantissant des résultats de haute qualité pour une utilisation professionnelle et personnelle. Il offre une gamme de fonctionnalités pratiques telles que la suppression de l'arrière-plan, l'amélioration des photos, le nettoyage des images et le réglage des couleurs, ce qui le rend idéal pour améliorer les images de produits pour les magasins Shopify. Avec iFoto Photo Editor, la mise à jour des pages d'informations sur les produits devient sans effort, ce qui conduit à un engagement client accru, à des taux de clics (CTR) améliorés et à des classements plus élevés sur Shopify.
En plus de ses fonctionnalités axées sur Shopify, iFoto Photo Editor est disponible sous forme de plateforme Web et d'applications iOS/Android, offrant une expérience d'édition d'images transparente aux utilisateurs dans divers scénarios. Reconnu comme l'un des meilleurs outils d'édition d'images alimentés par l'IA disponibles, iFoto Photo Editor a acquis une excellente réputation et dispose d'une large base d'utilisateurs fidèles dans le monde entier.
Principales caractéristiques:
Prenons un exemple extrême, comme le montre l'image ci-dessous, pour l'éclairage de vélo Revolights. L'image de gauche est une image du produit et l'image de droite est une image de scène de son utilisation. Quelle image nous semble la plus attrayante ?
Créer des noms de fichiers descriptifs et riches en mots-clés. Les moteurs de recherche explorent non seulement le texte de votre page Web, mais recherchent également des mots-clés dans les noms de vos fichiers image.
En général, après avoir pris des photos avec un appareil photo/téléphone, nous les importons sur l'ordinateur et le nom de fichier de la photo sera une chaîne de caractères alphanumériques plus l'extension de fichier. Par exemple, DCMIMAGE10.jpg. La première étape pour optimiser l'image du produit avant de la télécharger sur Shopify consiste à modifier le nom de fichier de l'image sur l'ordinateur. Par exemple, remplacez-le par : 2012-Ford-Mustang-LX-Red.jpg.
Pourquoi ? Comme mentionné ci-dessus, les moteurs de recherche non seulement explorent le texte de votre page Web, mais ils recherchent également des mots-clés dans les noms de vos fichiers d'image. Si l'image est nommée DCMIMAGE10.jpg par défaut, le moteur de recherche ne peut pas savoir quel contenu se trouve sur cette image. Si elle est nommée 2012-Ford-Mustang-LX-Red.jpg, le moteur de recherche indexera les mots-clés dans le nom de l'image.
Alors, lequel de ces trois noms est le meilleur : Ford Mustang LX rouge 2012 ; Ford Mustang LX rouge 2012 ; Ford Mustang LX rouge 2012 ? À mon avis, ils sont identiques, mais l'auteur de l'article suggère que vous pouvez voir quelle méthode de tri par mot-clé les visiteurs utilisent en fonction des données d'analyse du site Web, puis renommer et télécharger à nouveau l'image. Une correspondance exacte des recherches des clients est, bien sûr, meilleure, mais je pense que tant que l'image du produit peut être décrite avec précision et que l'ordre des mots est logique, c'est suffisant.
En fait, non seulement pour Shopify, mais toute image doit être renommée de cette manière avant le téléchargement, et cela devrait être une habitude.
Tips: When naming images, use “-” instead of spaces between words, otherwise, spaces will be replaced by “%20” after the image is uploaded to the server. For example, “2012 Ford Mustang LX Red.jpg” will become “2012%20Ford%20Mustang%20LX%20Red.jpg”.
De plus, si vous avez de nombreuses images à modifier, vous pouvez essayer d'utiliser un outil de renommage de fichiers par lots pour le faire.
ALT est l'abréviation du mot anglais « Alternate », qui signifie échange ou remplacement. L'attribut ALT d'une image est un attribut nécessaire de l'image. Il est utilisé pour remplacer l'image à afficher dans le navigateur lorsque l'image ne peut pas être affichée ou que l'utilisateur désactive l'affichage de l'image. Supposons que l'image ne puisse pas être visualisée pour les raisons suivantes :
Lors de l'ajout d'une image, la valeur de l'attribut ALT de l'image est définie comme « Tulipe ». Lorsque les utilisateurs ouvrent le navigateur pour naviguer, l'affichage normal est une image d'une tulipe. Si l'image ne peut pas être ouverte en raison de problèmes de vitesse du réseau, le contenu affiché à la position de l'image est : tulipe.
À l'heure actuelle, les utilisateurs savent qu'il y a une image de tulipes ici, mais on ne peut qu'imaginer à quoi ressemble précisément l'image.
En plus d'aider les utilisateurs à comprendre le contenu de l'image lorsque celle-ci ne peut pas être ouverte, une autre fonction importante d'ALT est d'aider les moteurs de recherche à mieux comprendre le contenu de l'image. Les mots-clés d'ALT peuvent aider les moteurs de recherche à comprendre le contenu de l'image, afin que votre image puisse avoir un meilleur classement dans les moteurs de recherche, en particulier les moteurs de recherche d'images tels que Google Image. Par conséquent, lorsque nous parlons d'optimisation du référencement des images, ce que nous devons faire est d'ajouter des balises Alt à chaque image de produit.
Actuellement, une tendance populaire dans l'affichage des images de produits est de prendre des photos détaillées du produit sous différents angles. Par conséquent, lorsque vous remplissez l'attribut Alt de l'image, essayez de remplir une balise Alt différente pour chaque image. Par exemple, pour l'image 2012-Ford-Mustang-LX-Red-Leather-Interior-Trim.jpg, utilisez la balise Alt : alt = « 2012 Ford Mustang LX Red Leather Interior Trim ». Pour une autre image 2012-Ford-Mustang-LX-Red-Rear-View-Air-Spoiler.jpg, utilisez la balise Alt : alt = « 2012 Ford Mustang LX Red Rear View Air Spoiler ».
Comme le montre la figure ci-dessous, cliquez sur l'image téléchargée et dans la fenêtre contextuelle, nous pouvons ajouter un « texte alternatif » pour l'image du produit. Dans le processus de configuration ALT, tout comme lors de la définition du titre et de la description du site Web Shopify, effectuez un bon travail d'exploration et de mise en page des mots clés à longue traîne pour obtenir un trafic plus précis. Actuellement, le système Shopify lui-même ne prend pas en charge l'ajout ou la modification par lots en ligne du contenu ALT, et ne peut être ajouté ou modifié qu'un par un en ouvrant chaque image, ce qui est encore assez fastidieux. Nous pouvons utiliser un tableau pour ajouter ALT par lots, ou rechercher un plugin approprié en recherchant « ALT » dans l'App Market pour ajouter ou modifier ALT par lots.
Voici quelques suggestions du site officiel de Google pour optimiser les images afin d'obtenir de meilleurs classements (extraites de certaines des suggestions que je pense personnellement plus importantes). La version complète du texte original peut être trouvée sur support.google.com/webmasters/answer/114016.
Pour augmenter la visibilité de votre contenu dans Google Images, donnez la priorité à une expérience utilisateur optimale : lors de la conception de pages Web, concentrez-vous sur les utilisateurs plutôt que sur les moteurs de recherche. Voici quelques suggestions :
Dans la section des fichiers multimédias, la première grande image affichée est l'image principale du produit. Lorsque vous appelez et affichez ces informations sur les produits sur des pages de produits non variantes, la page d'accueil, les pages de liste de produits, etc., l'image affichée par défaut est cette grande image. Nous pouvons faire glisser manuellement l'image que nous voulons définir comme image principale du produit vers la position de grande image pour remplacer l'image principale.
Dans le même temps, nous pouvons également ajuster la position de l'image ici pour modifier l'ordre d'affichage de différentes images sur le frontend de la page produit.
Nous pouvons télécharger des vidéos directement sur le backend de Shopify ou télécharger des vidéos sur YouTube ou Vimeo en premier, puis ajouter les vidéos au backend de Shopify de manière intégrée. J'ai fait un test simple, qui consiste à télécharger une vidéo d'environ 15 Mo sur Shopify et YouTube respectivement, puis à tester la vitesse d'ouverture des deux pages à l'aide de Webpagetest et PageSpeedInsight sans modifier la source vidéo. La conclusion est qu'il n'y a pratiquement aucune différence.
Bien que la vidéo que nous avons téléchargée fasse 15 Mo, lorsque les clients ouvrent la page, seule la miniature de la vidéo est chargée, et non le fichier vidéo entier. Ce n'est que lorsque le client clique sur le bouton de lecture que le système commence à charger et à lire la vidéo.
Pour télécharger une vidéo sur Shopify, la vidéo doit répondre aux exigences suivantes :
En ce qui concerne la résolution vidéo, le choix entre 480P, 720P, 1080P ou 4K est acceptable. Plus la résolution vidéo est élevée, plus la taille du fichier est importante. Cependant, lorsque les clients regardent la vidéo, si le client prend en charge le réglage de la résolution, le système décidera automatiquement de la résolution à lire en fonction de la vitesse du réseau du client. Par exemple, si nous téléchargeons une vidéo 1080P, les clients avec des vitesses de réseau lentes peuvent lire automatiquement une vidéo 480P, tandis que ceux avec des vitesses de réseau rapides peuvent lire automatiquement une vidéo 1080P.
Si nous téléchargeons la vidéo sur YouTube ou Vimeo, il n'y a pas de telles restrictions, mais la vidéo que nous téléchargeons doit être conforme aux règles de YouTube ou de Vimeo.
De la même manière que pour modifier le contenu de la balise ALT des images de produits, cliquez sur la vidéo sur la page d'édition du produit, cliquez sur le bouton Options à droite du bouton de téléchargement dans la fenêtre contextuelle d'édition vidéo, puis cliquez sur le bouton « Remplacer la miniature » pour télécharger votre propre miniature de vidéo. Notez que la taille de la miniature doit également être contrôlée. Tout en garantissant la clarté de l'image, essayez de la maintenir en dessous de 200 Ko, plus elle est petite, mieux c'est. Un fichier trop volumineux affectera la vitesse de chargement de la page du site Web.
Si vous insérez une vidéo dans les produits Shopify en l'intégrant, seuls les liens YouTube ou Vimeo sont actuellement pris en charge. En comparant les deux, les recommandations de vidéos associées de YouTube inciteront les utilisateurs à quitter notre site Web, Vimeo nous offre donc une meilleure expérience.
La version gratuite de Vimeo offre une prise en charge vidéo limitée et des paramètres de style de lecteur limités. Si les conditions le permettent, envisagez d'utiliser la version payante.
Par rapport aux images et aux vidéos, les modèles 3D de produits peuvent montrer aux clients plus d'informations et de détails sur les produits. Shopify prend en charge les types de fichiers de modèles 3D GLB et USDZ, avec des tailles de fichier ne dépassant pas 500 Mo. Si le fichier de modèle 3D est supérieur à 15 Mo, Shopify optimisera la structure et la texture du modèle pour empaqueter le fichier 3D dans un délai plus court.
J'ai téléchargé un fichier GLB d'une taille de 5 Mo en ligne (sketchfab.com). J'ai vérifié le flux de chargement de la page en cascade dans WebPageSpeed, et comme dans la vidéo, la page n'a chargé qu'une miniature du modèle 3D généré automatiquement par le système. Ainsi, bien que le fichier GLB soit volumineux, il n'a pas d'impact particulièrement important sur la vitesse d'ouverture de la page Web. Ce n'est que lorsque les clients cliquent sur le bouton Parcourir du modèle que le système commence à télécharger et à charger ce fichier de 5 Mo sur la page.
En plus de remplacer librement les vignettes comme les vidéos, nous pouvons également ajuster la luminosité, la couleur d'arrière-plan, la perspective par défaut et l'environnement d'éclairage du modèle 3D via le bouton « Modifier le fichier ». La fonction est assez puissante.
Le coût de création de modèles 3D n'est pas bon marché, mais s'il s'agit d'un seul produit ou si le nombre de produits vendus sur l'ensemble du site Web n'est pas important, vous pouvez envisager de créer des modèles 3D pour les produits principaux ou tous les produits afin d'afficher de manière plus complète les détails et les avantages du produit et d'améliorer le taux de conversion des commandes.
Je n'ai pas encore utilisé de modèles 3D. Les personnes intéressées peuvent se rendre sur le marché Shopify Experts ou sur Fiverr pour trouver des prestataires de services afin d'obtenir un devis et voir approximativement combien cela coûte de réaliser des modèles 3D de leurs produits. Si cela correspond au budget, cela vaut la peine d'investir.