Modifier la taille de vos images pour les adapter à votre thème est une étape importante dans la création d’un site Web professionnel. Des images correctement redimensionnées et rognées peuvent améliorer l’expérience du client et mettre en valeur les produits sur votre page.

Conditions préalables

Avant de commencer, déterminez les exigences de votre thème et identifiez les principaux aspects de l’image que vous souhaitez utiliser :

1. Déterminez l’objectif de l’image. Les images peuvent être utilisées pour des produits, des titres ou des bannières. Chaque objectif nécessite une image de taille différente ; il est donc important de trouver celle qui répond à vos besoins.
2. Pour connaître les dimensions et autres caractéristiques de l’image requises pour votre thème, consultez le manuel du thème. Pour savoir comment trouver le manuel d’un thème, cliquez ici.
3. Choisissez les images à téléverser. Afin de réduire le temps de modification des images, gardez à l’esprit les éléments clés suivants :
   • Les images doivent avoir au moins les dimensions requises par le thème.
   • Les images doivent avoir une orientation et une forme similaires à celles requises par le thème.
   • Les images doivent respecter les critères d’image de la plateforme eCom. Pour en savoir plus sur ces critères, cliquez ici.
4. Pour savoir si vous allez redimensionner ou rogner votre image, examinez la fonction de chaque option :
   • Rogner une image permet d’éviter de la déformer ou de l’étirer. Calculez le rapport de dimension requis d’après le manuel du thème pour rogner une image correctement. Ces rapports permettent de déterminer la partie de l’image à rogner.
   • Lorsque vous redimensionnez une image, veillez à la redimensionner en suivant les proportions. Ne redimensionnez une image que lorsque ses dimensions sont trop importantes. Les grandes images peuvent augmenter les temps de chargement, ce qui a une incidence sur le référencement et la conversion sur votre site Web.

La modification de l’image nécessite un logiciel. Pour connaître les logiciels disponibles, cliquez ici.

Instructions

1. Ouvrez l’image dans le logiciel de votre choix.
2. Redimensionnez ou rognez l’image.
3. Enregistrez l’image modifiée sur votre ordinateur.
4. Téléversez l’image modifiée sur eCom.

Exemples

Si vous souhaitez utiliser une image dont la forme ou les dimensions ne correspondent pas à votre thème, vous pouvez la rogner. La méthode utilisée dans l’exemple ci-dessous peut être appliquée à diverses situations et est une astuce utile à conserver.

Liste de contrôle des conditions préalables

1. Quel est l’objectif de cette image ?
   Cette image servira de titre.
   
   
2. Quelles sont les exigences du thème concernant les titres ?
   Le thème installé est Ignite. Le manuel d’Ignite indique que les dimensions recommandées pour les titres sont de 3 200 px de largeur sur 1 300 px de hauteur pour un titre en haute résolution.
   
   
3. Cette image répond-elle aux exigences du thème Ignite et d’eCom ? Cette image convient-elle à son objectif ?
   • Les dimensions originales de cette image sont de 5 100 px de largeur sur 3 400 px de hauteur. Les dimensions répondent donc aux exigences de ce thème et d’eCom.
   • Ce fichier est au format .jpeg, qui est pris en charge par eCom.
   • La taille et la forme de cette image correspondent à celles requises pour un titre.
4. Souhaitez-vous rogner ou redimensionner cette image ?
   Pour adapter l’image à la forme d’un titre, rognez-la plutôt que de la redimensionner. Pour ce faire, calculez le rapport entre la largeur et la hauteur. Ce rapport est calculé d’après les dimensions fournies par Ignite, selon lesquelles un titre doit avoir une largeur de 3 200 px et une hauteur de 1 300 px.
   • Le rapport largeur/hauteur requis est de 3 200/1 300 = 2,46.
   • Le rapport hauteur/largeur requis est de 1 300/3 200 = 0,41. Utilisez ce rapport pour calculer les dimensions de l’image :
     • Si vous désirez une largeur précise, divisez-la par 2,46 pour trouver la hauteur nécessaire.
     • Si vous désirez une hauteur précise, divisez-la par 0,41 pour trouver la largeur nécessaire.

Après avoir sélectionné l’image et déterminé le rapport requis, vous pouvez rogner l’image.

Rogner la hauteur d’une image

La largeur de l’image est suffisante, mais sa hauteur est supérieure à celle requise par le thème Ignite pour une image de titre. La hauteur doit être réduite pour respecter le ratio souhaité. Pour connaître la hauteur à appliquer, effectuez le calcul ci-dessous :

• Puisque vous ne modifiez que la hauteur, celle-ci est calculée en utilisant le rapport largeur/hauteur de 2,46.
• La largeur de l’image originale est de 5 100 px.
• 5 100 px ÷ 2,46 = 2 073 px.

La hauteur de l’image doit être réduite à 2 073 px.

Voici le résultat final :

Rogner la largeur d’une image

Si vous voulez conserver la hauteur d’une image, il peut être nécessaire d’en ajuster la largeur afin de répondre aux exigences du thème Ignite concernant les images de titre. Pour conserver toute la hauteur, vous pouvez ajouter des barres à côté de l’image afin de la remplir aux bonnes dimensions. Les étapes pour ajouter ces barres varient selon le logiciel d’édition utilisé. Pour connaître la largeur à appliquer, effectuez le calcul ci-dessous :

• Puisque vous ne modifiez que la largeur, celle-ci est calculée en utilisant le rapport largeur/hauteur de 0,41.
• La largeur de l’image originale est de 3 400 px.
• 3 400 px ÷ 0,41 = 8 292 px.

La largeur de l’image doit être augmentée à 8 292 px.

Voici le résultat final :

Redimensionner une image

Redimensionner une image vous permet d’ajuster une image dont les proportions correspondent déjà à vos besoins, mais qui est trop grande pour répondre aux exigences de téléversement d’eCom. Dans l’exemple ci-dessus, l’image créée correspond aux proportions requises pour le thème Ignite, mais elle est trop grande pour être téléversée sur eCom. Pour redimensionner l’image, calculez les dimensions de la hauteur et de la largeur comme indiqué ci-dessous :

• La largeur de l’image originale est de 8 292 px.
• Les dimensions recommandées pour le thème Ignite sont de 3 200 px de largeur sur 1 300 px de hauteur.
• Les dimensions maximales des images pour eCom sont de 5 128 px de hauteur sur 5 128 px de largeur.

L’image doit être redimensionnée à 38,3 % de sa taille originale pour obtenir des dimensions de 3 200 px de largeur sur 1 300 px de hauteur.

Les logiciels d’édition vous permettent de redimensionner votre image et de compresser votre fichier sans la déformer. Pour éviter toute déformation de l’image, nous vous recommandons de suivre les étapes indiquées dans le manuel de votre logiciel d’édition, que vous trouverez ici.

Lectures supplémentaires

Les étapes ci-dessus visant à redimensionner et à rogner les images peuvent être suivies pour plusieurs types d’images et de thèmes. En vous familiarisant avec les outils disponibles dans votre logiciel d’édition d’images, vous pourrez améliorer l’expérience de vos clients et mettre en valeur les produits sur votre page. Pour plus de conseils et d’options de personnalisation, consultez les articles connexes ci-dessous.

Localisation des paramètres de design communs

Introduction à la conception de votre boutique eCom