Articles

Images et graphiques pour le web

Jean-Claude SOHM - CERIG / EFPG

Article pris sur le site cerig.efpg.inpg.fr/dossier/web_graphique/sommaire.htm

Aujourd'hui, un site web sans image est devenu quelque chose de rarissime. L'excès inverse (trop d'images) est plus fréquent, et nous avons tous rencontré ces pages web qui n'en finissent pas de se charger, parce qu'elles contiennent trop d'images. Dans la barre inférieure du navigateur s'affiche alors le message : "(45 éléments restant(s)) Ouverture de la page http://...". Et le nombre d'éléments à télécharger est décrémenté doucement, tandis que la page en cours s'affiche progressivement... si l'internaute a la patience d'attendre.

Car les images sont comme les pages web, elles sont contenues dans un fichier, et ce dernier est plus ou moins gros. Lorsqu'on parle du "poids" d'une image numérisée, il faut comprendre qu'il s'agit de la taille du fichier correspondant. Une toute petite image "pèse" quelques dizaines ou centaines d'octets, une grosse image quelques dizaines ou centaines de kilo-octets.

Certes, le débit du web (encore appelé "bande passante") s'est bien amélioré au cours des années, mais de très nombreux utilisateurs sont encore reliés à Internet via une ligne téléphonique ordinaire (RTC) et un modem 56K. Dans le meilleur des cas, le débit descendant (du serveur web vers l'internaute) atteint 50 Kbps (kilobits par seconde). La patience de l'internaute moyen a une limite bien connue : si rien ne s'affiche au bout de 10 secondes, il se dirige vers un autre site. Or en dix secondes, il a reçu au mieux 60 Ko d'information. On ne peut donc pas faire n'importe quoi en matière de taille des fichiers destinés au web, qu'ils contiennent des pages web ou des images.

C'est pourquoi dessiner pour le web est devenu -- sinon un métier à part -- du moins une spécialisation dans la formation des infographistes. Quand on dessine pour l'imprimé, c'est la qualité qui prime ; quand on dessine pour le web, c'est le poids. Ceux qui oublient cette règle simple surchargent les pages du site pour lequel ils dessinent, et nuisent à son audience. Si l'on crée une page web, ce n'est pas pour le plaisir, c'est pour qu'elle soit vue par le plus grand nombre possible d'internautes. Il ne faut pas oublier que, avant d'être lue, une page web doit d'abord être téléchargée. La présence d'une image accroît le temps de déchargement, et il faut que le message transmis par l'image (sous forme graphique) ait suffisamment de valeur pour compenser cet inconvénient.

Comme chacun sait, sous forme numérique, l'image pèse beaucoup plus lourd que le texte. Non compressée, une image de 100 x 100 pixels, en vraies couleurs (couleur codée sur 24 bits), pèse environ 30 Ko. Sur l'écran du moniteur, elle s'affiche dans un carré de 3 x 3 cm. Par comparaison, un texte de 30 Ko remplit plusieurs pages A4 ! Seules les techniques de compression permettent de véhiculer sur le web des images dont la taille dépasse celle d'une petite vignette. Ces techniques sont très efficaces, certes, mais elles ne peuvent pas faire de miracles. Toutes les images ne se compressent pas avec la même efficacité, tant s'en faut, et le concepteur de l'image est souvent en grande partie responsable de cette situation. Actuellement, et pour des années encore, les infographistes -- et, plus généralement, tous ceux qui réalisent des images pour le web -- doivent faire très attention à ce qu'ils font.

Pour être plus précis, il faut distinguer deux types d'images numériques :

l'image en tons continus (en anglais : continuous tone), telle qu'une photographie ou une peinture (continuous-tone artwork). Une telle image contient un très grand nombre de couleurs distinctes et de subtils dégradés;
le dessin au trait (en anglais : line drawing, line work, line art) qui contient des traits pleins, des aplats (zones de couleur uniforme -- en anglais : solid color), du texte, voire des dégradés géométriques. Exemples : un logo, un croquis, un plan, un diagramme (en bâtons, en anneau, en "camembert"), une carte, une bande dessinée (cartoon), etc. Une telle image ne contient le plus souvent qu'un nombre restreint de couleurs.

Pour diminuer la taille d'une photographie numérisée, il faut d'abord la recadrer pour éliminer les zones inutiles, et réduire sa taille. Cette opération ayant pour effet d'introduire du flou, il faut ensuite régler la netteté. Il faut enfin faire un compromis entre le taux de compression et la qualité de l'image résultante.

Contrairement à la photographie, qui est la reproduction de ce qui existe, le dessin au trait est généralement créé par l'homme. Et la manière dont cette création est menée joue un rôle important sur l'aptitude de l'image à se compresser plus ou moins fortement. C'est ce point que nous allons développer dans les chapitres suivants.

Rappelons, pour terminer cette introduction, que l'image joue un double rôle :

elle assure une fonction esthétique. Les arrondis, les bordures, les fonds de page, etc. constituent de bons exemples d'images à fonction décorative. Une page web correctement décorée est plus agréable à regarder qu'une page uniquement constituée de texte noir sur fond gris (voir les débuts du web);
elle peut transmettre des informations qu'il serait difficile de faire passer avec du texte seul. C'est le cas de beaucoup de dessins au trait, dans les domaines scientifiques, techniques, économiques, financiers, etc. -- auxquels il faut ajouter les logos, qui permettent d'identifier un organisme au premier coup d'oeil. De telles images justifient l'adage qui affirme que "un bon dessin vaut mieux qu'un long discours". La possibilité de diffuser des images est l'une des forces d'Internet, et l'une des causes de son développement fulgurant.

Les images qui transmettent un message informatif sont évidemment plus importantes que celles qui transmettent un message purement esthétique. Mais ces dernières ne doivent pas être négligées pour autant : un même contenu sera plus facilement accepté s'il est bien présenté, et il faut atteindre un bon équilibre dans l'utilisation des deux types d'images. C'est tout l'art de ce qu'il est convenu d'appeler la communication graphique.

Notons pour terminer que toutes les études montrent que la communication graphique est nettement plus efficace en couleur qu'en noir et blanc ou en nuances de gris.