Chargement des images

Vous pouvez utiliser différents types d’images, tels que le logo de votre entreprise, les images de produit, les diaporamas, les bannières et les images d’article de blog. Vous pouvez également transformer vos images avec des actions de recadrage et de redimensionnement, et personnaliser les paramètres de vos supports multimédias dans votre thème pour modifier la bordure ou l’ombre de tous les supports multimédias affichés sur votre boutique.

Pour afficher les images sur votre boutique en ligne exactement comme vous le souhaitez, vous devez utiliser le bon format d’image. Les images sont automatiquement optimisées pour votre boutique en ligne avec le Réseau de diffusion de contenu (CDN) de Shopify.

Charger une image dans l’éditeur de thème

Vous pouvez ajouter des images à votre thème dans l’éditeur de thème. Vous pouvez également charger des images dans la section Contenu > Fichiers de votre interface administrateur Shopify. Pour en savoir plus, consultez la page Chargement et gestion des fichiers.

Étapes :

Ajouter des images à l’aide de champs méta

Si vous avez configuré des champs méta pour vos images, vous pouvez utiliser le sélecteur de source dynamique pour ajouter une image à votre boutique en ligne. Pour en savoir plus sur les champs méta et les formats d’image pris en charge, consultez la page Ajouter des valeurs aux champs méta.

Définir un point focal sur une image

Vous pouvez utiliser les points focaux pour définir la partie la plus importante d’une image sur votre boutique en ligne. Lorsque vous définissez un point focal sur une image, vous en faites la zone de mise au point. Les points focaux s’affichent toujours dans le cadre, même si votre thème recadre votre image pour l’adapter à la mise en page. Les points focaux vous donnent plus de contrôle sur la façon dont votre image s’affiche sur des écrans de tailles différentes et dans les cas où les thèmes utilisent des rapports d’aspect différents.

Vous ne pouvez avoir qu’un seul point focal par image, mais vous pouvez le modifier ou le supprimer à tout moment.

Compatibilité des points focaux avec les thèmes gratuits de Shopify

Vous pouvez définir un point focal sur les versions suivantes des thèmes gratuits de Shopify :

• Tous les thèmes de la famille Horizon
• Colorblock version 3.0.0 et versions ultérieures
• Craft version 5.0.0 et versions ultérieures
• Crave version 5.0.0 et versions ultérieures
• Dawn version 7.0.0 et versions ultérieures
• Origin version 1.0.0 et versions ultérieures
• Publisher version 1.0.0 et versions ultérieures
• Refresh version 2.0.0 et versions ultérieures
• Ride version 3.0.0 et versions ultérieures
• Rise version 1.0.0 et versions ultérieures
• Sense version 5.0.0 et versions ultérieures
• Spotlight version 0.0.1 et versions ultérieures
• Studio version 4.0.0 et versions ultérieures
• Taste version 4.0.0 et versions ultérieures
• Trade version 1.0.0 et versions ultérieures

Si vous utilisez un thème tiers, consultez la documentation de votre thème pour savoir s’il prend en charge l’utilisation de points focaux.

Ajouter un point focal à une image

Si vous ajoutez un point focal à une image et que vous utilisez ensuite cette image à plusieurs endroits sur votre boutique en ligne, le même point focal s’applique partout où vous l’utilisez.

Selon la façon dont votre thème recadre et redimensionne vos images, il se peut que le point focal ne soit pas toujours centré visuellement.

Étapes :

1. Cliquez sur une image à partir de l’un des emplacements suivants dans votre interface administrateur Shopify :
   • Dans la section Contenu > Fichiers.
   • Dans l’éditeur de thème.
   • Dans la section Multimédia de vos fiches de produits, dans la section Produits.
   • Dans l’éditeur d’e-mails de Shopify Messaging.
   • Dans la section Champs méta de toute ressource qui possède un champ méta de type Référence de fichier pour ajouter une image.
2. Pour sélectionner la partie de l’image où vous souhaitez définir un point focal, cliquez sur l’image ou faites glisser le point bleu.
3. Cliquez sur Enregistrer.

Supprimer un point focal d’une image

Étapes :

