Le Livre d'Argent

Depuis une grosse trentaine d'années que les environnements graphiques envahissent nos ordinateurs(1), nos écrans ont eu besoin d'afficher plein de couleurs différentes. Comment font-ils ? Assez simplement, en fait : le principe de base est qu'ils émettent de la lumière de trois couleurs différentes, et que nos yeux se chargent de faire le mélange.

Bleu, vert et rouge. Ces trois couleurs seules suffisent, parce que ce sont de toute façon ainsi que nos yeux fonctionnent dans la vie de tous les jours. Je vous explique ça un peu plus en détail dans cet autre article, dont celui-ci forme en fait la seconde partie. N'hésitez pas à lire les deux

Il y a, me semble-t-il, plusieurs technologies possibles pour l'émission de ces trois couleurs. Les anciens modèles utilisaient des tubes cathodiques, comme les télévisions de l'époque ; quand les modèles plus récents (et plats) utilisent plutôt des cristaux liquides. Je suis loin d'être expert, mais Wikipédia vous en apprendra peut-être davantage.

Quoi qu'il en soit, chaque point de cet affichage – chaque pixel – est donc constitué de trois points plus ou moins lumineux. J'ai déjà rapidement évoqué la chose en note dans cet article (dont la lecture pourra éventuellement vous servir pour la suite), mais puisque nous sommes dans un article dédié, autant recommencer plus explicitement.

Chaque point lumineux peut donc être plus ou moins éclairé. Comme l'ordinateur compte en binaire (l'article que je viens de mentionner vous expliquera ce que c'est, au juste, que le binaire, si vous n'êtes pas familier de cette notion – et pourra même vous apprendre à compter en binaire sur vos doigts, si ça vous intéresse), on a décidé que cette luminosité s'exprimerait en binaire.

Plus précisément, on a associé un octet (une suite de huit chiffres binaires(2)) à chacune des trois couleurs, ce qui fait donc une luminosité pouvant varier de 0 à 255 pour chacune des trois couleurs (2⁸ = 256). Les plus perspicaces d'entre vous, surtout s'ils sont armés d'une calculatrice, auront déjà conclu que cela permet pas loin de dix-sept millions de couleurs (256³ = 16777216).

C'est beaucoup. Tellement qu'elles n'ont bien sûr pas toutes un nom particulier (même s'il existe tout de même beaucoup de noms différents) ; et tellement aussi qu'il est difficile à l'œil humain de toutes les différencier.

Néanmoins, au cas où ça ne suffirait pas, on peut également rajouter une autre information : la transparence. Une quatrième valeur numérique entre 0 (pour complètement transparent) et 255 (pour complètement opaque), soit sur un octet également.

Bien sûr, un pixel transparent ne vous permettra pas de regarder à travers votre écran : le système graphique fonctionne comme si plusieurs couches se superposaient, avec en tout dernier une image (considérée comme opaque) servant de « fond d'écran », ou d'« arrière-plan » : pour chaque pixel partiellement « transparent », le système va aller chercher la couleur à afficher juste en dessous, et va calculer le résultat attendu(3).

On peut donc utiliser deux modes de représentations des couleurs (il y en a d'autres, mais j'en reparlerai brièvement un peu plus bas) : le mode « RGB » (pour « red, green, blue », soit rouge, vert et bleu en anglais), et le mode « RGBA », qui y ajoute l'« alpha », c'est-à-dire la transparence.

La notation la plus courante pour ces deux modes de représentation est d'utiliser une suite de six, ou huit, chiffres hexadécimaux (voyez l'article sur les bases cité plus haut) : le chiffre « FF », en hexadécimal, correspond en effet à « 255 » dans notre base 10 habituelle, et toutes les valeurs que peuvent prendre un octet peuvent donc être exprimées.

Les deux premiers chiffres de cette suite représentent donc le rouge, les deux suivants le vert, puis le bleu ; et l'alpha vient en dernier s'il est présent(4). Selon l'endroit où on l'utilise, cette dénomination commune peut être légèrement différente(5), mais j'utiliserai ici essentiellement celle du langage HTML, dans laquelle on fait précéder ces trois chiffres par un caractère « # »(6) (comme dans la liste précédemment citée, ou dans les pages d'essai que je vous indique dans l'autre partie de l'article).

