Mise en ligne d'images

Vous pouvez utiliser différents types d’images sur votre boutique en ligne, y compris le logo de votre entreprise, des images de produits, des diaporamas, des bannières et des images d’articles de blog. Shopify offre la possibilité de transformer dynamiquement vos images grâce aux options de recadrage, en plus de vérifier automatiquement que le meilleur format d’image possible est utilisé pour les images postées sur votre boutique en ligne.

Remarque

Les images n’ont pas besoin d’être compressées manuellement avant d’être mises en ligne. Importez toujours des images de la meilleure qualité possible.

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 aussi importer des images sur la page Fichiers de votre interface administrateur Shopify. Pour en savoir plus, consultez la section Mise en ligne de fichiers sur votre site web.

Étapes

1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
2. Cliquez sur Personnaliser à côté du thème que vous souhaitez personnaliser.
3. Utilisez le menu déroulant pour sélectionner le modèle que vous souhaitez modifier.
4. Dans la barre latérale de l'éditeur de thème, cliquez sur la section à laquelle vous souhaitez ajouter une image.

5. Cliquez sur Sélectionner une image, puis effectuez l’une des actions suivantes :

   • Pour mettre une image en ligne depuis votre ordinateur, cliquez sur Mettre en ligne.
   • Pour utiliser une image provenant de la banque d'images gratuites Burst, cliquez sur Parcourir les images gratuites.

6. Cliquez sur une image pour voir un aperçu de celle-ci dans votre thème. Après avoir trouvé une image que vous souhaitez utiliser, cliquez sur Select (Sélectionner).

7. Cliquez sur Enregistrer.

Ajouter une image en utilisant des champs méta

Si des champs méta ont été configurés pour vos images, vous pouvez utiliser le sélecteur de source dynamique pour ajouter une image. Pour plus d’informations sur les champs méta et les formats d’image pris en charge, consultez Types et valeurs de contenu de champs méta.

Bannières avec images

Vous pouvez créer des bannières avec image avec les éléments suivants :

• une ou deux images
• texte
• un bouton d’action

Sur les ordinateurs de bureau, les images de bannières s’affichent côte à côte. Ce format n’étant pas adapté aux appareils mobiles, vous pouvez placer les images de vos bannières l’une au-dessus de l’autre en sélectionnant l’option Empiler les images sur mobile dans les paramètres de thème des bannières avec images. Pour plus d’informations sur les bannières avec images et les diaporamas, consultez les bonnes pratiques pour les diaporamas et les bannières avec images.

Définir une mise au point sur une image de thème

Vous pouvez utiliser des mises au point pour définir la partie la plus importante d’une image sur le thème de 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 apparaissent toujours dans le cadre, même si vous avez un thème qui adapte votre image selon la mise en page. Les mises au point vous donnent plus de contrôle sur la manière dont votre image s’affiche lorsque les thèmes utilisent différents rapports d’aspect et sur des tailles d’écran différentes.

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

La configuration d’une mise au point est possible dans les versions suivantes des thèmes gratuits de Shopify :

• Version Craft 5.0.0 ou ultérieure
• Version Crave 5.0.0 ou ultérieure
• Colorblock version 3.0.0ou supérieure
• Dawn version 7.0.0 ou supérieure
• Actualiser la version 2.0.0 ou supérieure
• Ride version 3.0.0ou supérieure
• Sense version 5.0.0 ou supérieure
• Studio version 4.0.0 ou supérieure
• Taste version 4.0.0 ou supérieure

Si vous utilisez un thème tiers, vérifiez la documentation de votre thème pour voir si celui-ci prend en charge l’utilisation de mises au point.

Ajouter une mise au point à une image

Vous pouvez ajouter une mise au point à une image dans votre section Fichiers et depuis votre éditeur de thème. Si vous ajoutez une mise au point sur une image, puis utilisez l’image en plusieurs endroits, elles utilisent toutes la même mise au point.

Vous ne pouvez ajouter une mise au point qu’aux images de thème. Vous ne pouvez pas ajouter de mise au point aux images de produit, de blog ou de collection.

Bureau

Étapes

1. Dans l’éditeur de thème, cliquez sur une section ou un bloc contenant une image.
2. Cliquez sur Modifier sur l’image.
3. Cliquez sur Ajouter une mise au point.
4. Cliquez sur le cercle bleu et faites-le glisser, ou cliquez sur la partie la plus importante de l’image pour définir votre mise au point.
5. Cliquez sur Done (Terminé).

iPhone

Étapes

1. Dans l'éditeur de thème, cliquez sur une section ou un bloc associés à une image.
2. Appuyez sur Modifier sur l’image.
3. Appuyez sur Ajouter une mise au point.
4. Appuyez sur la partie la plus importante de l’image pour définir la mise au point.
5. Appuyez sur Terminé.

Android

Étapes

1. Dans l'éditeur de thème, cliquez sur une section ou un bloc associés à une image.
2. Appuyez sur Modifier sur l’image.
3. Appuyez sur Ajouter une mise au point.
4. Appuyez sur la partie la plus importante de l’image pour définir la mise au point.
5. Appuyez sur Terminé.

