Texte et Médias : gestion des images
Il y a 2 méthodes pour insérer une image :
- Utiliser l'onglet "Medias" :
Cette méthode permet de placer l'image plus précisément et de créer un "habillage du texte" (faire en sorte que le texte entoure l'image).
Une fois qu'elle a été sélectionnée, l'image peut être placée en-dessous, au-dessus, à droite, à gauche du texte, avec ou sans habillage.
Vous devez créer un "widget" Texte et médias par bloc d'images car l'alignement des images vaut pour toutes les images à la fois.
Vous devez créer un widget Texte et médias par bloc de texte si vous souhaitez que chaque image soit positionnée en début de paragraphe.
Si vous souhaitez placer une image isolée (tout en bas ou tout en haut de la page), vous pouvez utiliser l'une ou l'autre de ces méthodes. Il suffit de créer un contenu de type Texte et médias, en dehors d'un bloc cliquer-dérouler. Inutile d'y insérer du texte.
- Utiliser le bouton "Images"
situé dans la barre d'outils de l'éditeur (dernier bouton, à côté du point d'interrogation) :
Cette méthode permet d'insérer une image qui se comporte comme un caractère, c'est-à-dire que la hauteur de la ligne s'adapte à la hauteur de l'image. Ceci ne peut donner un bon rendu que si l'image est seule sur la ligne.
Une image insérée via ce bouton permet de redimensionner automatiquement une image trop grande.
Il vaut mieux réserver l'utilisation de ce bouton à l'insertion de petites images sur une ligne de texte.
Si plusieurs grandes images sont insérées dans le même bloc, seule la première est correctement redimensionnée et les autres ne peuvent pas s'afficher correctement.
Format des images
Tous les formats d'image standards sont acceptés ; jpg/jpeg, png et gif sont à privilégier pour leur rapport qualité/poids (éviter les bmp par exemple, car ils prennent trop de place sur le serveur pour une qualité d'image qui n'est pas meilleure que la même image en jpg)
La plupart des appareils photos et des smartphones prennent des images en 4000 px de large. Sur le site internet, sauf cas particulier, il est inutile d'insérer des images d'une largeur supérieure à 1600 px : leur téléchargement prendra du temps, le traitement par Typo3 pour les réduire également et le volume pour les stocker sur le serveur sera inutilement occupé.
Même si vous ne disposez pas de logiciel d'infographie, vous pouvez redimensionner et/ou recadrer vos images en ligne avant de les insérer dans Typo3. Ex. le site https://iloveimg.com/fr met à disposition tous les outils en ligne nécessaires.
Où trouver des images ?
Si vous ne disposez pas d'image pour agrémenter vos pages, vous pouvez en télécharger sur internet à condition qu'elles soient "libres de droit", ce qui est le cas de peu d'images que vous trouverez par Google par exemple (affichez l'image sur son site et vérifiez les mentions légales).
Le site Freepik, par exemple, donne accès à des miliers de photos libres de droit à condition de citer leur auteur et le site Freepik. Vous pouvez ajouter ces informations dans les propriétés de l'image. Attention à ne pas sélectionner les images provenant d'Adobe Stock, qui sont payantes.
Vous pouvez aussi demander au webmaster ou à Gaëlle Faugier une image particulière (photos de l'hôpital, icônes svg,...) ou copier-coller les images qui se trouvent déjà sur le site du CHU.
Propriétés des images
Google se sert des images et de leurs propriétés pour référencer votre page.
En premier lieu, le nom du fichier doit être parlant, ne pas comporter d'abréviation inexploitable par les robots de Google. Ne mettez pas de tirets bas (_ touche 8) dans vos noms de fichier, privilégiez les tirets haut (signe - ou touche 6) ou les espaces, qui sont automatiquement transformés en tirets hauts par Typo3.
Il est vivement recommandé de renseigner un texte alternatif pour chacune de vos images. Ce texte, qui décrit l'image à l'attention des personnes malvoyantes, sert également à Google pour indexer votre page et vos images.
Les autres champs sont facultatifs : Infobulle (uniquement pour les images insérées via le bouton de l'éditeur) affiche un court texte sur l'image quand l'internaute passe la souris dessus et Description permet d'afficher une légende sous l'image.
