Comment Modifier Mes Images pour un Affichage Optimisé sur le Web ?

Dans ce tutoriel, vous allez voir comment travailler vos images pour un un affichage optimisé sur la boutique sur Internet.

Lorsque vous chargez une photo de produit, il faut savoir que le système la redimensionne dans plusieurs formats (que vous trouverez dans "Préférences" > "images") :

  • - small  => image du produit sur une page panier 

  • medium  => à la fois les image des sous-catégories  mais aussi, les photos secondaires des fiches produits

  • large => Image principale du produit sur sa fiche

  • thickbox  => image du produit en cliquant pour zoomer

  • home  => Images des produits sur une page "Catégories" ou "Promotions" ou en page d'accueil

  • prod_cat => utilisé uniquement dans le thème standard éditable, il s'agit du format utilisé pour la section "Ces produits vous plairont également" (sur la fiche produit)

Il peut y avoir des formats supplémentaires si vous utilisez un thème premium comme "home_small". Ces formats supplémentaires sont crées lors de l'installation du thème premium par nos soins.

Pour une bonne qualité d'image, au minimum, chargez des images de 600px de largeur sur 600px de hauteur. Il s'agit des dimensions généralement associées au format "thickbox" (image de produit zoomée).

 

Vous ne parvenez pas à charger vos images ?

Voici ce que je vous recommande de vérifier avant de charger vos images :

  • Enregistrez au format JPG, GIF ou PNG (PDF, PSD, TIFF et DOC ne sont pas prévus pour le web).

  • Le poids de votre image ne doit pas dépasser 2 MO soit 2 000 KO. Vous pouvez réduire considérablement le poids d'une image JPG en utilisant ce logiciel gratuit en ligne : http://www.jpegmini.com/. Si vos images ont été enregistrées en PNG, ce service est parfait : http://tinypng.org/.

 

Quelques informations supplémentaires pour le chargement d'autres images : 

Voici les dimensions pour chaque élément graphique utiles si vous avez choisi le thème "Standard Editable" (le thème où vous pouvez personnaliser les couleurs)  :

  • La bannière à charger en entête : 960px de largeur et 100px de hauteur

  • Le diaporama : tout dépend de ce que vous renseignez dans "Design & Pages" > "Diaporama" > "Configuration" > "Plus d'options". Si vous choisissez "Automatique", le système va réduire vos images automatiquement. Si vous voulez avoir le contrôle sur les réglages de la taille, choisissez "Personnalisée". Avec cette dernière option, la largeur maximale selon la structure choisie (680px de largeur pour une structure sur deux colonnes, 480px si vous êtes sur trois colonnes ou 960px si vous êtes en mono-colonne). La hauteur, vous la définissez comme vous le souhaitez. Une fois ces deux valeurs renseignées, vous devez adapter vos images de diaporama par rapport au dimension du diaporama. Vous pouvez vous aider de ce tutoriel pour créer de belles images de diaporama : http://www.clicboutic.com/support/videos/21009097-comment-creer-de-belles-images-pour-mon-diaporama.

  • le Favicon : Vous pouvez insérer votre favicon via le menu "Préférences" > "Coordonnées". Pour en savoir plus, n'hésitez pas à consulter cette fiche.

 

Vous n'avez pas trouvé ce que vous cherchiez ? Envoyez un message à l'équipe Clicboutic Envoyez un message à l'équipe Clicboutic