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.

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 donc des images en nombre raisonnable
  • Réduisez la taille des illustrations, des images trop grosses peuvent ralentir considérablement le temps d'affichage de votre page
  • 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 : PNG, GIF 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 absolument au même titre que les textes clignotants. Ces formats sont déconseillés car ils nuisent à la lisibilité des pages web.

Insertion des images dans Drupal : comment faire ?

Pour insérer des images dans votre contenu, il existe deux possibilités :

  • L'outil d’insertion d’images de l’éditeur

Vous pouvez vous servir de cet outil pour faire référence à un fichier image que vous aurez préalablement attaché à la page courante ou à une image externe à votre site. Dans tous les cas cette adresse doit être au format web, du type http://xxxx. Ne faites pas référence à une image qui se trouve sur votre ordinateur.
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

Par défaut, lorsque vous transférez un fichier image, un lien vers ce fichier est automatiquement généré et inséré dans votre page. Il est donc visualisable en mode consultation. Pour éviter cela, pensez à décocher la case située dans la colonne AFFICHAGE du tableau INFORMATION SUR LE FICHIER.
désactivation de l'option d'affichage 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.

Les propriétés des images dans Drupal

Tailles et redimensionnement

Une image insérée peut-être redimensionnée directement depuis la zone d’édition en cliquant dessus et en étirant ou en contractant le cadre qui s’affiche. L’autre méthode consiste à éditer 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. Attention, la réduction s’applique aux dimensions de l’affichage mais pas à la taille en octets (son poids), l'image ainsi réduit apparaît donc plus petite mais est en fait tout aussi lourde. Si la réduction de l'image excède 60% c’est que le fichier transféré est trop volumineux. Utilisez un logiciel pour redimensionner votre image avant son transfert. L’affichage coté navigateur sera plus rapide et l’espace disque de nos serveurs allégé. Le site EasyPict vous permet de modifier la taille de vos images ou de changer leur format.

Texte de remplacement et description

  • Le texte de remplacement

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.

texte de remplacement

  • La description

Le champ Description disponible dans l’onglet Avancé de la fenêtre Propriété de l’image permet d’afficher un message contextuel lors du survol de la souris sur l’image. Par défaut la valeur de ce champ est le nom du fichier image.

champ description des propriétés de 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. L’item Alignement disponible dans l’onglet Informations sur l’image de la fenêtre Propriété de l’Image permet de positionner l’image à gauche ou à droite du texte l’environnant. Afin de décoller l'image du texte, saisissez des valeurs en pixel dans les zones de saisie relatives aux espacements. Dans l'exemple ci-dessous, l'image est décalée de 10 pixels vers la droite

propriétés marges de l'image

Habillage des photos

classe CSS pour l'affichage des imagesPar défaut, les illustrations du site portail d’AMU présentent une bordure d’une dizaine de pixels. Cet habillage est un élément de la charte graphique web et doit, dans la mesure du possible, être appliqué à toutes les illustrations publiées sur nos sites. Ce résultat peut être obtenu en appliquant un filtre prédéfini. Dans l’onglet Avancé de la fenêtre Propriété de l’Image la zone classe CSS doit avoir pour valeur cadre-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