1. Cliquez sur une image à partir de l’un des emplacements suivants dans votre interface administrateur Shopify :
   • Dans la section Contenu > Fichiers.
   • Dans l’éditeur de thème.
   • Dans la section Multimédia de vos fiches de produits, dans la section Produits.
   • Dans l’éditeur d’e-mails de Shopify Messaging.
   • Dans la section Champs méta de toute ressource qui possède un champ méta de type Référence de fichier pour ajouter une image.
2. Cliquez sur Supprimer.
3. Cliquez sur Enregistrer comme nouveau.

Formats d’image

Les formats d’image suivants sont pris en charge :

• JPEG
• JPEG progressif
• PNG
• GIF
• HEIC
• WebP

Utilisation des images JPEG

Les images JPEG sont idéales pour les photographies et autres images fixes aux couleurs complexes. Le format JPEG possède une palette de millions de couleurs. Le format JPEG utilise également une compression avec perte, ce qui peut aider à maintenir des temps de chargement de page rapides sans perte de qualité d’image notable. Utilisez le format JPEG pour les types d’images suivants :

• produits
• bannières ou diaporamas
• pages et articles de blog

Utilisation des images PNG

Les images PNG sont idéales pour les graphiques et les icônes aux couleurs plates et sans dégradé. Le format PNG prend également en charge la transparence des images. Utilisez le format PNG pour les types d’images suivants :

• logos
• icônes
• bordures et encadrements

Compression d’image et sélection de format automatiques

Les images ne sont pas compressées lorsque vous les chargez dans l’interface administrateur Shopify, ce qui permet de conserver leur qualité d’origine. Cependant, les opérations suivantes peuvent se produire pour que les temps de chargement de page restent rapides pour vos clients :

• Lorsque les images sont diffusées par le biais du thème de votre boutique, il est possible qu’elles subissent une compression pour les images de haute qualité
• Shopify détermine automatiquement le meilleur format de fichier possible à utiliser lors de la diffusion de vos images
• Lorsque le navigateur web d’un client prend en charge les formats d’image modernes tels que WebP et AVIF (AV1 Image File Format), vos images sont diffusées dans ces formats
• Les GIF sont automatiquement convertis au format WebP animé pour améliorer la performance en réduisant la taille du fichier

Pour obtenir la meilleure qualité d’image, tenez compte des actions suivantes :

• Chargez des images de résolution supérieure, jusqu’à 5 000 px x 5 000 px ou 25 mégapixels
• Choisissez des types d’images avec une perte de qualité moins importante, tels que PNG, pour les dessins au trait, le texte et les graphiques iconiques avec transparence
• Utilisez le format JPEG pour les images de produits ou les diaporamas
• Les fichiers SVG sont pris en charge, mais ils présentent des limitations. Il est impossible de les transformer (redimensionnement, recadrage, etc.) sans demander un format rastérisé (JPEG, WebP, PNG)

Les autres types de fichiers tels que PSD (document Photoshop), TIFF (Tagged Image File Format) et BMP (Bitmap) sont acceptés, mais ils seront convertis en JPEG/PNG lors du chargement.

Limites de chargement d’images

Les chargements d’images sur Shopify sont soumis à des restrictions en termes de mégapixels (Mpx) et de taille de fichier, qui se mesure en mégaoctets (Mo). Les mégapixels sont utilisés pour indiquer le nombre de millions de pixels qui composent une image. Les mégaoctets sont utilisés pour indiquer le nombre de millions d’octets de mémoire ou d’espace disque qu’une image occupe.

Les images chargées sur Shopify ne peuvent pas dépasser l’une des limites suivantes :

• 20 mégapixels
• 20 mégaoctets

Pour trouver le nombre de mégapixels de votre image, vous pouvez utiliser l’équation suivante :

(largeur en pixels x hauteur en pixels)/1 000 000

Par exemple, une image avec une résolution de 4 900 px par 6 930 px correspond à 33,9 mégapixels sur la base de l’équation : (4900x6930)/1 000 000 = 33,9 Mpx.

Profils de couleurs des images

Lorsque vous affichez une image sur votre boutique en ligne, ses couleurs peuvent être différentes de celles de l’image d’origine que vous avez chargée sur Shopify. Cela peut se produire lorsqu’une image a un profil de couleurs, qui est un ensemble de données stockées dans un fichier avec une extension .ICC ou .ICM.

Les profils de couleurs sont souvent intégrés aux images pour aider à normaliser la façon dont les couleurs s’affichent sur différents appareils. Lorsque les images sont affichées sur votre boutique en ligne, leurs profils de couleurs sont supprimés.

