L’image numérique L'image Numérique ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique Un exemple d’information numérique: L’image numérique Olivier CHAUMETTE Lycée JP SARTRE BRON

L'image Numérique 1. Les deux types d’images numériques ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique 1. Types d’images numériques 2. Caractéristiques de l’image bitmap 3. Le codage 4. La compression 1. Les deux types d’images numériques Les images bitmap (ou matricielles) Les images vectorielles Olivier CHAUMETTE Lycée JP SARTRE BRON

L'image Numérique Les images bitmap ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique 1. Types d’images numériques 2. Caractéristiques de l’image bitmap 3. Le codage 4. La compression Les images bitmap (littéralement « plan de bits » c’est-à-dire tableau de pixels) Elles sont définies comme un ensemble de points appelés pixels. Ce sont les images obtenues par un appareil photo ou un scanner Les formats les plus célèbres sont: Jpeg, Bmp, PNG, Tiff, GIF… Les logiciels permettant de les modifier: photoshop©, Gimp, photofiltre… Ce sont celles au programme de TS Olivier CHAUMETTE Lycée JP SARTRE BRON

L'image Numérique Les images vectorielles ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique 1. Types d’images numériques 2. Caractéristiques de l’image bitmap 3. Le codage 4. La compression Les images vectorielles Elles sont définies comme un ensemble de formes géométriques simples (segment, cercle, rectangle…) Les formats les plus célèbres sont: svg, ai, wmf, eps voire pdf… Les logiciels permettant de les créer et modifier: illustrator©, Inkscape, Coreldraw©, word… Olivier CHAUMETTE Lycée JP SARTRE BRON

L'image Numérique Exemple: ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique 1. Types d’images numériques 2. Caractéristiques de l’image bitmap 3. Le codage 4. La compression Exemple: En vectoriel, le disque ci-contre n’est pas vu comme un ensemble de points mais comme un cercle qui les propriétés suivantes: Cercle de couleur rouge Le cercle est rempli de bleu Le fichier « svg » (créé par Inkscape) correspondant à ce disque est: Olivier CHAUMETTE Lycée JP SARTRE BRON

ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique 1. Types d’images numériques 2. Caractéristiques de l’image bitmap 3. Le codage 4. La compression Pour afficher une image vectorielle, un logiciel doit tracer lui-même les figures géométriques. 2 gros avantages de l’image vectorielle: On peut l’agrandir à l’infini: la qualité n’est pas modifiée (car, pour un cercle par exemple, le logiciel ne change que la valeur du rayon et retrace le cercle) Le fichier créé est très léger en termes d’octets (car, seule la description des objets est écrite, quelle que soit la taille de l’image) 1 gros inconvénient de l’image vectorielle: L’image ne doit pas être trop complexe (on ne pourrait pas prendre des photos en vectoriel!) Olivier CHAUMETTE Lycée JP SARTRE BRON

L'image Numérique vectoriel bitmap ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique 1. Types d’images numériques 2. Caractéristiques de l’image bitmap 3. Le codage 4. La compression vectoriel bitmap Olivier CHAUMETTE Lycée JP SARTRE BRON

L'image Numérique 2. Les caractéristiques d’une image bitmap ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique 1. Types d’images numériques 2. Caractéristiques de l’image bitmap 3. Le codage 4. La compression 2. Les caractéristiques d’une image bitmap Appelée aussi image « Matricielle » Olivier CHAUMETTE Lycée JP SARTRE BRON

(contraction de PICTure ELements). ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique 1. Types d’images numériques 2. Caractéristiques de l’image bitmap 3. Le codage 4. La compression Une image numérique bitmap est un ensemble discret de points appelés PIXELS (contraction de PICTure ELements). Elle a pour vocation d’être affichée sur un écran. Chaque pixel possède une couleur. Olivier CHAUMETTE Lycée JP SARTRE BRON

L'image Numérique Une image bitmap possède: ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique 1. Types d’images numériques 2. Caractéristiques de l’image bitmap 3. Le codage 4. La compression Une image bitmap possède: Une définition: Sa hauteur H par sa largeur L exprimées en pixels Un poids: C’est le produit LxH qui donne le nombre total de pixels. Il est généralement exprimé en Megapixels (million de pixels) 1 Megapixels = 106 pixels Par exemple, le standard des appareils photo numériques font aujourd’hui des photos ayant comme définition 4000x3000 pixels environ soit un poids de: 12.106 pixels = 12 MPx Olivier CHAUMETTE Lycée JP SARTRE BRON

