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).
Sur cette page
- Importer une image dans l’éditeur de thème
- Définir une mise au point sur une image
- Formats d'image
- Compression automatique d’image et sélection du format
- Limites d’importation d’images
- Profils de couleurs d’images
- Bonnes pratiques pour les diaporamas, les bannières avec images et les images en pleine largeur
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 :
Bureau
Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
Cliquez sur Personnaliser pour le thème dans lequel vous souhaitez importer une image.
Facultatif : si vous souhaitez ajouter une image à une page de votre boutique autre que la page d’accueil, cliquez sur le menu déroulant de la page d’accueil, puis sélectionnez le modèle que vous souhaitez modifier.
Dans la barre latérale de l’éditeur de thème, cliquez sur la section ou bloc auquel vous souhaitez ajouter une image.
Dans le champ Nom, procédez de l’une des manières suivantes :
Pour mettre en ligne une image depuis votre ordinateur, procédez comme suit :
- Cliquez sur Sélectionner une image > Ajouter des images.
- Recherchez et ouvrez l’image sur votre ordinateur.
- Cliquez sur Terminé.
Pour utiliser une image gratuite de Burst, procédez comme suit :
- Cliquez sur Explorer les images gratuites.
- Trouvez une image que vous souhaitez utiliser.
- Cliquez sur Sélectionner.
Cliquez sur Enregistrer.
iPhone
Depuis l’application Shopify, appuyez sur le bouton
.Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
Appuyez sur Gérer tous les thèmes.
Appuyez sur Personnaliser pour le thème sous lequel vous souhaitez importer une image.
Facultatif : si vous souhaitez ajouter une image à une page de votre boutique autre que la page d’accueil, appuyez sur le menu déroulant Page d’accueil, puis sélectionnez le modèle que vous souhaitez modifier.
Appuyez sur Sections, puis appuyez sur la section ou le bloc auquel qui vous souhaitez ajouter une image.
Dans le champ Nom, procédez de l’une des manières suivantes :
Pour importer une image à partir de votre appareil, procédez comme suit :
- Appuyez sur Sélectionner l’image > Ajouter des images.
- Recherchez et ouvrez l’image sur votre appareil.
- Appuyez sur Terminé.
Pour utiliser une image gratuite de Burst, procédez comme suit :
- Appuyez sur Explorer les images gratuites.
- Trouvez une image que vous souhaitez utiliser.
- Appuyez sur Terminé.
Appuyez sur Enregistrer.
Android
Depuis l’application Shopify, appuyez sur le bouton
.Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
Appuyez sur Gérer tous les thèmes.
Appuyez sur Personnaliser pour le thème sous lequel vous souhaitez importer une image.
Facultatif : si vous souhaitez ajouter une image à une page de votre boutique autre que la page d’accueil, appuyez sur le menu déroulant Page d’accueil, puis sélectionnez le modèle que vous souhaitez modifier.
Appuyez sur Sections, puis appuyez sur la section ou le bloc auquel qui vous souhaitez ajouter une image.
Dans le champ Nom, procédez de l’une des manières suivantes :
Pour importer une image à partir de votre appareil, procédez comme suit :
- Appuyez sur Sélectionner l’image > Ajouter des images.
- Recherchez et ouvrez l’image sur votre appareil.
- Appuyez sur Terminé.
Pour utiliser une image gratuite de Burst, procédez comme suit :
- Appuyez sur Explorer les images gratuites.
- Trouvez une image que vous souhaitez utiliser.
- Appuyez sur Terminé.
Appuyez sur ✓.
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 :
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.
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.
Cliquez sur Enregistrer.
Supprimer une mise au point d’une image
Étapes :
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.
Cliquez sur Supprimer.
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 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 (MP) et de taille de fichier, mesurée en mégaoctets (Mo). 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
.ICCou.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 couleur
sRGB, 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.