Si je prends, dans ladite liste, le code correspondant à la couleur dénommée « DodgerBlue », qui est « #1E90FF », je peux donc assez facilement constater que le rouge va très peu s'allumer (1E en base 16, soit 30 en base 10) ; que le vert va s'allumer moyennement (90 en base 16, soit 144 en base 10) ; et que le bleu, lui, s'allumera complètement (FF en base 16, soit 255 en base 10, le maximum possible).

Mais ces couleurs, on ne fait pas que les afficher à l'écran. Ça nous intéresse aussi parfois de mémoriser les images correspondantes dans des fichiers. Et, justement, l'une des différence entre les formats d'images communs est la façon de déterminer la couleur(7).

Je vais prendre quatre exemples connus de formats d'images : le GIF (« Graphics Interchange Format »), le JPEG (« Joint Photographic Experts Group », qui est le nom du groupe ayant inventé ce format), le PNG (« Portable Network Graphics ») et le SVG (« Scalable Vector Graphics »).

Commençons par ce dernier : contrairement aux trois autres, il s'agit d'un format vectoriel, c'est-à-dire qu'il est composé de définitions de formes géométriques, permettant au logiciel qui l'affiche de le tracer correctement quelle que soit la taille disponible (voyez Wikipédia).

En pratique, le SVG est une sorte de langage de mise en forme, utilisant la syntaxe XML. Les couleurs à utilisées sont enregistrées dans le reste du texte du fichier, et le programme qui l'affiche calcule ce que cela doit donner pour chaque point à afficher.

Par exemple, l'instruction SVG suivante :

<rect x="0" y="0" width="200" height="100" style="fill:#000000; stroke:#FFFFFF" />