L'image Numérique Une image bitmap possède également: ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique 1. Types d’images numériques 2. Caractéristiques de l’image bitmap 3. Le codage 4. La compression Une image bitmap possède également: Une résolution: Il s’agit du nombre de pixels par unité de longueur L’unité de longueur étant souvent le pouce (1 pouce = 2,54 cm), l’unité de la résolution est le point par pouce (ppp) (ou ppi en anglais) Exemple: Un écran 24 pouces (soit 60 cm de diagonale) affiche 1920 pixels par 1080 (le format 16/9eme dit full HD). 16/9eme étant le rapport L/H, avec Pythagore on trouve une hauteur pour l’écran de 12 pouces. Il affiche donc verticalement une image de résolution 1080/12 = 90 ppp En règle générale, on admet que les écrans ont une résolution voisine de 72 ppp Olivier CHAUMETTE Lycée JP SARTRE BRON

L'image Numérique Effet de la résolution sur l’aspect visuel ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique 1. Types d’images numériques 2. Caractéristiques de l’image bitmap 3. Le codage 4. La compression Effet de la résolution sur l’aspect visuel 18 pixels par pouce 72 pixels par pouce soit environ 7 pixels par cm soit environ 30 pixels par cm Source http://www.crdp.ac-grenoble.fr/image/general/resolut.htm Olivier CHAUMETTE Lycée JP SARTRE BRON

L'image Numérique Enfin une image bitmap possède: ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique 1. Types d’images numériques 2. Caractéristiques de l’image bitmap 3. Le codage 4. La compression Enfin une image bitmap possède: Un codage: Il s’agit du nombre de couleurs que peut prendre un pixel Ce codage s’exprime en bits. Les codages les plus fréquents sont: 1 bit 8 bits niveaux de gris 8 bits indexés 24 bits RVB Olivier CHAUMETTE Lycée JP SARTRE BRON

L'image Numérique 3. Le codage d’une image bitmap ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique 1. Types d’images numériques 2. Caractéristiques de l’image bitmap 3. Le codage 4. La compression 3. Le codage d’une image bitmap Olivier CHAUMETTE Lycée JP SARTRE BRON

L'image Numérique Codage 1 bit par pixel ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique 1. Types d’images numériques 2. Caractéristiques de l’image bitmap 3. Le codage 4. La compression Codage 1 bit par pixel Chaque pixel peut prendre 2 valeurs de couleurs: 0 ou 1 L’image est en noir (0) et blanc (1) image Matrice Olivier CHAUMETTE Lycée JP SARTRE BRON

L'image Numérique Codage 8 bits par pixel en niveaux de gris ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique 1. Types d’images numériques 2. Caractéristiques de l’image bitmap 3. Le codage 4. La compression Codage 8 bits par pixel en niveaux de gris Chaque pixel peut prendre 28 = 256 valeurs de gris Noir (010 ou 016) Blanc (25510 ou FF16) 256 valeurs de gris Olivier CHAUMETTE Lycée JP SARTRE BRON

L'image Numérique Codage 8 bits par pixel en niveaux de gris Exemples: ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique 1. Types d’images numériques 2. Caractéristiques de l’image bitmap 3. Le codage 4. La compression Codage 8 bits par pixel en niveaux de gris Exemples: Matrice décimale donne l’image: Matrice hexadécimale donne l’image: Olivier CHAUMETTE Lycée JP SARTRE BRON

Nombre associé au pixel ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique 1. Types d’images numériques 2. Caractéristiques de l’image bitmap 3. Le codage 4. La compression Codage 8 bits par pixel en couleurs indexées Chaque pixel peut prendre 28 = 256 nuances de couleurs différentes Chaque nombre associé à un pixel fait référence à une couleur qui figure dans un dictionnaire fourni avec l’image. Exemple de dictionnaire: Nombre associé au pixel Couleur Noir 1 Bleu 2 Rouge 3 Blanc etc… juqu’à 255 D’autres couleurs…. C’est le cas du format « GIF » très utilisé sur internet. Olivier CHAUMETTE Lycée JP SARTRE BRON

L'image Numérique Image au format GIF (donc 256 couleurs) ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique 1. Types d’images numériques 2. Caractéristiques de l’image bitmap 3. Le codage 4. La compression Image au format GIF (donc 256 couleurs) Dictionnaire associé Olivier CHAUMETTE Lycée JP SARTRE BRON

L'image Numérique Rouge Vert Bleu Codage 24 bits par pixel en RVB ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique 1. Types d’images numériques 2. Caractéristiques de l’image bitmap 3. Le codage 4. La compression Rouge Vert Bleu Codage 24 bits par pixel en RVB à Chaque pixel on associe 28 = 256 nuances de rouge et 28 = 256 nuances de vert et 28 = 256 nuances de bleu La couleur du pixel sera le résultat de la synthèse additive des 3 couleurs primaires, chacune étant codée sur 8 bits On parle aussi de codage 8 bits par couche (comprendre «8 bits par couleur primaire ») Soit un codage total sur: 3 x 8 bits = 24 bits Olivier CHAUMETTE Lycée JP SARTRE BRON

