Comment intégrer les visuels

En matière de visuels, même si la plupart des acquis des médias traditionnels restent valables, tels que les rapports sémiologiques entre le texte et l'image, certaines règles spécifiques devraient pouvoir s'appliquer à Internet :

Intégrer les visuels au contenu
Sélectionner les visuels en fonction de leur apport informatif
Rogner les visuels pour n'en garder que l'essentiel

1. Intégrer les visuels au contenu

Une étude (reprise ci-dessous) réalisée par l'Université de Stanford indique que les internautes font davantage attention aux textes qu'aux images et qu'en particulier, une image aura beaucoup plus de chances d'être vue si elle est étroitement intégrée au contenu, plutôt que si elle s'en détache, tel un îlot visuel.

Ci-dessous, la manière dont eMarketer.com intègre les graphiques au corps de l'article augmente les chances que ces graphiques soient pris en compte par l'utilisateur...

Exemple de visuel intégré au contenu

ZdNet soigne ses performances, en intégrant de toutes petites images à du texte HTML...

Exemple de visuel intégré au contenu

Références :
Une étude de type eyetracking (technique visant à suivre le regard de l'internaute avec une précision scientifique), menée par le professeur Lewenstein de l'Université de Stanford, et dont les résultats ont été publiés en mai 2000, indique à quel point les utilisateurs d'Internet font davantage attention aux textes qu'aux images. L'interprétation que fait l'éditorialiste Steve Outing de cette étude débouche sur des conseils intéressants quant à la manière d'intégrer des images dans un site internet. L'étude originale est disponible ici : http://www.poynterextra.org/et/i.htm.

Une étude réalisée en 1998 par InternetWorking démontre que les éléments visuellement les plus imposants ne sont pas forcément ceux qui attirent le plus l'attention : http://www.internettg.org/newsletter/dec98/banner_blindness.html

2. Sélectionner les visuels en fonction de leur apport informatif

Le fait que les images ne soient pas très bien accueillies par les utilisateurs d'Internet est fortement lié à la lenteur du Réseau et au fait que les images, bien souvent, pèsent beaucoup plus lourd que les textes.
Cependant, nous aurions tort de jeter le bébé avec l'eau du bain... Dans certains cas, le recours à l'image est évidemment efficace et justifié.

A cet égard, les études de Jared M. Spool et Matthew Klee (User Interface Engineering) sont fort intéressantes en ce qu'elles aident à faire un tri intelligent entre les images efficaces et celles qui le sont moins. En fait, ces auteurs ont mis en évidence quatre rôles fondamentaux joués par les images d'un site web. Ces rôles ne se valent pas et nous les considérons ici dans un ordre décroissant d'efficacité :

L'image comme élément d'information
L'image comme élément de navigation
L'image comme élément de mise en page
L'image comme élément d'ornementation

Le message principal est qu'il faut privilégier les images informatives, pour lesquelles les utilisateurs sont prêts à patienter, et éviter le plus possible les effets purement ornementaux !

En matière d'e-commerce, une photo vaut parfois mille mots. Le site eBay.com, par exemple, propose systématiquement une photo des produits vendus aux enchères. Mais il ne se permet l'usage de telles grandes photographies qu'après que l'utilisateur ait précisément défini son choix de produit ou sa gamme de prix au départ d'interfaces essentiellement textuelles.

L'infographie, telle que sous la forme de cette fiche éditée par l'AFP, est l'exemple parfait de l'image à caractère informatif.

3. Rogner les visuels pour n'en garder que l'essentiel

Toujours dans ce même état d'esprit d'éviter tout recours superflu à des éléments visuels qui viendraient diminuer les performances de téléchargement du site, il est important de rogner les visuels de manière à n'en garder que la partie réellement efficace et informative. Pour ce faire, on peut agir de plusieurs manières :

Recadrer une image : Il s'agit de recentrer l'image sur son sujet principal en éliminant les pourtours superflus. Les plans rapprochés, sur des visages, sur des objets, seront privilégiés.
Diminuer la taille d'une image : Ici, il ne s'agit pas de se séparer de certaines parties de l'image, mais bien d'en diminuer la résolution. La perte se situe donc au niveau du détail.

A titre d'exemple, cette photo issue du Soir.be est parfaitement recadrée, mais sa taille pourrait certainement être diminuée.
Simplifier la palette de couleurs : C'est une autre manière de diminuer, parfois radicalement, le poids des images. Certains sites, pourtant renommés, n'hésitent pas à présenter des photos "postérisées"... performances obligent !

Au niveau de ce graphique, par exemple, il conviendrait de supprimer les dégradés, lesquels sont gourmands en octets et n'apportent aucune valeur ajoutée informative !

Notez que le choix du format influence également significativement les performances en matière de compression. Les algorithmes utilisés par JPEG et par GIF (les deux formats principaux existant sur Internet) sont adaptés respectivement à des utilisations différentes. Concrètement, vous choisirez le format JPEG pour les photographies et le format GIF pour les icônes, la typographie ou les vignettes (thumbnails).

A chaque fois, il faut donc se poser la même question : Quelle est la partie de l'image dont je peux me passer ?... d'un point de vue informatif et non seulement ornemental ! Est-ce que les nuances de couleurs sont vraiment nécessaires ? Est-ce que tous les détails sont vraiment indispensables ? ...Chaque kilobyte gagné améliore les performances de votre site et la satisfaction des utilisateurs !

Dans l'exemple d'eBay, cité précédemment, l'éditeur du site aurait très bien pu détourer la voiture et la présenter sur un fond blanc uni... Non seulement on diminuerait significativement le poids de l'image, mais le sujet se verrait également mieux mis en évidence, sans "bruit" visuel ! L'utilisateur se concentrerait uniquement sur le véhicule, et pas sur son décor !