Mise en ligne d'images

Vous pouvez utiliser différents types d'images dans votre boutique en ligne, notamment le logo de votre entreprise, des images de produits, des diaporamas, des bannières et des images d'articles de blog. Selon comment et où vous souhaitez utiliser une image, il peut être préférable de la mettre en ligne dans une certaine taille ou un certain format.

Formats d'image

Shopify prend en charge les formats d'image suivants :

  • JPEG ou JPG
  • JPEG progressif
  • PNG
  • GIF

Si vous mettez en ligne une image qui n'est pas dans un format pris en charge, Shopify la convertit au format JPEG ou PNG. La plupart des formats d'image sont convertis en JPEG, et les fichiers SVG sont convertis au format PNG.

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 coupures.

Taux de compression

Pour réduire les temps de chargement, Shopify compresse les images lorsqu'elles sont affichées sur votre boutique en ligne. Comprimer une image signifie réduire sa taille de fichier pour accélérer le chargement de la page. Avec la compression, plus d'images peuvent être stockées dans une quantité donnée d'espace disque ou mémoire. De plus, le temps nécessaire pour accéder aux images est considérablement réduit. La compression peut entraîner une modification de la qualité de l'image, en fonction du format, de la taille et de la qualité d'origine de votre image.

Les niveaux de qualité d'image de Shopify après compression sont les suivants :

  • JPEG : entre 65 et 90
  • PNG : 90
  • GIF : pas de changement de qualité

Pour les images JPEG, le niveau de qualité d'une image compressée dépend de la qualité de l'image JPEG d'origine ainsi que de la taille de sortie :

Qualité d'origine Taille de sortie Qualité de sortie
86 ou plus Hauteur ou largeur de 1 024 px ou plus 85
65 - 85 Hauteur ou largeur de 1 024 px ou plus Qualité d'origine
64 ou moins Hauteur ou largeur de 1 024 px ou plus 65
76 ou plus Hauteur et largeur inférieures à 1 024 px 75
65 - 75 Hauteur et largeur inférieures à 1 024 px Qualité d'origine
64 ou moins Hauteur et largeur inférieures à 1 024 px 65

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 :

  • 20 mégapixels
  • 20 mégaoctets

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 Supprimer (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.

Meilleures pratiques pour les diaporamas et les images en pleine largeur

De nombreux thèmes de Shopify comportent de grandes images ou des diaporamas qui s'adaptent à la hauteur de votre navigateur (Boundless et Brooklyn) ou s'adaptent à la taille de votre écran (Venture).

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 :

  • Le « point focal » de l'image, ou la partie que vous voulez que les clients regardent, devrait se trouver au centre. Ainsi, si votre thème n'affiche pas les bords de l'image, la partie importante sera toujours visible.

  • 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 équipé d'un écran de grande taille (comme un téléphone mobile ou une tablette) :

alt

De grandes images sur des écrans larges

Les images larges peuvent être coupées à gauche et à droite lorsque l'appareil utilisé pour les afficher est équipé d'un écran de grande taille (comme un ordinateur ou un ordinateur portable) :

alt

Prêt(e) à commencer à vendre avec Shopify ?

Essayez gratuitement