va générer l'affichage d'un rectangle de 200 pixels de largeur et de 100 pixels de hauteur (rapportés à la taille de base de l'image, c'est-à-dire que ce sera agrandi ou réduit en fonction du zoom utilisé), qui sera colorié en noir (« #000000 ») et encadré en blanc (« #FFFFFF »).

Vous pouvez, si ça vous tente, apprendre à écrire du SVG « à la main » avec votre éditeur de texte ; mais il vous sera probablement plus agréable d'utiliser un logiciel spécialisé dans le dessin vectoriel. Inkscape est celui que je vous conseillerais pour cela.

Les trois autres formats sont donc des, plus classiques, formats matriciels, c'est-à-dire qu'ils sont composés d'un tableau à deux dimensions (une « matrice ») contenant, à chaque case, les informations pour afficher un pixel en particulier. Pour gérer les formats matriciels, le logiciel que je vous conseillerais est The GIMP… mais attention, il s'agit d'un véritable outil de traitement d'images avancé. Prenez plus simple si vous voulez juste crayonner un peu

Des trois formats qu'il me reste à mentionner, le PNG est celui qui fournit le plus de possibilités, car il peut associer à chaque pixel une couleur en mode RGBA. Une image au format PNG peut donc contenir de la transparence partielle, comme on en rencontre, par exemple, dans les ombres de certaines icônes d'applications. Regardez par exemple en bas de celle de Mozilla Thunderbird :

Le JPEG, en revanche, ne permet pas la transparence : les informations fournies pour chaque pixel sont donc uniquement en mode RGB. De plus, le plus souvent, ce format est utilisé de manière à lisser les détails : l'enregistrement fait une moyenne entre les couleurs de plusieurs pixels proches les uns des autres.

Cela fait que l'image perd quelque peu en qualité (les détails disparaissent un peu), mais que le fichier ainsi obtenu est beaucoup plus léger – c'est la raison pour laquelle on utilise beaucoup le format JPEG pour les images d'arrière-plan sur les pages web, par exemple : plus elles sont légères, plus vite la page se charge, et comme elles sont à l'arrière-plan, on n'a pas besoin de transparence.

Bon, il est aussi possible d'annuler cette perte d'information, en réglant, à l'enregistrement, la qualité sur 100%, mais ça fait des fichiers beaucoup plus volumineux (et ça ne restaure pas les informations perdues lors des éventuels enregistrements précédents).

Si vous voulez une image légère, peu importe ses détails, utilisez du JPEG. S'il est important que l'image conserve toute sa qualité, utilisez du PNG, qui offre tout de même des fichiers de taille raisonnable.

Pour le format GIF(8), le système est un peu particulier : on n'utilise pas le modèle de couleurs décrit plus haut, mais un système de « couleurs indexées ». Une palette, c'est-à-dire un jeu de 256 couleurs (ou moins), est enregistrée spécialement avec le fichier, et tous les pixels de l'image doivent être de l'une de ces couleurs. Cette palette peut contenir une « couleur » désignant la transparence, mais seulement la transparence complète (pas de transparence partielle comme en RGBA).

Ce mode de couleurs indexés peut également être utilisé dans certains cas pour le travail sur les images. Par exemple, si l'on veut une image qui soit réellement en noir et blanc, le moyen le plus simple est de le convertir en couleurs indexées en utilisant une palette standard ne comprenant que ces deux couleurs.

Mais la plupart du temps, ce que l'on désigne abusivement par « noir et blanc », ce sont en fait des images en niveaux de gris, c'est-à-dire que leurs pixels peuvent prendre plein de couleurs autres que le noir pur et le blanc pur, du moment que ces couleurs ne soient ni spécialement rouges, ni spécialement vertes, ni spécialement bleues.

Une nuance de gris (on appelle ça aussi une « valeur »), c'est donc une couleur pour laquelle les trois composantes présentent exactement la même valeur numérique. Par exemple, pour #888888, les trois composantes sont à moitié allumées (88 est la moitié de FF, en base 16).

Pour convertir une image colorée en nuances de gris, le plus simple serait, pour chacun de ses pixels, de faire la moyenne entre ses trois couleurs. Cependant, c'est un peu plus compliqué que ça, parce que l'œil humain n'associe pas exactement autant de luminosité à chacune des trois couleurs. On utilise donc des coefficients un peu particuliers, en fonction de ça. Plutôt que d'utiliser (R + G + B) ÷ 3, le calcul ressemble plutôt à 0,2125 × R + 0,7154 × G + 0,0721 × B.

Par exemple, pour la couleur désignée par #045729 (un vert sombre), qui donne en base 10 des valeurs de R = 4, G = 87 et B = 41, on calcule 0,2125 × 4 + 0,7154 × 87 + 0,0721 × 41, ce qui donne à peu près 66 en base 10, soit 42 en base 16, et la couleur grise correspondante est donc #424242.

Outre les couleurs indexées et les niveaux de gris, il existe en fait, comme je vous l'expliquais brièvement plus haut, d'autres manières de représenter les couleurs.

On peut notamment citer une approche appelée TSV, pour « teinte, saturation, valeur » (en anglais, HSB pour « hue, saturation, brightness »), qui utilise un « cercle des couleurs », sur laquelle les différentes teintes sont placées par proximité (la position zéro ayant été arbitrairement réservée au rouge), et qui, pour chaque teinte de base, fait varier la valeur (plus elle est basse, plus on est proche du noir ; plus elle est élevée, plus on est proche du blanc) et la saturation (plus elle est élevée, plus la teinte de base ressort ; plus elle est basse, plus on se rapproche du gris).

On peut également parler de la quadrichromie, qui utilise un jeu de quatre informations pour reproduire, plutôt que le mélange additif de la trichromie, le mélange soustractif que je vous ai brièvement décrit dans l'autre partie de l'article.

Je ne détaillerai cependant pas ces deux points, d'abord parce que cet article commence à être suffisamment long comme ça, et d'autre part parce que je maîtrise beaucoup moins bien ces aspects. Des artistes de ma connaissance vous en diront peut-être un peu plus en commentaire. Samuncle, par exemple ?