A propos des images insérées dans un champ texte

Pour améliorer la performance de votre site web, vous devez optimiser les images avant de les importer dans la médiathèque. Quelques règles ci-après :

• Résolution de 72dpi ou 96dpi maxi
• Taille  de l'image : elle doit correspondre à la taille d’affichage la plus importante sur le site ainsi vous éviter toute déformation / pixellisation. Exemple : pour le bandeau de la page d'accueil
  • largeur : 2000 px pour un affichage desktop
  • hauteur : de 300 à 500 px suivant le format d'affichage prévu
• Poids de l’image : il doit être, de préférence, inférieur à 300Ko. Pour alléger une image, l’enregistrer pour un affichage web :
  • au format jpg ou jpeg  pour une image plus légère
  • au format png si vous devez gérer la transparence
  • au format gif pour une image animée

Les formats d'affichage proposés par l'éditeur de texte 

Un menu déroulant vous propose plusieurs tailles d'affichage de l'image. Cette taille est fonction du support utilisé (écran desktop, tablette, smarphone)

Exemple : pour un écran 27 pouces

• Référence : largeur maxi =  600 px -  hauteur maxi = 600 px

• Small : largeur maxi =  100 px -  hauteur maxi = 100 px

• Tiny : largeur maxi =  30 px -  hauteur maxi = 30 px

• Medium : largeur maxi =  200 px -  hauteur maxi = 200 px

• Large : largeur maxi =  300 px -  hauteur maxi = 300 px

• Gallery : largeur maxi =  1200 px -  hauteur maxi = 1200 px

• Original : taille à son format original

La restitution de l'image 

L'image peut être retaillée et sa restitution web dépend

• du ratio (rapport entre la largeur et la hauteur) de l'image d'origine
• de la taille de l'écran d'affichage (écran PC, smartphone, tablette ...)
• du format d’affichage proposé dans l’éditeur de texte : conteneur de l’image

Les valeurs des hauteur et largeur des images d'origine s'adaptent aux valeurs maximales d'affichage et sont recalculées pour préserver le ratio de l'image

À noter : pour la plupart des formats proposés, si la largeur et la hauteur de l’image d’origine sont inférieures au format d'affichage, la taille d’origine de l'image est conservée

Exemple  : Sélection du format d'affichage = référence  - largeur maxi =  600 px -  hauteur maxi = 600 px