Mise en ligne d'images

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

Pour afficher dans votre boutique en ligne les images selon la manière souhaitée, vous devez utiliser le rapport d’image correct. Les images sont automatiquement optimisées pour votre boutique en ligne grâce à la fonction Shopify Content Delivery Network (CDN).

Importer 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 importer des images dans la section Contenu > Fichiers de votre interface administrateur Shopify. Pour en savoir plus, reportez-vous à l’importation et à la gestion de fichiers.

Étapes

Ajout d’images à l’aide de champs méta

Si vous avez configuré des champs méta pour vos images, vous pouvez utiliser le sélecteur dynamique de sources pour ajouter une image à votre boutique en ligne. Pour plus d’informations sur les champs méta et les formats d’image pris en charge, reportez-vous à l’ajout de valeurs aux champs méta.

Définir une mise au point sur une image

Vous pouvez utiliser les mises au point pour définir la partie la plus importante d’une image figurant sur votre boutique en ligne. Lorsque vous définissez une mise au point sur une image, vous en faites la zone de mire. Les mises au point s’affichent toujours dans le cadre, y compris si vous avez un thème qui adapte votre image selon la mise en page. Les mises au point vous permettent un plus grand contrôle sur l’affichage de votre image selon la taille de l’écran, et dans les cas où les thèmes utilisent des rapports d’aspect différents.

Vous pouvez avoir seulement une mise au point par image, mais vous pouvez la modifier ou la supprimer à tout moment.

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

Vous pouvez définir une mise au point sur les versions suivantes des thèmes gratuits de Shopify :

• Colorblock version 3.0.0 et supérieure
• Craft version 5.0.0 et supérieure
• Crave version 5.0.0 et supérieure
• Dawn version 7.0.0 et supérieure
• Origin version 1.0.0 et supérieure
• Publisher version 1.0.0 et supérieure
• Refresh version 2.0.0 et supérieure
• Ride version 3.0.0 et supérieure
• Rise version 1.0.0 et supérieure
• Sense version 5.0.0 et supérieure
• Spotlight version 0.0.1 et supérieure
• Studio version 4.0.0 et supérieure
• Taste version 4.0.0 et supérieure
• Trade version 1.0.0 et supérieure

Si vous utilisez un thème tiers, consultez votre documentation du thème pour déterminer s’il prend en charge l’utilisation des mises au point.

Ajouter une mise au point à une image

Si vous ajoutez une mise au point à une image, puis utilisez l’image dans plusieurs endroits de votre boutique en ligne, la même mise au point s’applique partout où vous utilisez l’image.

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

Étapes

1. Cliquez sur une image provenant 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 Média de vos fiches de produits dans la section Produits.
   • Dans l’éditeur Shopify Email.
   • Dans la section Champs méta de toute ressource disposant d’un champ méta de type Référence de fichier pour l’ajout d’une image.

2. Pour sélectionner la partie de l’image sur laquelle vous souhaitez définir une mise au point, cliquez sur l’image ou faites glisser le point bleu.

3. Cliquez sur Enregistrer.

Supprimer une mise au point d’une image

Étapes

1. Cliquez sur une image provenant 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 Média de vos fiches de produits dans la section Produits.
   • Dans l’éditeur Shopify Email.
   • Dans la section Champs méta de toute ressource disposant d’un champ méta de type Référence de fichier pour l’ajout d’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
• AVIF

Utilisation d’images JPEG

Les images JPEG sont idéales pour la photographie et d’autres images fixes aux couleurs complexes. La palette du format JPEG comporte des millions de couleurs. Le format JPEG permet également une compression avec perte, contribuant ainsi à réduire les temps de chargement des pages sans perte notable de la qualité de l’image. Utilisez le format PNG pour les types d’images suivants :

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

Utilisation d’images PNG

Les images PNG sont idéales pour les graphiques et les icônes en raison de leurs couleurs unies et sans dégradés. 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 découpes

Compression automatique d’image et sélection du format

Pour réduire les temps de chargement, Shopify compresse automatiquement les images lorsqu’elles sont affichées sur votre boutique en ligne. Comprimer une image signifie réduire la taille du fichier pour accélérer le chargement de la page.

En outre, Shopify détermine automatiquement le format de fichier le plus utilisé pour l’affichage de vos images. Par exemple, lorsque nous détectons une compatibilité entre le navigateur web d’un(e) client(e) et les formats d’image modernes tels que WebP et AV1 Image File Format (AVIF), vos images sont livrées dans ces formats.

