L'image et internet

L'image : document numérique

Comme le texte, l'image numérique est inscrite sous forme binaire sur les disques durs ou autres supports de stockage.
L'objectif de ce cours consiste à appréhender l'image numérique : ce qu'elle est, sa "réalisation", son insertion dans les documents.

Qu'est-ce qu'une image numérique

Les images dont nous parlons, sont principalement destinées à être consultées sur un écran (éventuellement imprimées). De cette constatation découle l'étude d'un certain type d'images numériques. Nous laisserons par exemple de côté l'étude des images destinées au flashage, à l'impression sous toutes ses formes, nous pourrons néanmoins les évoquer à titre indicatif.

L'écran informatique

Puisque nous sommes "restreints" aux images pour écran il est indispensable de connaître le mode d'affichage des écrans. Il est fondé sur la synthèse additive de trois couleurs fondamentales que sont le Rouge, le Vert, le Bleu (RVB). Ainsi la réunion des couleurs permet d'obtenir le blanc et l'absence des ces trois couleurs le noir. Pour les autres les combinaisons suivantes sont à observer

Synthèse additive

Ecran

R+V=Jaune

R+B= Magenta

V+B=Cyan

Synthèse soustractive

Papier

C+M=Bleu

C+J=Vert

J+M=Rouge

On soustrait donc à la lumière blanche ses composantes bleues, vertes et rouges à l'aide de filtres respectivement jaunes, magenta et cyan

Jean Marie Gachon et Pierre Juillot, université de strasbourg

Sur un écran, une image numérique est constituée d'une succession de points (appelés pixels, picture element ). Plus le nombre de points est élevé, plus l'image est précise, on parle de définition de l'écran, elle s'exprime en DPI ou PPP (Dot Per Inch et Point Par Pouce).
Tous les écrans n'ont pas la même définition (actuellement de 72 à 100 ppp), ni le même nombre d'affichage des couleurs (de 256 à 16,7 millions).

Une image en adéquation avec le support de lecture

La technique d'affichage et les restrictions de chaque écran mettent en avant plusieurs faits :
- les images ne sont pas affichées de façon identique sur tous les écrans : taille de l'image (plus la définition de l'écran est élevée, plus la taille de l'image est petite, ex : changer le mode d'affichage du PC) , nuance des couleurs (ex : changer le nombre de couleur à l'écran)]
- il n'est pas nécessaire de créer une image correspondant à une définition supérieure à 100 ppp (généralement 75 ppp)
- l' image est composée d'unités élémentaires (les pixels) qui représentent chacune une partie (la plus petite) de l'image.

=> une image est définie par:
- le nombre de pixels en largeur et en hauteur,
- l'étendue des teintes de gris ou des couleurs que peut prendre chaque pixel (on parle de dynamique de l'image).
- son format d'enregistrement. Les données de l'image peuvent être structurées de différentes façons = différents formats d'images (cf. les formats d'images, gif, jpeg, ...). Il existe deux méthodes informatiques pour décrire une image . Un mode Bitmap (matriciel), un mode vectoriel. Schématiquement, l'image Bitmap est une "mosaïque" (une matrice, un tableau) de points, l'image vectorielle est une équation mathématique. Sur le web c'est l'image Bitmap qui est principalement véhiculée. Néanmoins les animations Flash ou des projets comme le SVG (Scalable Vector Graphic, une application du XML) proposent l'alternative du vectoriel. L'intérêt se trouve dans le poids des images car en bitmap chaque point est codé, la taille et la résolution fixes, par essence le vectoriel est plus léger, "dimensionnable".

La résolution d'une image

La résolution est définie par un nombre de pixels par unité de longueur de l'image à numériser en dpi (dots per inch) ou ppp (points par pouce)]. On parle de définition pour un écran et de résolution pour une image.

Plus le nombre de pixels est élevé par unité de longueur de l'image à numériser, plus la quantité d'information qui décrit l'image est importante et plus la résolution est élevée (et plus le poids de l'image est élevé, cf. infra).

La résolution d'une image correspond au niveau de détail qui va être représenté sur cette image.
Pour la numérisation il faut considérer les 2 équations suivantes :
(X*résolution) = x pixels
(Y*résolution) = y pixels

où X et Y représentent la taille (pouce ou cm, un pouce=2,54 centimètres) de la structure à numériser,
où résolution représente la résolution de numérisation,
et où x et y représentent la taille (en pixels) de l'image.