Remarque

Vous pouvez déplacer une mise au point en ouvrant à nouveau l’image et en cliquant sur une autre zone de l’image pour définir une nouvelle mise au point.

Supprimer une mise au point

Bureau

Étapes

1. Dans l’éditeur de thème, cliquez sur une section ou un bloc contenant une image.
2. Appuyez sur Modifier sur l’image.
3. Cliquez sur Supprimer la mise au point.
4. Cliquez sur Done (Terminé).

iPhone

Étapes

1. Dans l'éditeur de thème, cliquez sur une section ou un bloc associés à une image.
2. Appuyez sur Modifier sur l’image.
3. Appuyez sur Supprimer la mise au point.
4. Appuyez sur Terminé.

Android

Étapes

1. Dans l'éditeur de thème, cliquez sur une section ou un bloc associés à une image.
2. Appuyez sur Modifier sur l’image.
3. Appuyez sur Supprimer la mise au point.
4. Appuyez sur Terminé.

Remarque

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.

Formats d'image

Shopify prend en charge les formats d'image suivants :

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

Remarque

Shopify détecte automatiquement les formats d’image pris en charge par le navigateur de votre client, puis affiche automatiquement l’image dans le meilleur format disponible. Vous pouvez en savoir plus sur les capacités de transformation d’image sur Shopify en visitant : https://cdn.shopify.com/

Quand utiliser des images au format 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. JPEG a également une compression avec perte, ce qui peut aider à garder courte la durée de chargement des pages sans perte notable de qualité d'image.

Utilisez le format JPEG pour les types d'images suivants :

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

Quand utiliser des images au format PNG ¨¨?

Les images PNG sont idéales pour les graphiques et les icônes en raison de leurs couleurs plates et sans dégradés. Le format PNG prend également en charge la transparence.

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 que le navigateur web d’acheteurs prend en charge les formats d’images modernes tels que WebP ou le format de fichier image AV1 (AVIF), Shopify affichera votre image 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 de téléchargement

Les téléchargements d'images vers Shopify sont soumis à des restrictions en termes de mégapixels et de taille de fichier (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 :

• 25 mégapixels
• 20 mégaoctets

Pour trouver les mégapixels de votre image, vous pouvez utiliser l’équation suivante : (pixel width x pixel height)/1,000,000. Par exemple, une image avec une résolution de 4900x6930 serait de 33,9 mégapixels selon l’équation : (4900x6930)/1,000,000 = 33.9 MP.

Remarque

Les images et les tailles de fichiers sont différentes pour mettre en ligne des images de produit.

Profils de couleurs

Lorsque vous affichez une image sur votre boutique en ligne, les couleurs de l'image peuvent différer de celles de l'original que vous avez mis en ligne dans Shopify. Cela peut se produire lorsqu'une image a un profil de couleur consistant en un ensemble de données stockées dans un fichier avec une extension .ICC ou .ICM. Les profils de couleur sont souvent intégrés à des images pour normaliser la façon dont les couleurs apparaissent sur 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 plusieurs raisons :

• 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 mise en ligne n'inclut pas de profil de couleur, sRGB (le profil de couleur le plus courant utilisé pour afficher des images sur le web) est pris en charge par le navigateur web. Cela garantit que vos images sont identiques sur tous les principaux navigateurs et appareils.
• Les profils de couleur peuvent occuper une grande quantité d'espace disque, ce qui peut entraîner de longues durées de chargement.

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.

Supprimer un profil de couleur à l'aide d'Adobe Illustrator ou d'Adobe Photoshop

Pour supprimer un profil de couleur à l'aide d'Adobe Illustrator ou d'Adobe Photoshop :

1. Cliquez sur Modifier > Attribuer un profil.

2. Sélectionnez Ne pas gérer les couleurs de ce document.

3. Cliquez sur OK.

Supprimer un profil de couleur à l'aide d'Adobe InDesign

Pour supprimer un profil de couleur à l'aide d'Adobe InDesign :

1. Cliquez sur Modifier > Attribuer un profil.

2. Pour les profils RVB et CMJN, sélectionnez Annuler (Utiliser l'espace de travail actuel).

3. Cliquez sur OK.

Pour plus d'informations, vous pouvez consulter la documentation d'Adobe sur les profils de couleurs.

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 un de ces thèmes ou si vous avez un grand diaporama ou une image de fond, il est important de comprendre quels types d'images fonctionneront 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.

Conseils

Pour vous assurer que vos images se marient bien à votre thème, voici quelques éléments à garder à l'esprit :

• 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 vers vos diaporamas.

• 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 coupées à gauche et à droite lorsque l’appareil utilisé pour les afficher est sur un écran de grande taille (comme un téléphone mobile ou une tablette). 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 hautes peuvent être recadrées à gauche et à droite lorsque l’appareil utilisé pour les afficher est équipé d'un écran large (comme un ordinateur portable ou un ordinateur de bureau). Dans l’exemple ci-dessous, si les chaussures sont la partie la plus importante de l’image, vous pouvez placer la mise au point au bas de l’image pour empêcher qu'elle soit recadrée :