Utiliser des images dans Align

Liens en vedette

1. Documentation Shopify sur les images
2. Documentation Shopify sur l’ajout de photos libres de droits à votre thème
3. Documentation Shopify sur l’importation d’images
4. Documentation Shopify sur la correction des couleurs des images importées
5. Photos libres de droits Burst
6. Licence d’attribution Burst
7. Éditeur de thème Shopify
8. Documentation Shopify sur les paramètres multimédias du thème
9. Documentation Shopify sur le rapport hauteur/largeur des images
10. Page Files de Shopify

Vidéos utiles

Vidéo Learn With Shopify : comment concevoir une boutique e-commerce qui convertit : stratégies éprouvées et bonnes pratiques

Vidéo Learn With Shopify : comment concevoir une boutique e-commerce qui convertit : stratégies éprouvées et bonnes pratiques

Vidéo Shopify Academy : personnaliser votre boutique

Vidéo Shopify Academy : personnaliser votre boutique

Utilisez des images de haute qualité qui mettent votre marque en valeur et restent nettes quelle que soit la taille de l’écran. Ce guide explique comment trouver ou importer des images pour votre thème Company XYZ Align, choisir des formats adaptés, définir des points focaux et préparer des bannières et des diaporamas pour des mises en page réactives.

Ressources associées

1. Conseils sur les images
2. Photos libres de droits Burst
3. Conseils sur les images de thème
4. Corriger les couleurs des images

Ajouter des photos libres de droits

Burst propose des photos libres de droits haute résolution dans un large éventail de catégories. Vous pouvez parcourir ses images depuis l’éditeur de thème Shopify et les utiliser dans les zones de votre boutique Align compatibles avec les images, comme les diaporamas, les articles de blog et les pages de produits.

Les images Burst sont disponibles sous une licence libre de droits : vous pouvez donc les utiliser et les modifier selon vos besoins. L’attribution est encouragée, mais pas obligatoire.

Ajouter une photo libre de droits

1. Ouvrez l’éditeur de thème
2. Sélectionnez la section qui contient le sélecteur d’images à mettre à jour.
3. Sélectionnez Explore free images.
4. Recherchez une image ou parcourez une catégorie.
5. Sélectionnez une image pour la prévisualiser dans Align, puis sélectionnez Select.
6. Ajustez l’apparence de l’image ou les paramètres d’animation dans la barre latérale, si disponibles.
7. Sélectionnez Save.

Importer des images

Utilisez des images pour les logos, les produits, les diaporamas, les bannières et les articles de blog. Vous pouvez recadrer et redimensionner les images, et personnaliser les paramètres multimédias de votre thème pour appliquer une bordure ou une ombre cohérente aux éléments multimédias de votre boutique.

Choisissez un rapport hauteur/largeur d’image adapté afin que chaque image s’intègre à la mise en page Align prévue.

Astuce

Importez la meilleure image possible. Il n’est pas nécessaire de compresser manuellement les images avant leur importation.

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

Vous pouvez importer des images dans l’éditeur de thème ou depuis la page Files. Pour obtenir des conseils sur la gestion des fichiers, consultez Importer des fichiers sur votre site web

1. Depuis votre interface administrateur Shopify, accédez à Online Store > Themes

2. Sélectionnez Customize à côté d’Align, ou de la copie du thème Align que vous souhaitez modifier.

3. Utilisez le menu des modèles pour choisir la page ou le modèle à mettre à jour.

4. Dans la barre latérale de l’éditeur de thème, sélectionnez la section ou le bloc qui contient l’image.

5. Sélectionnez Select Image.

   • Pour importer une image depuis votre ordinateur, sélectionnez Upload.
   • Pour choisir une photo libre de droits sur Burst, sélectionnez Explore free images.

6. Sélectionnez une image pour la prévisualiser, puis sélectionnez Select.

7. Sélectionnez Save.

Ajouter une image depuis une métachamp

Si vous disposez de métachamps pour les images, utilisez le sélecteur de source dynamique pour associer une image à un paramètre de thème. Pour connaître les formats d’image pris en charge et obtenir plus d’informations, consultez Types et valeurs de contenu des métachamps

Utiliser des bannières d’images

Les bannières d’images peuvent combiner une ou deux images avec du texte et un bouton d’action. Sur les écrans d’ordinateur, deux images de bannière apparaissent côte à côte ; sur les écrans plus petits, cette mise en page peut être difficile à consulter.

Lorsque vous utilisez deux images, activez Stack images on mobile dans les paramètres du thème de Image banner. Pour plus d’informations, consultez les bannières d’images, les diaporamas et les Bonnes pratiques pour les diaporamas et les bannières d’images

Définir un point focal d’image

Un point focal indique la zone la plus importante d’une image. Il permet de conserver cette zone dans le cadre lorsque Align recadre une image pour différentes mises en page et tailles d’écran.

Chaque image peut avoir un point focal, que vous pouvez modifier ou supprimer à tout moment. Un point focal défini sur une image s’applique partout où cette même image est utilisée.

Les points focaux sont disponibles uniquement pour les images de thème, et non pour les images de produits, d’articles de blog ou de collections.

Ajouter un point focal