L'image Numérique Exemples: Pour un pixel: ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique 1. Types d’images numériques 2. Caractéristiques de l’image bitmap 3. Le codage 4. La compression Exemples: Pour un pixel: Bleu, on aura: 0 (Rouge) 0 (Vert) 255 (Bleu) Pour un vert: 0 255 0 Pour un orange: 255 127 0 Pour noir: Pour un blanc Etc… 0 0 0 255 255 255 Chaque « cellule » du tableau de nombres associé à l’image contiendra donc 3 valeurs de 0 à 255 Chaque pixel pourra donc prendre au total: 256 x 256 x 256 = 16,8 millions de couleurs différentes Olivier CHAUMETTE Lycée JP SARTRE BRON

L'image Numérique Exemples: Matrice décimale RVB 24 bits ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique 1. Types d’images numériques 2. Caractéristiques de l’image bitmap 3. Le codage 4. La compression Exemples: Matrice décimale RVB 24 bits donne l’image: donne l’image: Matrice hexadécimale RVB 24 bits Olivier CHAUMETTE Lycée JP SARTRE BRON

L'image Numérique 4. La nécessité de compresser une image bitmap ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique 1. Types d’images numériques 2. Caractéristiques de l’image bitmap 3. Le codage 4. La compression 4. La nécessité de compresser une image bitmap Olivier CHAUMETTE Lycée JP SARTRE BRON

ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique 1. Types d’images numériques 2. Caractéristiques de l’image bitmap 3. Le codage 4. La compression Calcul du poids (en octets) d’une image bitmap RVB 24 bits: Il y a 24 bits par pixel soit 3 octets par pixels. Donc le tableau décrivant une image de définition L x H occupera Nbre total de pixels x 3 = L x H x 3 octets Exemple: image de 3000x4000 pixels en RVB: 3000 x 4000 x 3 = 36.106 octets = 36 Mo Ce nombre est énorme et occupe beaucoup trop de place sur un disque dur ou une carte mémoire! Il va falloir compresser les données Olivier CHAUMETTE Lycée JP SARTRE BRON

ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique 1. Types d’images numériques 2. Caractéristiques de l’image bitmap 3. Le codage 4. La compression Il existe plusieurs méthodes (on parle d’algorithmes) pour compresser des données Les formats les plus célèbres utilisent des compressions: Le format JPEG Le format GIF, TIF Le format PCX, BMP de Windows et, en dehors des images: Les formats ZIP, RAR…. Olivier CHAUMETTE Lycée JP SARTRE BRON

ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique 1. Types d’images numériques 2. Caractéristiques de l’image bitmap 3. Le codage 4. La compression L’algorithme de compression RLE (Run-Length Encoding) il consiste à reconnaitre des valeurs identiques de couleurs et réécrit le fichier en indiquant la fréquence de chaque couleur. Exemple (simplifié) : 00 00 00 00 FF FF FF 00 00 00 7F 7F 7F 7F 7F 7F occupe 32 caractères L’algorithme RLE comprime ces valeurs en: 400 3FF 300 67F qui occupe 12 caractères seulement. L’algorithme est efficace si l’image contient des grandes zones de même couleur. Les formats BMP ou PCX de Windows utilisent cet algorithme Olivier CHAUMETTE Lycée JP SARTRE BRON

L'image Numérique L’algorithme de compression JPEG Dans un 1er temps: ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique 1. Types d’images numériques 2. Caractéristiques de l’image bitmap 3. Le codage 4. La compression L’algorithme de compression JPEG (en simplifiant beaucoup, beaucoup…) Dans un 1er temps: L’algorithme compare la couleur d’un pixel avec celle de ses voisins. Si les couleurs sont proches, l’algorithme considère qu’il s’agit de la même couleur. Il redessine alors tous les pixels concernés avec cette couleur. Résultat: Olivier CHAUMETTE Lycée JP SARTRE BRON

L'image Numérique L’algorithme de compression JPEG Dans un 2nd temps: ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique 1. Types d’images numériques 2. Caractéristiques de l’image bitmap 3. Le codage 4. La compression L’algorithme de compression JPEG (toujours en simplifiant beaucoup…) Dans un 2nd temps: Les valeurs de ces pixels sont compressées avec, entre autres, un algorithme de type RLE. Au cours de la compression, on perd de l’information concernant la vraie couleur des pixels. Le JPEG est une compression destructive. Olivier CHAUMETTE Lycée JP SARTRE BRON

Exemple: Poids de deux images en 4000x3000 (jpeg, qualité 80%) ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique 1. Types d’images numériques 2. Caractéristiques de l’image bitmap 3. Le codage 4. La compression Dans l’ensemble, les algorithmes de compression sont efficaces si l’image comporte de grandes zones de couleurs identiques ou très voisines. Exemple: Poids de deux images en 4000x3000 (jpeg, qualité 80%) 750 Ko 1,8 Mo Olivier CHAUMETTE Lycée JP SARTRE BRON

L'image Numérique FIN ENSEIGNER Transmettre et Stocker l’Information en TS L'image Numérique FIN olivier.chaumette@ac-lyon.fr Version 1 - Janvier 2013 Olivier CHAUMETTE Lycée JP SARTRE BRON