ACTIVITÉ 1 : QU’EST-CE QU’UNE IMAGE NUMÉRIQUE ?

I – DE QUOI EST FAITE UNE IMAGE NUMÉRIQUE ?

Voici le logo du Gymnase tel qu’il apparaît sur le site officiel :

Et voici ce que l’on obtient si l’on zoome sur une zone précise de l’image :

On constate que l’image devient floue, et qu’il y a un effet escalier.

Une image est constituée de pixels, le plus petit élément de l’image, c’est la contraction de “picture”.

Quelle est la signification des informations suivantes ?

200 x 105 : Dimensions (en pixels)

96 ppp : Définition de l’image (en points par pouces)

JPEG : Format de fichier

6.93 ko : Taille du fichier

II – ENCODAGE D’UNE IMAGE

Une image numérique est une suite d’informations stockées dans un fichier.

Une image numérique peut se représenter par un tableau de nombres (appelé matrice) :

chaque case du tableau représente un pixel
chaque pixel contient une valeur numérique binaire (constituée de 0 ou 1, ex : 101, 10100110)

Il existe trois grandes catégories d’images numériques :

l’image noir & blanc   –   l’image en nuances de gris   –   l’image en couleur

Les extensions indiquent le format du fichier, tel que format jpg, format gif…

Un format simple et manipulable pour s’initier au codage d’une image est le format Portable PixMap.

Celui-ci se décline en 3 extensions selon le degré de coloration souhaité : noir et blanc (pbm), dégradés de gris (pgm), couleurs (ppm). Les images utilisées ou construites dans cette activité seront visionnées avec le logiciel GIMP2.

II.1 – ENCODAGE D’UNE IMAGE EN NOIR & BLANC

Les pixels d'une image en noir & blanc sont encodés avec 1 bit : on utilise "0" pour coder un pixel blanc, et "1" pour coder un pixel noir.

Combien de bits seront nécessaires pour encoder un pixel d'une image en noir et blanc ?

Un fichier d’image comporte les informations qui permettent d’afficher l’image :
Le format pbm est organisé ainsi :

P1
Un caractère d'espacement (espace, nouvelle ligne)
Eventuellement des commentaires marqués par un # en début de ligne
Largeur de l'image
Un caractère d'espacement
Hauteur de l'image
Un caractère d'espacement
Données de l'image :
   - L'image est codée ligne par ligne en partant du haut
   - Chaque ligne est codée de gauche à droite
   - Un pixel noir est codé par un 1, un pixel blanc par un 0
Les caractères d'espacement à l'intérieur de cette section sont ignorés

Exemple 1 :
P1
# Exemple de fichier PBM :
# ces lignes sont des
# commentaires
20 13
00000000000000000000
00001111111111100000
00001100000001100000
00001100000001100000
00001100000001100000
00000111111111000000
00001100000001100000
00001100000001100000
00001100000001100000
00001111111111100000
00000000000000000000

Exercice 1 : Copier le contenu du cadre exemple 1 dans un éditeur de texte ou Notepad, l’enregistrer au format .pbm. Ouvrir le fichier avec Gimp et le zoomer à 1600% (clic droit – affichage – zoom). Afficher côte à côte, la fenêtre de l’éditeur de texte et de Gimp. Modifier l’image dans l’éditeur de texte pour afficher le chiffre 3 et vérifier le résultat dans Gimp.

Exercice 2 : Créer à partir de l’éditeur de texte une image :
    - représentant la lettre I sur 7 lignes et 5 colonnes.
    - représentant un damier sur 5 lignes et 5 colonnes.

Exercice 3 : Voici une image au format pbm et la matrice de cette image et le contenu d’un fichier pbm. Compléter :

P1
#
#

II.2 – ENCODAGE D’UNE IMAGE EN NUANCES DE GRIS

Difficile de rendre une image attrayante avec seulement le noir et le blanc. De manière standard chaque pixel d’une image en nuances de gris peut contenir 256 nuances différentes : de 0 soit 00000000 en binaire (noir pur) à 255 soit 11111111 en binaire (blanc pur).

1. Combien de bits faut-il pour encoder 256 valeurs ?

2. Sachant qu’un octet correspond à 8 bits, combien d’octets sont-ils nécessaires pour encoder un pixel en nuances de gris ?

Le format pgm (Portable Grey Map) permet de rendre des dégradés de gris sur une échelle allant de 0 (noir) à 255 (blanc). La structure du fichier est sensiblement la même que pour le pbm, on remplace les 0 et les 1 par les nombres décimaux correspondant « au code de gris ». Plus ce nombre est élevé, plus le gris est proche du blanc.