Vous pouvez ajouter un point focal depuis Files ou directement dans l’éditeur de thème.

1. Dans l’éditeur de thème, sélectionnez une section ou un bloc contenant une image.
2. Sélectionnez Edit sur l’image.
3. Sélectionnez Add focal point.
4. Faites glisser le cercle bleu ou sélectionnez la zone qui doit rester visible.
5. Sélectionnez Done.

Pour déplacer le point focal ultérieurement, ouvrez à nouveau l’image et sélectionnez une nouvelle zone.

Supprimer un point focal

1. Dans l’éditeur de thème, sélectionnez une section ou un bloc contenant une image.
2. Sélectionnez Edit sur l’image.
3. Sélectionnez Remove focal point.
4. Sélectionnez Done.

Note

Selon la manière dont Align recadre et redimensionne une image, son point focal peut ne pas apparaître visuellement au centre.

Choisir un format d’image

Les formats d’image pris en charge comprennent :

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

Le format pris en charge le plus adapté est automatiquement sélectionné pour le navigateur de chaque visiteur. En savoir plus sur les fonctionnalités de transformation des images

Utiliser JPEG pour les photographies

Le format JPEG convient bien aux photographies et autres images fixes aux couleurs complexes. Sa compression avec perte peut réduire la taille du fichier tout en conservant une bonne qualité visuelle.

Utilisez JPEG pour :

• Les produits
• Les bannières et les diaporamas
• Les pages et les articles de blog

Utiliser PNG pour les éléments graphiques

Le format PNG convient bien aux éléments graphiques et aux icônes aux couleurs unies, notamment lorsque vous avez besoin de transparence.

Utilisez PNG pour :

• Les logos
• Les icônes
• Les bordures et les ornements

Comprendre l’optimisation automatique et les limites d’importation

Shopify compresse automatiquement les images pour accélérer le chargement et choisit le format de diffusion le plus adapté à chaque navigateur. Par exemple, les navigateurs compatibles peuvent recevoir des formats modernes tels que WebP ou AVIF ; les GIF sont convertis en WebP animé afin de réduire la taille du fichier.

Une image importée ne peut dépasser aucune des limites suivantes :

1. 25 mégapixels
2. 20 mégaoctets

Calculez les mégapixels avec (pixel width x pixel height)/1,000,000. Par exemple, une image de 4900 × 6930 fait 33.9 MP : (4900x6930)/1,000,000 = 33.9 MP.

Note

Les images de produits sont soumises à des limites d’importation différentes pour les images et la taille des fichiers.

Gérer les profils colorimétriques

Les couleurs peuvent sembler différentes après l’importation lorsqu’une image contient un profil colorimétrique .ICC ou .ICM. Shopify supprime ces profils afin que les images s’affichent de manière plus cohérente sur les appareils et les navigateurs, et pour éviter d’augmenter la taille des fichiers.

Lorsqu’une image ne possède aucun profil colorimétrique, les navigateurs utilisent sRGB, le profil colorimétrique web le plus courant. Si la correspondance exacte des couleurs est importante, enregistrez l’image sans son profil intégré avant de l’importer.

Supprimer un profil colorimétrique dans Adobe Illustrator ou Photoshop

1. Sélectionnez Edit > Assign Profile.
2. Sélectionnez Don’t Color Manage This Document.
3. Sélectionnez OK.

Supprimer un profil colorimétrique dans Adobe InDesign

1. Sélectionnez Edit > Assign Profile.
2. Pour RGB Profile et CMYK Profile, sélectionnez Discard (Use Current Working Space).
3. Sélectionnez OK.

Pour plus d’informations, consultez la documentation Adobe sur les profils colorimétriques

Préparer des diaporamas, des bannières et des images pleine largeur

Les grandes images et les diaporamas s’adaptent à la taille d’écran disponible ; certaines parties d’une image peuvent donc être recadrées. Anticipez ce recadrage avant d’ajouter des images aux mises en page Align pleine largeur.

1. Évitez d’intégrer du texte dans l’image elle-même. Utilisez l’éditeur de thème pour ajouter du texte et des liens afin qu’ils s’adaptent à la mise en page.

2. Choisissez des images simples lorsque du texte est placé par-dessus, afin de faciliter sa lisibilité.

3. Définissez un point focal sur le sujet important.

   • Les images larges peuvent être recadrées à gauche et à droite sur les écrans hauts.
   • Les images hautes peuvent être recadrées en haut et en bas sur les écrans larges.

Notes d’utilisation

1. Choisissez d’abord la mise en page. Faites correspondre le rapport hauteur/largeur de l’image à la section Align dans laquelle elle apparaîtra.
2. Protégez le sujet principal. Utilisez des points focaux pour les images susceptibles d’être recadrées dans les mises en page mobiles ou pour ordinateur.
3. Gardez le texte de la bannière séparé. Ajoutez les titres, le contenu et les liens dans l’éditeur de thème plutôt que de les intégrer à une image de bannière.
4. Utilisez le bon format. Choisissez JPEG pour les photographies et PNG pour les éléments graphiques transparents tels que les logos et les icônes.
5. Vérifiez les images sensibles aux couleurs. Supprimez les profils colorimétriques intégrés avant l’importation lorsque les changements de couleur seraient visibles.