Insertion d'images

L'utilisation de l'image dans un site responsive Design est importante car elle contribue à une meilleure visibilité sur Google images.

Afin d'utiliser au mieux l'outil d'insertion d'images, dupliquez vos images en deux formats distincts:

  • Le format "Grande image" : Cette image doit pouvoir être lue sur l'ensemble des navigateurs, par défaut on limitera sa taille à maximum 1024 pixels de large ou 728 de haut.
  • Le format vignette : Définissez une taille fixe pour toutes vos vignettes, en générale on utilise la largeur comme valeur fixe en gardant des images symétriques.

Afin d'en augmenter la vitesse de chargement, les images devront être "nettoyées" ou "compressées. Il existe de nombreux outils gratuits ou à faible cout pour optimiser les images: photoredukto, jpeg-compression, PunyPNG, imageoptim, OptiPNG,...

Optimisation des images

Dans le module de Gestion du catalogue, les images s'auto optimisent par rapport au nom de la catégorie, sous-catégorie ou de la fiche (formatées sous plusieurs tailles et renommées).

Pour l'insertion d'images dans le contenu de pages cms, il est préférable de préparer ses images comme suit :

  • Pas de majuscule,
  • Pas d’accent
  • Pas d’espace
  • Les mots séparés par un trait d’union
  • Maximum 3 -4 mots

Pour insérer une image responsive, cliquez sur l'onglet image-responsive pour atteindre le tableau de bord de gestion d'images responsives.

Tableau de gestion des images responsives

 

Créez un dossier ou Uploadez un fichier avec les onglets Ajouter un dossier image

Choisissez la vignette et cliquez sur le bouton "insérer un lien" lien

Choisissez la grande image correspondant à la vignette et ajoutez-y une balise Titre. Celle-ci servira à l'optimisation de l'image.

optimiser-image

Vous pouvez également donner un effet à vos images sélectionnant l'image (elle devient bleue) et en cliquant sur Format.

Ensuite choisissez image et une des options: Lightbox est utilisé pour les liens afin de créer des galeries d'images internes à une page alors que les autres options influent sur l'image.

Image responsive est activé par défaut, vous pouvez néanmoins aligner l'image à droite ou à gauche du texte ou ajouter un effet visuel à l'image, coins arrondis (peu visible), dans un cercle ou avec un cadre.

Modifier l'apparence de l'image