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 pour atteindre le tableau de bord de gestion d'images responsives.
Créez un dossier ou Uploadez un fichier avec les onglets
Choisissez la vignette et cliquez sur le bouton "insérer un lien"
Choisissez la grande image correspondant à la vignette et ajoutez-y une balise Titre. Celle-ci servira à l'optimisation de l'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.