Ci-dessous une reproduction du "nœud rouge" de Kandinsky, (6,7cm X 4,6 cm) numérisée à différentes résolutions
- à gauche on laisse l'affichage standard
- à droite c'est la même séquence d'images mais avec une contrainte d'affichage à l'écran de taille identique (200 X 282 pixels)

150ppp => une taille de l'image en pixel de ? : (395X271)	150ppp
75ppp => une taille de l'image en pixel de ? :	75ppp
25ppp => une taille de l'image en pixel de ? :	25ppp => une taille de l'image en pixel de ? :
12ppp => une taille de l'image en pixel de ? :	12ppp

Ainsi, la taille en pixels diminue en fonction de la résolution et la définition à l'écran diminue aussi avec la résolution. Le poids de l'image dépend aussi de la résolution.

La dynamique de l'image


couleurs	niveaux de gris	bitmap

Les images noir et blanc

Elles sont aussi appelées binaires car les pixels qui les composent ne peuvent prendre que 2 valeurs (n ou b).
Ce type d'image est utilisée par exemple dans le cas de numérisation d'un texte pour envoyer un fax ou réaliser une OCR ou encore pour le WAP (Wireless Markup Language, avec le format WBMP : Wireless BitMaP, poids maxi 0.5 Ko)

Les images dites "true color" (codées sur 24 bits)

