Wiki ISN

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.


====== Quelles différences y a-t-il entre les principaux formats d'images? ======

Les images sont indispensables de nos jours, elles forment un moyen de communication universel partout dans le monde et sont massivement utilisées. Ainsi afin de pouvoir utiliser des images numériques sur nos ordinateurs, il a fallu développer des manières de pouvoir les sauvegarder et de les visionner (compression / décompression), amenant alors sont lot de formats d'images.

Chaque format d'image à ses avantages et ses inconvénients, mais en général les images se divisent en 2 grandes catégories : les images  matricielles/bitmap et les images vectorielles.


====== I - Les images matricielles ======


Une image « matricielle », ou « bitmap », est une image constituée d'une matrice de points (pixels) colorés. C'est-à-dire, constituée d'un tableau, d'une grille, où chaque case possède une couleur qui lui est propre et est considérée comme un point. Il s'agit donc d'une juxtaposition de points de couleurs formant, dans leur ensemble, une image.

{{ :les_exposes:bitmap_image.png?250 |}}


Les images bitmap permettent d'avoir un rendu réaliste et détaillé, cependant elles ne permettent pas de garder au zoom une certaine qualitée et l'on voit apparaître à l’œil nus des effets indésirables.

Il existe différents formats de codage d'une image matricielle, nous allons ici traiter des formats .bmp, .gif et .jpg.



===== 1- Le format .bmp =====

Le bmp ou Windows bitmap est un format d'image créer par Windows et IBM. C'est un format sans compression, c'est a dire que notre tableau de cases ne subit aucun traitement pour diminuer les "poids" de l'image. Ce qui nous donne alors une image finale sans perte de qualité "lossless" mais qui à le désavantage d'être très volumineuse.


Le ficher au format bmp se divise en 4 parties :
  * l'entête du fichier
  * l'entête de l'image
  * la palette
  * l'image

==== l'entête du fichier ====

L'entête du fichier contient de multiples informations utile à l'ordinateur, 
  * La signature : permet à l’ordinateur de savoir qu'il doit afficher un .bmp (sur 2 octets)
  * 2 caractères indiquant sur quel versions du .bmp l'image à été créer
  * la taille de l'image en octet (sur 4 octets)
  * un champ réservé pour savoir quel logiciel à créer/modifier l'image (sur 4 octets)
  * l'offset/ le décalage de l'image, a partir de quand commence vraiment le codage de l'image (sur 4 octets)

==== l'entête de l'image ====

  * taille de l’entête de l'image
  * largeur de l'image
  * hauteur de l'image
  * nombres de plans (toujours égal à 1)
  * nombre de bit par pixel (1, 2, 4, 8, 16, 24 ou 32)
  * Une valeur entre 0 et 3 compris pour connaitre le type de compressions utilisé (0 = pas compressé)
  * taille totale de l'image
  * nombre de pixel par mètre horizontalement (résolution horizontal)
  * nombre de pixel par mètre verticalement(résolution vertical)
  * nombre de couleurs de la palette 
  * nombres de couleurs importantes de la palette

==== La palette ====

La palette n'est pas obligatoirement remplie, mais lorsqu’elle l'est, elle contient une composante rouge, une bleue et une verte avec un champ réservé en plus.

==== L'image ====

Le codage de l'image est simple, lorsqu'une ligne de pixel commence on écrit la valeur de la couleur de pixel et on passe au suivant. Seule obligation une ligne doit comporter un multiple de 4 octets, si ce n'est pas le cas la ligne est complétée avec des 0.

Les images en .bmp sont codées à l'envers, c'est a dire qu'on ne lit pas en RVB mais en BVR et que la dernière ligne du fichier de l'image est en fait la première de l'image.

Ainsi par exemple avec une une image codée en noir et blanc au format bmp nous obtenons ce tableau :

{{ :les_exposes:bmp_noir-blanc.png?400 |}}

===== 2- Le format .gif =====

Le format .gif est très répandu sur le web, il a été créé au début d'internet lorsque les cartes graphiques n'affichait pas plus de 256 couleurs, de plus c'est le seul format qui permet d'afficher des images animées. Seulement celles-ci sont limitées à 256 couleurs par image, parmi un choix de 16 777 216 couleurs différentes ce qui en fait son principal désavantage. Les images sont cependant de très faible poids et très rapides à charger dû à ce faible nombre de couleurs. Depuis le .gif a évolué et on peut désormais utiliser de la transparence sur les images.

{{ :les_exposes:gif_anime.gif?200 |}}
''cliquez sur l'image pour la voir animée''

Le principe de compression consiste à simplifier le code des parties de rangées de pixels de même couleur.


===== 3- Le format .jpeg =====

Le format jpeg est l'un des plus utilisés au monde, c'est celui utilisé dans la majorité des appareils photo de base. Il a l'avantage d'avoir une très grande compression et ainsi un poids d'image nettement réduit mais ceci est bien sûr permit au détriment de la qualité.

Voici comment se déroule la compression d'une image .jpeg
  * Conversion en YcbCr de l'image
  * Sous-échantillonnage de la chrominance
  * Transformée en cosinus discrète
  * Quantification
  * Parcours en zigzag
  * Algorithme de Huffman

==== Conversion en YcbCr de l'image ====

