Image numérique




Fréquence d'échantillonnage / Fréquence de restitution



  • Nous allons maintenant regarder l'aspect d'échantillonnage et de sous-échantillonnage appliqué à l'image. Lançons le logiciel XnView. Ouvrons l'image « cercle.gif ». Allons dans le menu « Image → Redimensionner... ». Nous devons obtenir la fenêtre suivante :

Menu dans XnView


  • Donnons les valeurs suivantes à la résolution de l'image (en pixels / pouce) : 72, 36, 18 et 9 pixels.




Cercle 72dpi


Cercle 36dpi
Cercle 18dpi
Cercle 9dpi

  •  Changeons d'image pour observez les détails :


Banania 72dpi
Banania 36dpi
Banania 18dpi
Banania 9dpi

  • Comment ce sous échantillonnage se comporte sur une image avec des zones uniformes (basses fréquences) par rapport à une image avec des textures (hautes fréquences).
  1. Le sous-échantillonnage sur une image diminue le nombre de pixels, Plus le sous-échantillonnage est fort moins l'image est visible et précise.

Images Vectorielles / Images Matricielles



  • Il existe deux grand types d'images, les images vectorielles et matricielles. Donnez la définition de chacune d'entre elle en vous aidant d'internet
  1. Images vectorielles : nombre défini de pixels, stockés sous forme géométrique simple ( carré, rond ).
  2. Images matricielles : se compose de tableaux de pixels ou de points de couleurs.


  • Ouvrez le fichier « dessin2.svg » à l'aide du navigateur firefox. Agrandissez l'image au  maximum possible avec Firefox. Faites de même avec le fichier « dessin2.bmp ». Comparez ces 2 images agrandies
  1. L'image dessin2.svg est sous format vectoriel et reste net après le zoom.
  2. L'image dessin.bmp est sous format matriciel et se pixelise lors du zoom.


  • Comparez la taille en octets des deux fichiers (svg et bmp). Que pouvez-vous en déduire?
  1. Le fichier svg prend moins de place que le fichier bmp (720 octets pour le .svg et 187Ko pour le .bmp)
  2. On peut en déduire que pour un gain de place évident il faut prendre le format .svg le format d'image vectorielle.



  • Ouvrez maintenant à l'aide de Notepad++ le fichier « dessin.svg ». Décrivez chaque ligne de ce fichier succinctement


    > <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    > Une déclaration XML, encodage en UTF-8, version 1.0 de fichier xml

    > <!-- Created with Inkscape (http://www.inkscape.org/) -->
    > Inkscape est un éditeur de graphisme vectoriel, similaire à Adobe

    > <svg
    > ouverture de la balise svg (Scalable Vector Graphics) « graphique vectoriel adaptable1 » est un format de données conçu pour décrire des ensembles de graphiques vectoriels et basé sur XML (Wikipedia)

    > xmlns:svg="http://www.w3.org/2000/svg"
    > Le name space

    > version="1.0"
    > La version

    > x="0"   y="0"
    > Les coordonnées

    > width="300"   height="200"
    > La taille de l'image ( largeur:300 & hauteur:200 )

    > id="svg2">
    > Donne un id a la balise svg2

    > <defs
    > Ouvre la balise defs

    > id="defs4" />
    > Donne un nom a la balise defs et fermeture

    > <g
    > Ouvre la balise g

    > <rect
    > Ouverture balise rectangle

    > width="300"   height="120"
    > Largeur          Hauteur

    > x="0"    y="20"
    > Coordonnées abscisse        Coordonnées ordonnée     

    > style="fill:green;"
    > Attribut la couleur verte au rectangle

    > id="rect1306" />
    > Donne un id a la balise rect et la ferme

    > <rect
    > Ouverture balise rectangle

    > width="80"   height="150"
    > Largeur        Hauteur

    > x="20"    y="30"
    > Coordonnées abscisse        Coordonnées ordonnée     

    > style="fill:red;"
    > Attribue la couleur rouge au rectangle

    > id="rect1308" />
    > Donne un id à la balise rect et la ferme

    > <rect
    > Ouverture balise rectangle

    > width="140"   height="80"
    > Largeur          Hauteur

    > x="50"    y="50"
    > Coordonnées abscisse        Coordonnées ordonnée     

    > style="fill:blue;"
    > Attribue la couleur bleu au rectangle

    > id="rect1310" />
    > Donne un id à la balise rect et la ferme

    > </g>
    > Fermeture de la balise g

    > </svg>
    > Fermeture de la balise svg



En-tête des fichiers images





  • Le format BMP


  1. Le fichier BMP ( bitmap ) est un format d'image matricielle ouvert ( libre ) développé par Microsoft et IBM.
  2. Avantage : C'est un format simple beaucoup utilisé dans la programmation, il est lisible par quasiment tous les visualiseurs et éditeurs d'images.
  3. Inconvénient : Ce format ne dégrade pas l'image et n'utilise pas de compression il est donc très lourd.
  4. Utilisation : Utilisé dans la visualisation et l’édition d'image.


  • Le format PNG

  1. Le fichier PNG ( Portable Network Graphics ) est un format d'image matricielle sans perte créé pour remplacer le format GIF, qui était propriétaire.
  2. Avantage : C'est un format non destructeur adapté pour publier des images simples comprenant des aplats de couleurs. Spécifique pour internet et recommandé par W3C. La transparence possible à différents niveaux.
  3. Inconvénient : Le format étant non destructeur, lui aussi ne perd aucune données mais est très lourd par conséquent.
  4. Utilisation : Il est très utile pour la mise en page sur le web grâce a sa fonction de transparence.



  • Le format JPG

  1. Le fichier JPEG ( Joint Photographic Experts Group ) est un format de compression d'image
  2. Avantage : Compression avec ou sans perte de donnée.
  3. Inconvenient : Perte de données malgré tout.
  4. Utilisation : le format le plus utilisé sur internet car il prend peu de place.


  • Ouvrez l'image « dessin2.bmp » avec GIMP et enregistrez la au format PBM, PGM et PPM en formatant les données en brut et en ASCII. Observez les fichiers ainsi créés à l'aide d'IrfanView et décrivez chacun des formats


    > BPM Brut :    Taille: 6Ko 
L'image est en niveau de gris avec seulement 255(Blanc) et 000(Noir)

    > BPM ASCII :    Taille: 48Ko
L'image est identique à la brut

    > PGM Brut :    Taille: 47Ko (sensiblement la même que BPM ASCII)
L'image est en niveau de gris avec plusieurs niveau en fonction des couleurs

    > PGM ASCII :    Taille: 152Ko
L'image est identique à la brut

    > PPM Brut :    Taille: 141Ko (sensiblement la même que PGM ASCII)
L'image est en couleur

    > PPM ASCII :    Taille: 415Ko
L'image est identique à la brut



  • Éditez les fichiers au format ASCII que vous venez de générer à l'aide de notepad++. Retrouvez ces 3 éléments pour chacune des images (PBM, PGM et PPM).
  1)  
    > P1
    > PBM header
    > # CREATOR: GIMP PNM Filter Version 1.1
    > D'où vient le fichier
    > 300
    > ImageWidth: Largeur de l'image en pixels (ASCII en valeur decimal)
    > 160
    > ImageHeight:  Hauteur de l'image en pixels (ASCII en valeur decimal)
    > Ensuite il y a une suite de 0 et de 1 definissants les canaux ouverts ou fermés

  2)
    > P2
    > PGM header
    > # CREATOR: GIMP PNM Filter Version 1.1
    > D'où vient le fichier
    > 300
    > ImageWidth: Largeur de l'image en pixels (ASCII en valeur decimal)
    > 160
    > ImageHeight:  Hauteur de l'image en pixels (ASCII en valeur decimal)
    > Ensuite il y a une suite de groupe de canaux par trois qui définissent le niveau de gris entre 0 et 255

  3)
    > P3
    > PPM header
    > # CREATOR: GIMP PNM Filter Version 1.1
    > D'où vient le fichier
    > 300
    > ImageWidth: Largeur de l'image en pixels (ASCII en valeur decimal)
    > 160
    > ImageHeight:  Hauteur de l'image en pixels (ASCII en valeur decimal)
    > Ensuite il y a une suite de groupe de canaux par trois un pour le rouge (entre 0 et 255), le bleu (entre 0 et 255), le vert (entre 0 et 255)



  • A partir des informations contenues dans les fichiers, retrouvez les dimensions de l'image en pixel


  1. dessin2.pbm est de taille Largeur:300 Hauteur:160 (Comme expliqué au dessus)
  2. dessin2.pgm est de taille Largeur:300 Hauteur:160 (Comme expliqué au dessus)
  3. dessin2.ppm est de taille Largeur:300 Hauteur:160 (Comme expliqué au dessus)



  • Justifiez la taille en octet de chacun des fichiers au format brut que vous venez de générer


  1. Les fichier brut ouvert dans notePadd++ ne represente casiment que des caractere nul , il prend moins de place.



  • Maintenant que vous avez approfondi vos connaissances sur les deux grands types d'images qui existent, donnez les avantages et les inconvénients de chacune d'elle.


    > ASCII Avantage          Modifiable facilement
    > ASCII Inconvénient    Prend beaucoup de place

    > Brut Avantage            Prend moins de place
    > Brut Inconvénient      Illisible


  • Dans quel cas utiliseriez-vous un format vectoriel? un format matricielle?


  1. Le format vectoriel est fait pour les dessins
  2. Le format matricielle est plus fait pour la photo



