5 - QUELQUES CONSEILS DE RÉALISATION
5.6 - Les images
• 5.6.2 - Les boutons de navigation
5.6 - Les
images
Les fichiers images sont beaucoup plus lourds, et donc plus lents à charger, que les fichiers textes, nous en avons déjà parlé. Mais on ne saurait plus guère maintenant concevoir de sites web sans images (ne serait-ce que votre logo, ou bien pour l'en-tête ou la navigation) : soyez donc attentifs à quelques points essentiels.
Comprimez vos images avec beaucoup de soin grâce à l'un des deux grands procédés, GIF ou JPEG (27) : il s'agit de diminuer au maximum leur poids tout en conservant une bonne qualité de visualisation à l'écran, ce qui demande du soin et du temps.
Rédigez avec soin la balise <alt> du code html, petit texte qui s'affiche à la place de l'image si celle-ci est manquante, si votre lecteur a coupé le chargement d'images, lorsque le curseur survole l'image ou en attendant son chargement sur certains navigateurs (ce texte, très court, peut reprendre une partie de la légende, s'il s'agit d'une illustration). C'est également ce texte qui remplace l'image, pour les périphériques adaptés aux handicapés visuels. Enfin, certains moteurs de recherche intègrent les balises <alt> lorsqu'ils "lisent" votre site, puisqu'ils ne savent pas lire les images.
Je vois deux cas où utiliser l'image : pour animer de la typographie (dans la barre de navigation, dans les titres des pages, dans l'en-tête) ou pour illustrer et compléter vos propos, avec des dessins ou des photos. Dans le cas où vous créez vos images (mais pas pour les retouches de photos), pensez à utiliser des couleurs issues de la palette de 216 couleurs communes aux Mac et PC, si vous estimez que certains de vos lecteurs explorent le web avec un ordinateur un peu vieux.
5.6.1 - La typographie
Vous pouvez décliner vos en-têtes sous forme de texte en image, c'est particulièrement agréable, quand c'est réussi, pour installer par exemple la rubrique visitée dans l'en-tête de page (28). Malheureusement, la visualisation des caractères à l'écran peut s'accompagner d'un vilain effet de crénelé, de marches d'escalier, sur les contours.
Choisissez de préférence un caractère épais, bien lisible, plutôt qu'une police élégante mais fragile dans ses déliés. Et faites au préalable des essais de lisibilité sur votre logiciel de retouches d'image !
La balise <alt> reprendra alors l'intégralité du texte.
5.6.2 - Les boutons de navigation
Si vous réalisez votre barre de navigation sous forme d'images, soignez la lisibilité de la typographie. Choisissez un caractère bien lisible et non tarabiscoté et traitez-le en petit, afin que vos images soient légères. Quant aux couleurs utilisées, choisissez-les bien contrastées, tant en teinte (rouge et vert) qu'en luminosité (clair vs. sombre). Ci-dessous de nouveau l'exemple proposé plus haut, où, en couleur, les fonds sont rouge pour les boutons sombres (à cliquer pour y aller), et gris pour le bouton clair (inactif, vous y êtes) :
Les textes sont composés en Helvetica bold, corps 11, avec une ombre noire. Un pixel blanc de chaque côté des blocs de couleur permet d'isoler chaque rubrique. Chaque image pèse 635 octets, avec la conversion en Gif 89a. Par prévoyance, la hauteur du bloc de fond est calculée de façon à permettre de placer un nom de rubrique plus long, sur deux lignes.
Les informations de la barre de navigation peuvent aussi être proposées sous forme d'images symboliques, ou pictogrammes, accompagnées d'un texte. Ces images sont particulièrement adaptées à la navigation, on clique "instinctivement" dessus, n'oubliez donc pas de les activer par le même lien que le texte les accompagnant. Leur conception est un peu délicate : nous avons une culture des "pictos", ces dessins simplifiés qui nous guident, dans les lieux publics, vers les toilettes ou une boîte aux lettres. Mais leur compréhension, leur lecture doit être instinctive, et c'est un art réservé aux professionnels de la signalétique. Encore une fois, faites simple, reprenez des symboles que nous connaissons tous, plutôt que de les réinventer.
Notez très soigneusement, lors de la réalisation, les techniques pour obtenir toutes les images nécessaires aux en-têtes ou à la navigation : vous serez content de retrouver des explications claires et simples si, dans un an ou deux, vous décidez de rajouter une rubrique ou de nouvelles pages avec un titre. Les données à conserver sont : le type de police utilisé (et ladite police au complet), sa taille, sa couleur, la taille du bloc de couleur, la (ou les) couleur(s), l'emplacement du texte dans le bloc de couleur, les effets spéciaux ou les filtres utilisés, les différentes manipulations réalisées (dans l'ordre) sur votre logiciel de traitement d'images. Ces informations sont à demander au graphiste, si c'est lui qui a conçu les images, ou à votre prestataire. Elles rejoindront le cahier de réalisation.
5.6.3 - Les illustrations
Si vous décidez d'utiliser des illustrations dans vos espaces d'information, pour accompagner le texte, souvenez-vous qu'elles doivent avoir une fonction, et pas seulement celle d'animer la page : elles doivent, pour justifier le temps d'attente nécessaire à leur chargement, "dire" quelque chose, soutenir efficacement vos propos ou apporter un complément d'information (29). Pensez à les accompagner d'une légende, pour les expliquer.
Si une des illustrations du site doit être visualisée en grand pour être compréhensible et utile, deux remarques, hormis le soin nécessaire pour la rendre la plus légère possible :
- veillez à ce que sa largeur ne dépasse pas celle de l'écran, afin que le lecteur n'ait pas à naviguer horizontalement pour la voir en entier ; une largeur de 500 pixels est un maximum. Si vous avez réservé la gauche de votre écran pour un "frame" ou une colonne réservés à la navigation, retirez bien sûr de ce maximum la largeur de l'espace réservé ;
- donnez à votre lecteur le choix de la visualiser ou non, si elle est lourde : vous pouvez en proposer une version toute petite (et légère) dans la page précédente, celle du texte, en indiquant quelles informations elle procure et en proposant un lien vers la page qui la représente en grand ; vous installerez alors près de la grande photo et de sa légende un "retour à la page précédente" pour ramener au texte.
On n'oubliera évidemment pas, lors de l'utilisation d'illustrations (dessins ou photos), de demander l'autorisation à l'auteur, et d'indiquer son nom, soit près de l'image, soit dans la page des crédits génériques du site. Bien que toutes sortes de fadaises aient été dites à ce sujet, la législation sur les droits d'auteur (30) s'applique aussi sur le web, et la mention de l'auteur est impérative, ne serait-ce que par respect pour l'artiste.
Complétez cette section :
- Le thème du poids des fichiers images est abordé dans le par. 2.3 - Rapidité de chargement, et, plus théoriquement, dans l'annexe 1 - Comment marche l'Internet.
- Pour plus de précisions sur la palette de 216 couleurs, voyez le par. 5.1.2 - La lisibilité.
- Le fonctionnement des périphériques pour handicapés visuels sont décrits dans l'annexe 5 - Accès des sites web aux personnes handicapées
- Pour le travail sur les typographies, consultez la bibliographie, Contenu > Traitement des images pour le web.
- Les informations sur la réalisation des images (navigation ou illustration) sont à ranger dans le document de réalisation (par. 6.2.2).
- Le cas échéant, vous aurez des renseignements à demander à votre graphiste (cf. par. 5.2 - Si vous un(e) graphiste sous la main) ou à votre agence (cf. par. 6.3 - Travailler avec un prestataire) afin de compléter votre document de réalisation (par. 6.2).
Notes
(27) Pour la compression d'images, voir en bibliographie le par. Contenu > Traitement des images pour le Web.
(28) Voir l'effet utilisé dans le site de la Bibliothèque Gustav Mahler :
http://www.bgm.org
(29) Pour montrer que je ne suis pas sectaire, un excellent site qui fonctionne en grande partie par l'image (c'est un choix assumé), mais aussi par le chaos (et avec les versions 4 de vos navigateurs, et avec des plug-ins...), celui des Pénélopes : n'empêche, et c'est l'exemple-type du contre-exemple, elles me séduisent et m'étonnent, et je lis...
http://www.mire.net/penelopes/
(30) Voir en bibliographie
Technique > Aspects légaux.