Notre œil contient des bâtonnets qui différencient les couleurs mais aussi des cônes qui font la différence des intensités lumineuses et ceux-ci sont plus précis et sont donc utilisé ici.

En divisant l'image en 3 parties on peut la reconstituer entièrement, on la décompose en :
  * Y (l'image en niveau de gris)
  * Cb (chrominance bleue)
  * Cr (chrominance rouge)

Après une division voici le résultat : 

{{ :les_exposes:YcbCr.png?150 |}}

==== Sous-échantillonnage de la chrominance ====

On transforme ensuite les 3 images obtenues en 3 tableaux contenant les nombres correspondant aux valeurs des couleurs, voila un résultat possible pour une petite image : 

{{ :les_exposes:YcbCr_tableaux1.png?600 |}}

On regroupe ensuite des carrées de 2*2 pour Cb et Cr, par exemple les paquets de 4 carrés de Cb réunit dans les carrés rouges. On additionne les 4 valeurs du carré rouge et on divise par 4 ce qui nous donne la moyenne, on recommence pour les 3 autres et cela nous donne un nouveau tableau de 2*2, on vient de diviser par près de 4 le poids de l'image sans perte visible de qualité.

{{ :les_exposes:YcbCr_tableaux2.png?500 |}}

==== Transformée en cosinus discrète ====

Notre image peut donc se transformé sous la forme suivante, x et y étant les coordonnées et la hauteur étant la couleur du pixel.

{{ :les_exposes:cos.png?200 |}}

Cette image peut se transformer en plusieurs fonctions cosinus et sinus, on va ensuite prendre un carré de 8*8 pixel que l'on va représenter dans un tableau sous cette forme, les amplitudes des cosinus sont entré dans le tableau. Les hautes fréquences se retrouvent donc en bas à droite du tableau.

{{ :les_exposes:cos2.png?500 |}}

==== Quantification ====

On reprend le tableau obtenu à l'étape précédente et on le divise par un autre tableau obtenu depuis l'algorithme. En reprenant une autre image cela donne :

{{ :les_exposes:tableaux_quantifie.png?400 |}}

C'est durant cette étape que l'on perd le plus en précision car lors de la décompression on multiplie le tableau obtenu par celui utiliser pour la division mais lorsque l'on obtient un 0 en divisant, il reste 0 en multipliant.

==== Parcours en zigzag ====

On enregistre ensuite le tableau quantifié dans un nouveau tableau mais en changeant l'ordre des valeurs, on part du haut à gauche pour finir en bas à droite en suivant cette forme :

{{ :les_exposes:zigzag.png?200 |}}

Le logiciel supprime ensuite tous les 0 de la fin ce qui laisse une liste réduite de chiffres et permet de gagner encore beaucoup de place.

==== Algorithme de Huffman ====

L'algorithme de Huffmam utilise une méthode spéciale pour coder les chiffres en binaire, par exemple 5 pourra parfois avoir la valeur 10 ou parfois 10010. L’algorithme compte combien de fois chaque chiffre est utilisé et créé un arbre avec.

Voici un exemple avec la phrase "le hollandais volant":

{{ :les_exposes:huffman1.png?800 |}}

Les lettres n’apparaissant qu'une fois sont mises en bas de l'arbre avec le nombre de fois qu'elles apparaissent à côté. On additionne ensuite le nombre de fois qu'elles apparaissent, ici E(1)+H(1)=EH(2) et on continue l'arbre jusqu’à avoir chaque lettre et seulement 2 branches. Il suffit ensuite de lire pour avoir la valeur binaire de chaque lettre, H = 00011. Cet algorithme permet également de faire en sorte que la fin d'une lettre ne soit pas le début d'une autre ce qui évite les confusions.


====== II- Les images vectorielles ======

A l'inverse des images bitmap, les images vectorielles sont des représentations de formes géométriques telles qu'un cercle, un rectangle ou un segment. Ceux-ci sont représentés par des formules mathématiques (un rectangle est défini par deux points, un cercle par un centre et un rayon, une courbe par plusieurs points et une équation). C'est l'ordinateur qui sera chargé de "traduire" ces formes pour par la suite les afficher.


{{ :les_exposes:peche_vectorielle.png?200 |}}

''A gauche une image vectorielle, à droite la même en image matricielle.
L'image montre différents niveaux de zoom de l'image de base, on voit que l'image vectorielle reste net alors que la matricielle devient totalement floue.''

Ces images permettent alors (puisqu'elles sont composées de "vecteurs" et non de pixels) de travailler avec sans perte de qualité, cependant il faut que l'image soit composée de formes simple ce qui convient parfaitement pour des logos par exemple mais qui ne convient pas pour des images réalistes que l'on pourrait prendre en photo.

====== III- Conclusion ======
Il existe de nombreux formats d'images différents, chacun ayant leurs avantages et leurs inconvénients. C'est cependant à vous de choisir le format d'image le plus adapté en fonctions de vos besoin.


----
===== Sources =====

http://lehollandaisvolant.net/science/jpg/
http://fr.wikipedia.org/
http://www.commentcamarche.net/contents/1217-images-bitmap-et-vectorielles
http://www.commentcamarche.net/contents/1200-bmp-format-bmp
http://www.alrj.org/docs/formats/bmp/BMP.htm
Wiki ISN

Outils pour utilisateurs

Outils du site

Outils de la page
