Rappel sur l'image numérique

Un article de Wiki URFIST.

Sommaire

[modifier] 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.

[modifier] 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

quelle synthèse ?
Synthèse additive Synthèse soustractive
Image:Anim1synADD.gif Image:Anim2syntsous.gif

Ecran

  • R+V=Jaune
  • R+B= Magenta
  • V+B=Cyan

Papier

  • C+M=Bleu
  • C+J=Vert
  • J+M=Rouge

Jean Marie Gachon et Pierre Juillot, université de strasbourg

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

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).

[modifier] 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.

[modifier] 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".


[modifier] 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


Résolution
Affichage "libre" selon résolution de l'image Affichage contraint avec une largeur de 300 pixels
150ppp => une taille de l'image en pixel de ? : (395X271) Image:Kan150.gif
150ppp
75pppImage:Kan75.gif
75ppp
25pppImage:Kan25.gif
25ppp
12pppImage:Kan12.gif
12ppp


[modifier] La dynamique de l'image

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):

Image:TabValCoul.gif

( source : 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:

Image:Jack16M.jpg

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

Image:Jack256.gif

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

Image:PalCorres.gif

(source : 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:

Image:Olive.gif Image:PallCoul.gif
Image:Kan50.gif Image:PalCoul2.gif

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.

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).

Image:TeinteGris.gif

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).

Image:G-nb.gifImage:G_gris.gif

[modifier] 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

  • Le format " raw " indique qu'aucune méthode de compression n'est utilisée.
  • 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.
  • 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.
  • 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:

Image:KanMAX.jpg Image:KanMIN.jpg
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 )


Avec ces formats d'images bitmap il faut aussi compter sur un format vectoriel :

  • SVG (Scalable Vector Graphics) Exemple au format A2 : (36 Ko)

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. 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.

[modifier] 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