Les profils de couleurs sont supprimés pour les raisons suivantes :

• Tous les appareils ne sont pas capables de lire les profils de couleurs .ICC ou .ICM. Par conséquent, le fait de les conserver peut entraîner des incohérences dans les couleurs des images d’un appareil à l’autre.
• Lorsqu’une image chargée n’inclut pas de profil de couleurs, le navigateur web utilise par défaut le profil sRGB, qui est le profil de couleurs le plus courant pour afficher des images sur le web. Cela garantit que vos images s’affichent de la même manière sur tous les principaux navigateurs web et appareils.
• Les profils de couleurs peuvent occuper beaucoup d’espace disque, ce qui peut entraîner des temps de chargement de page plus longs.

Supprimer le profil de couleurs d’une image

Vous pouvez supprimer le profil de couleurs de votre image en l’enregistrant sans celui-ci avant de la charger sur Shopify. Ce processus varie en fonction de votre programme de retouche d’images.

Consultez la documentation Adobe sur la façon d’attribuer ou supprimer un profil de couleurs (Illustrator, Photoshop) et d’attribuer ou supprimer un profil de couleurs (InDesign).

Bonnes pratiques pour les diaporamas, les bannières d’images et les images pleine largeur

De nombreux thèmes Shopify proposent de grandes images ou des diaporamas qui s’adaptent à la hauteur de votre navigateur ou à la taille de votre écran.

Si vous utilisez l’un de ces thèmes ou si vous avez un grand diaporama ou une grande image de fond, vous devez comprendre quels types d’images s’affichent le mieux.

Comme les grandes images ne peuvent pas s’adapter à tous les appareils, Shopify n’affiche parfois qu’une partie de l’image en fonction de l’appareil que vous utilisez. Si votre diaporama d’images contient beaucoup de grandes images, il se peut que certaines parties des images ne soient pas visibles.

Considérations relatives à l’utilisation d’images pour les diaporamas ou les bannières d’images

Pour vous assurer que vos images fonctionnent bien avec votre thème, gardez les points suivants à l’esprit :

• Les images que vous utilisez pour les diaporamas ou les arrière-plans ne doivent pas contenir de texte. Si le texte fait partie de l’image elle-même, il risque d’être déplacé, recadré ou ajusté en fonction de votre thème. Utilisez l’éditeur de thème pour ajouter du texte et des liens à vos diaporamas et arrière-plans.

• Pour les images que vous utilisez dans les diaporamas ou comme arrière-plans, choisissez des images simples afin que le texte superposé soit facile à lire.

Images larges sur des écrans hauts

Les images larges peuvent être recadrées à gauche et à droite lorsque l’appareil utilisé pour les visualiser a un écran haut, comme un téléphone mobile ou une tablette en mode portrait. Dans l’exemple ci-dessous, si les personnes constituent la partie la plus importante de l’image, vous pouvez placer un point focal sur le côté droit de l’image.

Images hautes sur des écrans larges

Les images hautes peuvent être recadrées en haut et en bas lorsque l’appareil utilisé pour les visualiser a un écran large, comme un ordinateur portable ou un moniteur d’ordinateur de bureau. Dans l’exemple ci-dessous, si les chaussures constituent la partie la plus importante de l’image, vous pouvez placer un point focal en bas de l’image.

Comportement de chargement de l’image

Lorsque vous consultez une page de votre boutique en ligne, vous remarquerez peut-être que les images apparaissent d’abord légèrement floues, puis qu’elles deviennent nettes après un instant. Il s’agit d’un comportement normal qui permet d’améliorer la vitesse de chargement de votre boutique et l’expérience utilisateur.

Les thèmes Shopify utilisent une technique appelée chargement différé, qui charge d’abord une version plus petite d’une image pendant que l’image en pleine résolution se charge en arrière-plan. Cela permet aux clients de consulter le contenu immédiatement, sans avoir à attendre que les grandes images soient entièrement chargées. Le processus prend généralement moins d’une seconde, mais il donne l’impression que votre boutique se charge plus rapidement.

Cette technique est particulièrement avantageuse pour les boutiques qui contiennent beaucoup d’images, car elle améliore considérablement le temps de chargement initial de la page et fournit un retour visuel immédiat aux clients.

Résolution des problèmes liés aux images