Codage des images



  • Dans le cas des images en Niveaux de Gris, chaque pixel est codé sur 1 octet. Combien de Nuances de gris peuvent être codées?
  1. 256 nuances.



  • Enfin, les images couleurs sont codées sur 3 octets. Chaque octet permet de coder les variations sur une couche rouge, une couche verte et enfin sur une couche bleue. Combien de variations peuvent être codées sur chaque couche? Combien de couleurs peuvent être codées en tout?
  1. 256 par couches.
  2. 16777216 couleurs peuvent être codés en tout.



  • On peut donc dire qu'une image couleur est composée d'une image en Niveaux de Rouges, d'une image en Niveaux de Bleus et d'une image en Niveaux de Verts. Pourquoi le choix de ces trois couleurs?
  1. Ce sont les trois couleurs primaires qui permette de recomposer toutes les couleurs dans le domaine du visible ( entre 400nm et 700nm ).



  • Quand on observe une imprimante couleur, elle est composée d'une cartouche jaune, d'une cartouche cyan et enfin d'une cartouche magenta. Pourquoi ces trois couleurs? Quelle est la différence par rapport aux couleurs RVB (utilisées sur les écrans par exemple)?
  1. Le jaune, le Cyan, et le magenta sont les couleurs secondaire. Permet de meilleurs couleurs.



  • Les dimensions de l'image ci-dessus sont les suivantes : 150 pixels x 140 pixels. Combien de pixels composent cette image?
  1. Cette image est composé de 21 000 pixels.



  • Donnez la taille en octets des 3 images ci-dessus
  1. L'image en noir est blanc fait 21 000 Octets.
  2. L'image en niveau de gris fait 63 000 Octets.
  3. L'image en couleurs fait 189 000 Octets.



  • Donnez la couleur associée à #BBBBBB et #AAAA00
  1. #BBBBBB --> décimal:187 187 187 --> Gris clair
  2. #AAAA00 --> décimal:170 170 000 --> Vert olive



  • Donnez le codage d'un rouge pur, d'un bleu pur et d'un vert pur
  1. Rouge pur --> $FF0000
  2. Bleu pur --> $0000FF
  3. Vert pur --> $00FF00



  • Donnez le codage du blanc et du noir
  1. Blanc --> $FFFFFF
  2. Noir --> $000000



  • Donnez le codage d'un niveau de gris égal à 127
  1. Gris égal à 127 --> $7F7F7F




