Les images sont incontournables pour compléter le texte et rendre vos pages attrayantes. Voici quelques conseils et méthodes pour gérer au mieux l'intégration d'images dans vos pages web.

Illustrer un site web : les bonnes pratiques

Les images proposées dans vos pages web doivent compléter et servir le contenu textuel. Il ne s'agit pas simplement de "décorer" votre page mais d'apporter de l'information aux utilisateurs. Il est donc important de respecter les recommandations suivantes :

  • Proposez des images en nombre raisonnable
  • Proposez des images pertinentes, elles doivent avoir une véritable valeur ajoutée par rapport à votre contenu textuel
  • Rédigez des textes alternatifs, ces derniers sont lus par les matériels de lecture d'écran utilisés par les déficients visuels et sont utiles pour l'indexation dans Google images.

Formats d'images

3 formats d’images peuvent être affichés dans un navigateur web : PNGGIF et JPG. Si vous avez le choix entre le GIF et le PNG préférez ce dernier, libre de droit.

Attention
Le format « GIF animé » qui stocke plusieurs images dans un même fichier afin de créer une animation est à proscrire pour des raisons d'ergonomie.

Insertion des images dans Drupal : comment faire ?

  1. Attacher l'image à votre page

Allez dans la zone Fichiers liés à la page > Images et cliquez sur Parcourir. Sélectionnez votre image sur votre poste de travail et faites transférer. 

Récupérez ensuite l'URL de l'image par un clic droit > Copier l'adresse du lien

La taille de l'image est limité à une résolution de 1140x650 pixels. Si votre image est plus grande soit en largeur, soit en hauteur, elle sera redimmensionnée automatiquement au téléchargement en respectant le ratio pour qu'elle ne soit pas déformée (homothétie)

  1. Intégrer l'image dans la page

Cliquez ensuite sur le pictogramme représentant un paysage dans la barre d’outils puis renseignez la source de l’image au niveau de la zone URL. Pour ce faire, vous pouvez récupérer la source de l'image dans la zone Documents – Fichiers attachés au contenu par un clic droit sur le nom du fichier.

icone insertion d'image

champ url dans les propriétés de l'image

Si vous devez inclure la même image dans des pages différentes, transférez l’image sur une seule page et faites référence à son URL dans les autres pages.

Puis-je copier-coller une image depuis Word ?

Non, vous ne pouvez pas coller directement des images copiées depuis des fichiers Word : vos images seront rejetées par l'éditeur de texte de Drupal

Les propriétés des images dans Drupal

Tailles et redimensionnement

Une image insérée peut-être redimensionnée en éditant les propriétés de l’image afin de renseigner les zones Largeur et Hauteur avec des valeurs en pixel. Un petit cadenas vous permet, lorsqu’il est fermé de conserver les proportions de l’image pour éviter les problèmes de déformation

Texte alternatif

Le champ Texte de remplacement disponible dans l’onglet Informations sur l’image de la fenêtre Propriété de l’Image permet de saisir un texte décrivant l’image.

Positionnement de l'image

Lorsqu’une image est insérée dans la zone d’édition, elle se positionne par défaut à gauche du curseur de la souris aevc un espacement automatique entre le texte et l'image.


Voir aussi

La banque d'images Shutterstock 
Illustrations graphiques - sources et illustrations

Pour aller plus loin

D'autres bonnes pratiques sur le blog Ecrire pour le Web
Pour en savoir plus sur les formats d'images