-   P2
-   Un caractère d'espacement (espace, nouvelle ligne)
-   Largeur de l'image
-   Un caractère d'espacement
-   Hauteur de l'image
-   Un caractère d'espacement
-   La valeur maximale utilisée pour coder les niveaux de gris (généralement 255)
-   Un caractère d'espacement
-   Données de l'image :
    ✓ L'image est codée ligne par ligne en partant du haut
    ✓ Chaque ligne est codée de gauche à droite
    ✓ Chaque pixel est codé par un nombre, précédé et suivi par un caractère d'espacement.

Exemple 2 :
# Exemple de fichier PGM :
#taille 10 par 10
10 10
#255 = nuance max=blanc
255
50 255 255 255 255 255 255 255 255 255
50 100 100 100 100 100 100 100 100 100
50 75 75 100 100 100 100 100 75 75
50 75 75 0 0 0 0 0 75 75
50 75 75 0 0 0 0 0 75 75
50 255 255 0 0 0 0 0 255 255
50 255 255 0 0 0 0 0 255 255
50 255 255 100 100 100 100 100 255 255
50 255 255 100 100 100 100 100 255 255
50 255 255 255 255 255 255 255 255 255

Exercice 4
Copier le contenu du cadre exemple 2 dans un éditeur de texte, l’enregistrer au format .pgm.
Ouvrir le fichier avec Gimp et le zoomer à 1600% (clic droit – affichage – zoom).
Modifier un pixel dans l’éditeur de texte et vérifier l’effet obtenu dans Gimp.

Exercice 5
La copie d’écran ci-contre montre une image de format pgm visionnée avec Gimp :
Les dimensions de cette image sont 21 px de large pour 7 px de haut.
Combien y a-t-il de nuances de gris en plus du noir et du blanc ?
Proposer un codage de l’image.

II.3 – ENCODAGE D’UNE IMAGE EN COULEURS

Pour comprendre comment représenter les images en couleurs, il faut d’abord s’intéresser à la manière dont notre œil les perçoit...

Ce principe s’appelle la synthèse additive des couleurs dont l’illustration est présentée ci-contre :

On encode une image en couleurs avec octets.
Ce qui représente possibilités de couleurs différentes.

1 – D’après l’illustration de la synthèse additive, quel serait l’encodage RVB :

• d’un pixel rouge :
• d’un pixel vert :
• d’un pixel bleu :
• d’un pixel jaune :
• d’un pixel cyan :
• d’un pixel magenta :

2 – L’image en Rouge Vert Bleu

Le format correspondant aux deux formats simples précédents, adapté à la couleur est le format ppm (Portable PixMap).

P3
# Exemple de fichier PPM:
10 10
255

Exemple 3 :
# exemple 3 colonnes and 2 lignes,
3 2
# encodage des octets en 256 nuances
255
150   0   0   0 255   0   0 255 255
120 200 075 255   0 255 075   0    0

Voici le rendu attendu :

1. Identifier, en les encadrant, les valeurs permettant de coder chaque pixel dans l’exemple 3.

Exercice 6 : Copier le contenu du cadre exemple 3 dans un éditeur de texte, l’enregistrer au format .ppm. Ouvrir le fichier avec Gimp et le zoomer à 1600%. Modifier les pixels pour afficher 3 pixels primaires (rouge, vert, bleu) sur la 1re ligne et 3 pixels secondaires (cyan, magenta, jaune) sur la 2e ligne, vérifier dans Gimp.

Exercice 7 : Créer une image au format ppm représentant le drapeau de la France à partir d’un éditeur de texte (4 lignes x 9 colonnes). Visualiser le résultat dans Gimp.

Pour coder une minuscule image de 3 x 2 soit 6 pixels, 18 codes couleurs sont nécessaires. Pour 300 px x 300 px : 270 000 codes couleurs (3 octets par pixel) → 270 ko. Des moyens de limiter ce poids sont donc à trouver afin de « compresser » ces fichiers pour qu’ils prennent le moins de place possible.

Liens utiles (SNT)

• Photographie numérique (cours actuel)
• Web – cours, activités, quiz
• Internet – cours
• Réseaux, Données (à venir)

Les activités et quiz sont accessibles via les liens ci-dessus ou le menu en haut. Le contenu reste imprimable avec le bouton “Imprimer / PDF”.