En fait l'appellation est trompeuse puisqu'il s'agit d'un échantillonnage du réel, d'une grandeur infinie (représentée par une fonction f(x)) on passe à une grandeur finie en simplifiant. La qualité de l'échantillonnage dépend de la valeur de f(x)et de la qualité de la numérisation (augmentation des PPP => augmentation de l'échantillonnage)

Chaque pixels peut prendre une valeur dans le RVB comprise entre 0 et 255
(soit 256*256*256 possibilités= 16,7 millions de possibilités de couleurs):

(c. boudry URFIST-Paris)

L'information couleur de chaque pixel est donc codée par 3 octets ( 3x8 = 24 bits), ce qui fait des images très "lourdes". De plus tous les écrans n'affichent pas 16,7 millions de couleurs et la différence avec un nombre inférieur de couleur est très infime.

Exemple d'une image numérisée en 16,7 millions de couleurs:

Exemple d'une image en couleurs indexées (256):

Les images à couleurs indexées

Comment concevoir une image de bonne qualité, moins lourde (transfert rapide pour les réseaux) et affichable sur tous les écrans (on ne connaît pas les "lecteurs" ) => indexer les couleurs utiles dans un tableau connexe à l'image (une palette).

Chaque pixel va non plus véhiculer le code couleur RVB qui lui est affecté (ex 200 255 100), mais simplement un chiffre compris entre 0 et 255. A chacun de ces chiffres va correspondre une couleur, définie par son code RVB et stockée dans une palette avec les données de l'image . Lors de la visualisation de l'image, la correspondance se fait entre le numéro de la couleur affecté à chaque pixel (compris entre 0 et 255) et le code couleur RVB correspondant.

Extrait d'une palette couleur

(c. boudry URFIST-Paris)

Ainsi, un pixel à qui sera affecté la couleur numéro 0 sera visualisé en blanc,
un pixel à qui sera affecté la couleur numéro 5 sera visualisé en jaune...

Exemples d'images en "256 couleurs" (couleurs indexées) avec des palettes associées:

Chaque image contenant 256 couleurs peut prendre n'importe laquelle des 16,7 millions de couleurs disponibles dans l'espace R.V.B. Il est clair, que si la palette associée à l'image change, la visualisation de l'image change. A l'enregistrement de l'image le choix d'un type de palette peu être fait Dans ce cas, les données de l'image sont strictement identiques, seule change la palette de couleur qui lui est associée.

palette web

Les images en teintes de gris

En général, les images en niveaux de gris renferment 256 teintes de gris. Image à 256 couleurs, simplement chacune de ces 256 couleurs est définie dans la gamme des gris.
Par convention la valeur 0 représente le noir (intensité lumineuse nulle)
et la valeur 255 le blanc (intensité lumineuse maximale).

Exemple d'une image en niveaux de gris:

Ces images sont codées sur 1 octet et sont utilisées pour reproduire des photos en noir et blanc ou du texte dans certaines conditions (notamment lorsque l'on utilise un filtre pour adoucir les contours pour obtenir des caractères plus lisses).

Autres propriétés importantes d'une image sur le WWW : la transparence et l'entrelacage

La transparence

Il s'agit d'attribuer à une couleur de la palette une absence de couleur (on pourrait dire "couleur transparente") qui ne sera pas affichée lors de la lecture des données de l'image. Cette propriété est très utilisée (et utile) pour les images des pages Web.


rouge transparent	jaune transparent	bleu transparent

attention à la transparence !

L'entrelaçage

Ce mode d'affichage a été mis au point spécifiquement pour une utilisation sur le Web. Son principe est de permettre l'affichage d'une image avant même que la totalité de ses données ne soit arrivée au navigateur en charge de l'afficher.
D'un point de vue du principe d'affichage, les données de l'images arrivent à raison de "une ligne sur X" et s'affichent au fur et à mesure de leur arrivée. Plusieurs formats d'images utilisent cette technique le GIF , le PNG et le JPEG

Exemple avec GIF
Les débits désormais disponiblent sur le web (notamment sur nos universités) ne permettent plus d'observer cette fonctionnalité.

Les images animées

Il s'agit de stocker au sein d'une même image, plusieurs images différentes et la temporisation de l'affichage entre chaque image

Poids, résolution, taille et transfert

Les types d'images que nous étudions, sont véhiculées sur le réseau A ce titre il faut se préoccuper du poids de l'image. On le calcul théoriquement ainsi :

hauteur x largeur (en pixels) de l'image x le nombre d'octets nécessaire au codage de la dynamique de l'image.

- par exemple une image de100 pixels X 100 pixels codée en couleurs indexées (1 octet) = 10 000 octets, soit 9,77 Ko
- cette même image codée en 16,7 millions de couleurs (3 octets) = 30 000 octets, soit 29,30 Ko
- en doublant la taille de l'image on obtient 40 000 octets soit 39 Ko en couleurs indexées et 117 Ko en 16,7 millions de couleurs, ainsi le poids de l'image ne double pas mais quadruple !

Nous avons vu que de la résolution à la numérisation dépendait la taille en pixels de l'image. Ainsi il est fortement recommandé de ne pas excéder les 100 ppp (cf. définition de l'écran), d'estimer au plus prés la taille que devra prendre l'image dans la page web et se contenter des couleurs indexées généralement suffisantes... bref de "jouer" avec la qualité de l'image afin de construire une image la plus légère possible et ce dans un souci de transfert des fichiers.

Attention, la vitesse, le débit d'une ligne est souvent exprimée en bits/s => 1 octet = 8 bits.

Ainsi, un vieux modem V90 (RTC) à un débit idéal (théorique) de 56 Kb/s indique un débit d'environ 7ko/s
Une ligne ADSL/câble peut avoir un débit idéal de 512 Kb/s, 1Mb/s, 2Mb/s, 20Mb/s, .... 100Mb/s

aussi pour une image de 10 Ko il faudra :
modem : 1,40 sec
ADSL(1Mb/s = env. 122 ko/s) : 0,08 sec

aussi pour une image de 120 Ko il faudra :
modem : plus de 17 sec
ADSL : env. 1 sec

Ainsi lors de la construction d'un site ou d'une page www, il faut se poser la question du chargement des fichiers. ..

Les formats d'images

On distingue les formats d'images en fonction :
- de la méthode de description de l'image (bitmap ou vectorielle) (cf.supra)
- du nombre de couleurs (cf. supra)
- de la compression (cf. ci-dessous)
- de la transparence, entrelaçage (cf. supra)

Méthodes de compression

Les principales méthodes de compression utilisées pour les images sont la méthode LZW et le codage "run-length" pour les méthodes de compression sans perte. En ce qui concerne les méthodes avec perte, on peut citer le standard JPEG (attention JPEG 2000)

- La méthode LZW (Lempel-Ziv Welch), basée sur un algorithme de Lempel et Ziv. Schématiquement, on peut considérer qu'elle consiste à analyser le flot de données qui lui est soumis, et à construire au fur et à mesure un codage des séquences de valeurs rencontrées, en repérant des suites qui se répètent, et en leur associant un code plus court.

- Le codage RLC Run Length Compression ou RLE (Run Length Encoding) consiste, lorsque plusieurs pixels consécutifs sont identiques, à les coder sous la forme d'un facteur de répétition, suivi de leur valeur commune. Ainsi, une suite telle que 000111112222200220033330111111 deviendra 305152202220431061, soit 18 caractères au lieu de 30.

- Le codage JPEG a été défini par un groupe commun entre le CCITT et l'ISO, appelé Joint Photographic Expert Group. Il propose une compression avec un contrôle du niveau de dégradation accepté. L'algorithme est basé sur le fait que l'oeil humain est plus sensible aux changements de brillance (luminosité, contraste) que de couleurs voisines

Les principaux formats

Comme indiqué précédemment, il existe de nombreux formats et logiciels de codage et de stockage d'images, mettant en oeuvre de manières différentes les méthodes de compression. Certains d'entre eux sont plus fréquemment rencontrés que d'autres.

- Le format " raw " indique qu'aucune méthode de compression n'est utilisée. On peut ainsi très facilement écrire un fichier image (cf. ci-dessous). Il faut cependant avoir des indications sur la manière dont les pixels sont codés pour relire des fichiers dans un tel format (1, 3 ou 4 canaux, stockage pixel par pixel (RGBRGBRGBRGB ...) ou couleur par couleur (RRRR.... GGGG..... BBBBB.....) avec ou sans table de couleurs, etc ...

=> fichier xls enregistré en ascii, puis en binaire et ouvert sous avec un logiciel de traitement d'image

- TIFF (Tagged Image File Format) (.tif) est un format extensible qui a été défini par Aldus et Microsoft. Il permet de stocker des images compressées par la méthode LZW . Il faut noter qu'il s'agit en réalité d'un format permettant de prendre en compte différentes méthodes de compression, et divers formats. Il arrive donc parfois que certains décodeurs TIFF ne puissent interpréter qu'un sous-ensemble des codages possibles.

Mais ces format ne sont pas présents sur le WWW, il faut citer les formats :

GIF (Compuserve Graphics)
Nombre de couleurs supportées : 256 couleurs avec palette.
Compression : LZW
Transparence : oui
Entrelaçage : oui
Animation : oui
Usages : les logos, ou tout ce qui contient peu de nuances de couleurs et avec des transitions de couleurs brusques.
Exemple : les images ci-dessus sont en GIF

JPEG (Joint Photo Expert Group)
Nombre de couleurs supportées : 16,7 millions
Compression : JPEG, (degrés de dégradations de l'image)
Transparence : non
Entrelaçage : oui
Animation : non
Usages : les images avec de grands dégradés de couleurs (transition douce de couleurs).
Exemples avec différents degrés de compression de compression:


compression minimum, qualité maximum = 59 Ko	Compression maximum, qualité minimum = 39 Ko

PNG (Portable Network Graphics)
Nombre de couleurs supportées : vraies couleurs, niveaux de gris et 8 bits, basées sur l'utilisation d'une palette.
Compression : LZW
Transparence : oui
Entrelaçage : oui
Animation : non
Usages : "tout terrain" (remplacement du gif )
Exemple :

Avec ces formats d'images bitmap il faut aussi compter sur un format vectoriel :
SVG (Scalable Vector Graphics) Exemple (2 Ko) : cliquer ici et utiliser control-clic pour faire un zoom avant, control-shift-clic pour faire un zoom arrière et alt-clic pour déplacer ou se déplacer dans l'image (>>nécessite le viewer SVG Adobe, sinon actuellement les principaux navigateurs supportent le SVG en standard, sans les fonctionnalités supplémentaires )

Si l'on dispose depuis longtemps de formats pour diffuser des graphiques bitmap sur le Web, il n'existait jusqu'alors aucun standard pour les images ou les animations vectorielles. Il fallait passer par des formats propriétaires comme Flash ou QuickTime. L'arrivée de SVG , change la situation. A l'instar de PostScript, SVG utilise une technique de texte structuré (XML) qui décrit avec précision les caractéristiques de l'image vectorielle. Très compact, un fichier SVG prend ainsi moins de place que son équivalent Gif ou Jpeg, même si ces deux formats restent irremplaçables pour la diffusion de photographies ou d'images purement bitmap.

Très légers !
L'image étant vectorielle, sa qualité ne se dégrade pas, même sur un écran de petite taille. De même, on peut zoomer ou imprimer sans qu'apparaisse l'effet de crénelage propre aux images en mode point. Le format, scriptable, autorise l'emploi des fonctions JavaScript comme OnMouseover ou onload pour appliquer des effets ou animer le contenu de l'image, par exemple. Plus de détails sur www.w3c.org/Graphics/SVG.

SOURCES :

http://web.ccr.jussieu.fr/urfist/image_numerique/image.htm (C. Boudry URFIST-Paris)
http://www.culture.fr/culture/mrt/numerisation/fr/technique/technique.htm
http://www.hangover.fr/outils/image_num.html
http://perso.wanadoo.fr/oi-tregor/numeric/photoshop/index.html
http://physpc21.u-strasbg.fr/~juillot/image/cours.html
http://www.adobe.fr
http://www.w3c.org