Compression / effets






  • Quelle taille en octets aurait cette photo si l'on codait chaque pixel sur 1 octet?
  1. Si on codait sur 1 octet chaque pixel la taille de la photo derait de: 5 000 000 octets.



  • Compressez l'image « dessin2.bmp » au format PNG, JPG et JPG2000, puis ouvrez les images dans des onglets différents sous XnView et analysez les effets de chacune de ces compressions.
  1. .jpg 5Ko    Le fichier est de mauvaise qualité et n'accepte pas la transparence
  2. .jp2 8Ko    Le fichier est de meilleur qualité mais n'accepte pas la transparence
  3. .png 3Ko    Le fichier est de bonne qualité et accepte la transparence


  • Calculez le taux de compression pour chacun des exemples. Rappel, le taux de compression correspond au ratio entre la taille du fichier image après compression par rapport à celle du fichier original.
  1. .jpg    0.02
  2. .jp2    0.04    
  3. .png    0.01


Codage des images / Premiers traitements




  • Combien de niveaux de gris composent cette image?





  1. L'image est composée de 14 niveaux de gris



  • Appliquez un seuillage en utilisant un seuil égal à 5, à 9 et à 11 (dans notre cas on donnera la valeur 0 à un pixel si il est strictement inférieur au seuil et la valeur 1 si il est supérieur ou égal)

Seuil à 5


Seuil à 9
Seuil à 11



  • Analysez et comparez les résultats obtenus précédemment. Que pouvez-vous dire sur le seuil?
  1. Le seuil peux faire perdre des informations de l'image.


  • La matrice ci-dessus correspond à une image contenant une lettre. A partir des 3 résultats obtenus précédemment, donnez la lettre contenue
  1. La lettre obtenue est un L majuscule : "L".



  • Pourquoi divise-t-on par neuf le résultat de la matrice ? A quoi correspond le neuf ?



  1. On divise par neuf car c'est la moyenne des pixels aux alentours vu qu'il y a 9 pixels en tout.



  • Calculez le résultat de ce filtre sur la matrice de l'image du L (image d'origine en niveaux de gris)


Avec le filtre 1/9




  • Recommencez la question précédente avec les deux filtres ci-dessous après avoir remplacé X et Y par les valeurs adéquates :


Masque 1/10 et 1/16