Pour améliorer les performances en réduisant la taille des fichiers, les GIF sont automatiquement convertis au format WebP animé.

Limites d’importation d’images

Les importations d’images sur Shopify sont soumis à des restrictions en termes de mégapixels et de taille de fichier, mesurée en mégaoctets. Les mégapixels sont utilisés pour indiquer combien de millions de pixels composent une image. Les mégaoctets sont utilisés pour indiquer combien de millions d’octets de mémoire ou d’espace disque occupe une image.

Les images mises en ligne sur Shopify ne peuvent dépasser ni l'une ni l'autre des limites suivantes :

• 20 mégapixels
• 20 mégaoctets

Pour trouver la valeur des mégapixels de votre image, vous pouvez utiliser l’équation suivante :

(pixel width x pixel height)/1,000,000

Par exemple, une image dont la résolution est de 4 900 px sur 6 930 px est de 33,9 mégapixels en fonction de l’équation : (4900x6930)/1,000,000 = 33.9 MP.

Profils de couleurs d’images

Lorsque vous visualisez une image sur votre boutique en ligne, les couleurs de l’image peuvent s’afficher différemment de celles de l’image originale que vous avez importée sur Shopify. Cela peut se produire lorsqu’une image présente un profil de couleur, correspondant à un ensemble de données stockées dans un fichier portant l’extension .ICC ou .ICM.

Les profils de couleur sont souvent intégrés aux images pour standardiser l’aspect des couleurs sur les différents appareils. Lorsque les images s'affichent sur votre boutique en ligne, leurs profils de couleur sont supprimés.

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

• Tous les périphériques ne peuvent pas lire les profils de couleurs .ICC ou .ICM. Par conséquent, les conserver intacts peut entraîner des incohérences dans les couleurs de l'image sur tous les périphériques.
• Lorsqu’une image importée ne contient aucun profil de couleur, le navigateur Web prend en compte le profil de couleursRGB, qui est le profil de couleur le plus couramment utilisé pour afficher les images sur le Web. Ceci garantit que vos images sont identiques sur tous les principaux navigateurs et appareils.
• Les profils de couleur peuvent occuper une grande quantité d’espace sur le disque, entraînant un allongement du temps de chargement des pages.

Supprimer le profil de couleur d'une image

Vous pouvez supprimer le profil de couleur de votre image en l'enregistrant sans le profil de couleur avant de la mettre en ligne sur Shopify. Ce processus varie en fonction de votre programme d'édition d'image.

Consultez la documentation d’Adobe sur la façon d’attribuer ou de supprimer un profil de couleur (illustrator, Photoshop) et attribuez ou supprimez un profil de couleur (InDesign).

Bonnes pratiques pour les diaporamas, les bannières avec images et les images en pleine largeur

De nombreux thèmes Shopify présentent 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 image de fond, vous devez déterminer quels types d’images s’affichent le mieux.

Parce que les grandes images ne peuvent pas tenir sur tous les appareils, Shopify affiche parfois seulement une partie de l'image en fonction de l'appareil que vous utilisez. Si votre diaporama d'images contient beaucoup de grandes images, vous constaterez que certaines parties des images ne sont pas visibles.

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

Pour vous assurer que vos images s’intègrent parfaitement à votre thème, gardez à l’esprit les points suivants :

• Les images que vous utilisez pour les diaporamas ou les fonds 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 diaporamas ou les fonds, choisissez des images simples afin de faciliter la lecture de tout texte superposé.

De larges images sur de grands écrans

Les images larges peuvent être recadrées à gauche et à droite lorsque l’appareil utilisé pour les visualiser présente un écran de grande taille, comme un téléphone portable ou une tablette en mode portrait. Dans l’exemple ci-dessous, si les gens sont la partie la plus importante de l’image, vous pouvez placer une mise au point sur le côté droit de l’image.

De grandes images sur des écrans larges

Les images de grande taille peuvent être recadrées en haut et en bas lorsque l’appareil utilisé pour les visualiser dispose d’un écran large, tel qu’un ordinateur portable ou un moniteur de bureau. Dans l’exemple ci-dessous, si les chaussures sont la partie la plus importante de l’image, vous pouvez placer une mise au point sur le côté droit de l’image.