editeur-texte.jpg

Insertion d'images

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

Quelques rappels sur le format des images

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

Taille de l'imageRatioTaille / format référenceTaille de restitution
200 x 2001< format taille d’origine de l'image
500 x 3001.67< formattaille d’origine de l'image
1280 x 12801> formatredimensionnement et taille d'affichage 600 X 600 
1920 x 10001.92> formatla dimension la plus importante (largeur=1920) sera réduite à 600 px et la hauteur recalculée = 1000x600/1920 = 313 pour conserver le ratio de l'image → taille d'affichage 600 X 313
800 x 12000.67> formatla dimension la plus importante (hauteur=12000) sera réduite à 600 px et la largeur recalculée = 800x600/1200 = 400 pour conserver le ratio de l'image → taille d'affichage 400 X 600

Date de modification : 22 avril 2024 | Date de création : 11 novembre 2022 | Rédaction : Solutions Web