3. Qu'est-ce qu'une image numérique? 3.4 Palettes / Images indexées

Transcription

1 3. Qu'est-ce qu'une image numérique? 3.4 Palettes / Images indexées

2 3.4.1 Introduction Principe Applications des images palettées PLAN A - Adaptation aux contraintes matérielles/logicielles B - Compression par réduction de couleurs Perte de qualité A - sans perte B - sans perte apparente C - avec perte contrôlée Formats d'image Introduction Les images palettées ou images indexées ont été utilisées pour deux principales raisons: pour s'adapter aux contraintes de certains matériels (écrans, cartes graphiques, imprimantes) ou logiciels n'acceptant qu'un nombre limité de couleurs dans une image. pour réduire le volume des données d'une image. Le but est simple : réduire le volume d'une image en conservant une bonne qualité. Partant du fait que le système visuel humain ne perçoit pas plus de 300 couleurs environ, on réduit le nombre de couleurs d'une image donnée à un ensemble de N couleurs, appelé palette. Une palette est équivalente à un index de couleurs, chaque indice correspondant à un triplet (R, V, B), ce qui permet de retrouver les couleurs pour toute manipulation (affichage, impression,...). Bien qu'aujourd'hui les écrans affichent en vraies couleurs, c'est à dire avec un codage des couleurs sur 3 octets, pendant longtemps le matériel ne permettait pas d'afficher plus de 256 couleurs, dans la pratique N vaut donc souvent 256. Voici une animation vous permettant de faire varier le nombre de couleurs pour une image

3 Principe Une image palettée I contient 2 élements : une palette P une image d'indices E Figure 1 : Voici une image palettée dont la palette comprend 8 couleurs affichées à droite de la figure ( codage RVB). Nous avons sélectionné une zone correspondant au bout d'un doigt et nous l'avons aggrandie pour bien voir la couleur de chaque pixel. 0 (255,255,255) 1 (107,49,41) 2 (173,90,66) 3 (255,198,165) 4 (231,148,99) 5 (214,140,90) 6 (239,173,23) 7 (231,165,15) 8 (247,189,140) 9 (33,49,90) 10 (24,16,41) 11 (16,8,33) 12 (41,24,33) 13 (90,74,82) 14 (66,33,41) 15 (0,0,0)

4 Dans le cas d'une image palettée I contenant N couleurs différentes: La palette est un tableau de taille N, qui constitue une table de correspondance : indice <-> couleur. La i-ème case de ce tableau contient le triplet (R,V,B) de la couleur associée à l'indice i. L'image d'indices E est une image de même dimension que I contenant des valeurs comprises entre 0 et N-1. Chaque valeur ou indice représente une couleur. Pour afficher l'image I, il suffit de créer une matrice de pixels de même taille que E, et de remplacer chaque indice de E par la couleur correspondante indiquée par la palette. Cette opération est faite très rapidement par les cartes graphiques servant à l'affichage des images sur écran. Ce principe est aussi valable pour des images en niveaux-de-gris. Dans ce cas, la palette indique une correspondance entre un indice et une valeur de niveau de gris. Figure 2 : considérons le coin en haut à gauche de l'image du doigt et le codage correspondant : = Pour retrouver le codage RVB on remplace chaque entier de l'image d'indices E par le codage RVB de l'indice correspondant dans la palette

5 (255,255,255) (107,49,41) (173,90,66) 3 (255,198,165) 4 (231,148,99) > 5 (214,140,90) 6 (239,173,23) 7 (231,165,15) 8 (247,189,140) 9 (33,49,90) 10 (24,16,41) 11 (16,8,33) 12 (41,24,33) 13 (90,74,82) -----> = 14 (66,33,41) (0,0,0) image d'indices E palette transformation RVB couleur affichée

6 Figure 3: Voici quelques exemples d'images avec leur palette associée de 256 couleurs: Avant réduction à 256 couleurs, il y avait couleurs uniques Ici la grande diversité des couleurs rend la réduction visible, en particulier dans les dégradés autour du soleil.

7 avant réduction à 256 couleurs, il y avait couleurs uniques. Ici les couleurs plutôt proches ne rendent pas visible la dégradation. avant réduction à 256 couleurs, il y avait couleurs uniques. Ici à la surface de l'eau les passages entre couleurs sont bien visibles.

8 image en niveaux de gris; ici 53 couleurs de la palette ne sont pas utilisées

9 3.4.3 Applications des images palettées A - Adaptation aux contraintes matérielles/logicielles Certaines cartes graphiques, certains écrans ou certains logiciels comprenant des fenêtres graphiques ne peuvent afficher simultanément qu'un nombre réduit de couleurs différentes. Il est alors nécessaire de fournir une image palettée. Par exemple, supposons que le matériel impose un maximum de N=256 couleurs différentes. Considérons une image couleur RVB où chaque composante est codée sur 8 bits. Cette image peut contenir potentiellement 256 x 256 x 256, soit 16 millions de couleurs différentes. Si elle contient en réalité un nombre de couleurs différentes inférieur à 256, on peut la transformer en image palettée et l'afficher sans perte de qualité. (une autre - mauvaise- solution serait de quantifier les valeurs R,V,B par exemple sur 2 bits pour le Rouge, 3 bits pour le Vert et 2 bits pour le Bleu. Ainsi, le nombre de couleurs différentes dans l'image serait nécessairement inférieur ou égal à mais alors on déteriorerait énormément l'image). Si l'image contient plus de 256 couleurs différentes, on doit la transformer en image palettée pour l'afficher. On va nécessairement dégrader l'image en réduisant le nombre de couleurs, mais cette dégradation peut être limitée si on choisit une "palette adaptée" (cf plus loin). Remarque : les matériels et logiciels récents permettent généralement l'affichage "en vraies couleurs" (avec la couleur de chaque pixel codée sur 24, 32, ou 48 bits). 16 millions de couleurs au moins sont alors disponibles.

10 B - Compression par réduction de couleurs Le deuxième intérêt des images palettée est la compression du volume de mémoire occupée par une image, avec peu ou pas de dégradation visuelle (voir chapitre 6 sur les formats). Une image palettée est généralement plus compacte qu'une image stockée en "vraies couleurs". Pour une image couleur RVB codée en vraies couleurs, la taille mémoire en octets correspond au nombre de pixels de la hauteur multiplié par le nombre de pixels de la largeur, le tout multiplié par le nombre d'octets pour coder la couleur: Soit L la largeur, H la hauteur, O le nombre d'octets et V le volume de l'image. Alors : V = H x L x O octets = H xl x O x 8 bits Dans une image palettée de 256 couleurs chaque pixel est codé sur 1 octet et le palette contient 256 codes RVB : V = H x L + Vpalette octets, avec Vpalette = 256 x O octets Pour une image de grande taille HxL, le volume mémoire occupé par la palette est négligeable (par exemple pour une image 1024x1024, et la couleur codée sur 24 bits, HxL = octets). Le gain en volume ou taux de compression est alors à égal à O. Ce nombre d'octets O vaut 3 pour un codage sur 24 bits, un octet par couleur RVB. Dans une image palettée de moins de 256 couleurs, où chaque pixel occupe un nombre variable k de bits selon le nombre de couleurs : le volume de l'image palettée en bits sera : V = H x L x k + Vpalette bits, avec Vpalette = k x O x 8 bits Le gain en volume ou taux de compression pour une telle image est donc : (H x L x O x 8 ) / (H x L x k + Vpalette) En négligeant le volume de la palette le taux de compression pour une image de N=2^k couleurs vaut :

11 En 16 millions de couleurs O vaut 3 et le taux de compression vaut 24 / k. (O x 8) / k Le tableau ci-dessous indique dans ce cadre le taux de compression selon le nombre de bits utilisés pour coder la couleur: nombre de bits k par pixel nombre de couleurs 2^k taux de compression hors palette< Figure 4: Voici une image numérisée à 300 dpi, de taille réelle écran 1188 x Cette image comprend couleurs uniques. En vraies couleurs elle "pèse" octets, soit 4,23 mégaoctets. Elle a été codée en GIF avec des tables de couleurs allant de 256 à 8 couleurs. Le volume indiqué n'est pas le volume du fichier GIF, car le format GIF comporte des étapes de compression supplémentaires. C'est le volume obtenu en codant directement en binaire l'image d'indices. Cliquez sur les images si vous voulez les voir en grand pour observer leur qualité.

12 256 couleurs 128 couleurs 64 couleurs volume : 1,4 Mo volume : 1,2 Mo volume :1 Mo facteur de compresssion : 3 facteur de compresssion : 3.43 facteur de compresssion : 4

13 32 couleurs 16 couleurs 8 couleurs volume : 0,881 Mo volume :0,7 Mo volume : 0,52 Mo taux de compression : 4.8 taux de compression : 6 taux de compression : 8 Pour les images en niveaux-de-gris, le bénéfice est moins grand: avec 256 niveaux de gris on ne gagne rien, puisque le codage des pixels de l'image palettée prend un octet comme le codage en niveaux de gris. Au contraire on perd la taille de la palette. avec N=2^K niveaux de gris, le taux de compression est de W x H x 8 / (W x H x k + palette) soit un taux maximum de 8 / k Pour réduire le volume d'un facteur 2 (sans compter le volume pris pour stocker la palette), il faut prendre k=4, donc N = 2^4 = 16 niveaux-de-gris différents seulement.

14 3.4.4 Perte de Qualité A - Sans perte Dans le cas où l'image contient peu de couleurs différentes, et en tous cas moins que la taille de la palette, il n'y a aucune perte de qualité. On peut donc comprimer très fortement le volume mémoire de l'image, sans la dégrader. Ce type de compression est donc particulièrement intéressant pour les images de ce type, par exemple: les images contenant du texte en couleur les images contenant des graphiques, cartes de résultats, camemberts,... les images de type "dessin animé" contenant de grandes plages unies...etc Figure 5 : exemple de compression sans perte.

15 B - Sans perte apparente Le système visuel humain n'est pas capable de distinguer 16 millions de couleurs. Il peut distinguer simultanément, sur une même image, environ 300 couleurs distinctes. C'est pourquoi en utilisant une palette de 256 couleurs bien choisies, il est possible de transformer toute image couleur en image palettée sans perte de qualité visible à l'oeil nu. Il est important pour cela d'utiliser une palette adaptée à l'image, c'est à dire que les 256 couleurs de la palette sont choisies en fonction des couleurs présentes dans l'image avant transformation. Figure 6: cette première image est numérisée avec seulement 16 couleurs sans perte apparente Dans cette deuxième image, il faut 256 couleurs pour coder correctement les dégradés

16 Figure 7: Comparaison de la qualité de la même image avec une qualité maximale, avec une palette adaptée et avec la palette système image avec qualité maximale en jpeg avec palette adaptée

17 avec palette système Windows Remarque : Comparez la surface de l'eau et les dégradés autour du soleil entre l'image avec palette système et l'image avec palette adaptée. Vous noterez le manque de couleurs pour assurer un bon dégradé dans le deuxième cas. Si vous comparez l' image avec palette adaptée à l'image jpeg au-dessus, vous pouvez constater que les algorithmes de choix des couleurs (différents dans chaque logiciel) ne sont pas toujours optimum pour une image donnée. Pour un meilleur rendu dans le cas de dégradés il vaut mieux choisir le format jpeg. C - Avec perte contrôlée. Lorsque la taille de la palette est très réduite, on ne peut pas éviter une dégradation visible de l'image. Cependant, on peut restreindre cette dégradation grâce au choix d'une palette adaptée, (voir figure 1) Il existe des algorithmes permettant pour une image donnée et une taille de palette N fixée, de déterminer les N couleurs optimales pour cette image, et donc la palette la mieux adaptée.

18 Figure 8: la même photo a été enregistrée en GIF avec des palettes adaptées ou système. Cliquez sur l'image pour la voir en grand et observer la qualité réelle plutôt que celle de l'image réduite pour affichage. avec palette adaptée de 256 couleurs avec palette système de 256 couleurs palette adaptée de 64 couleurs avec palette système de 64 couleurs Figure 9: Que se passe-t'il quand on affiche une image avec la palette d'une autre image?

19 palette de 32 couleurs adaptée à l'image image affichée avec la palette d'une autre

20 3.4.5 Formats d'image Le principe des images palettées est utilisé des formats d'image courants tels que GIF, PNG, TARGA (avec option codage sur 8 bits). On choisira donc ces formats : pour l'affichage sur moniteur vidéo sur 8 bits (256 couleurs) pour des images contenant peu de couleurs (schémas, petites images,...) pour des images ne contenant pas de dégradés pour transmettre sur le Web et en particulier avoir un affichage progressif (appelé aussi entrelacé dans les logiciels). Voir chapitre sur les formats

21 3.4 EXERCICES Images palettées/indexées Créer une image palettée - sous Photoshop (ou PaintShop Pro) Sauvegardez l'image jpg ci-contre en suivant le lien Pour créer une image palettée GIF, choisissez le menu "Fichier>Exportation>Export GIF89a.". Vous obtenez alors la boite de dialogue suivante:

22 Choisissez le nombre de couleurs Choisissez la palette adaptative et tapez sur ok pour terminer. Il ne vous reste plus qu'à fournir le nom de votre fichier. Créez ainsi plusieurs fichiers avec des palettes de tailles différentes et observez la qualité de l'image. - sous Gimp Sauvegardez l'image jpg ci-dessus en suivant le lien Pour créer une image palettée GIF, choisissez le menu "Image->Mode->Couleurs Indexées". Vous obtenez alors la boite de dialogue suivante:

23 Choisissez la palette optimale et le nombre de couleurs Cliquez sur "Valider" pour terminer. Il ne vous reste plus qu'à fournir le nom de votre fichier. Créez ainsi plusieurs fichiers avec des palettes de tailles différentes et observez la qualité de l'image. Question : Envoyez l'image ayant le moins de couleurs sans modification visuelle de l'image et donnez le nombre de couleurs

24 Afficher et éditer la table de couleurs Chargez votre image GIF de 16 couleurs. Sous Photoshop choisissez le menu "Image -> Mode -> Table de couleurs", sous Gimp "Dialogue->Palette indexée" et la table s'affichera. Sous Photoshop vous pouvez visualiser une couleur particulière dans l'image, pour cela utilisez la pipette puis cliquez dans la palette pour choisir la couleur. Pour modifier une couleur double-cliquez sur cette couleur dans la palette, une fenêtre vous proposant de modifier cette couleur apparaîtra.

25 exemple de menu Photoshop : la 6ème couleur est remplacée par du bleu

26 sous PaintShop Pro : le même exercice est faisable en utilisant le menu "Fichier->exporter ->Gif transparent" GIF chargé utilisez le menu "couleurs->editer la palette" et une fois le fichier

27 changer de palette utiliser une palette prédéfinie sous Photoshop: une fois la table de couleurs chargée, choisissez une autre palette (spectre, système,...) sous Gimp passer en mode RVB, puis revenez au mode Couleurs indexées comme précédemment pour créer le fichier GIF. Dans le menu choisissez "Utiliser une palette personnalisée" et cliquez ensuite sur le bouton "Web", une liste de palette s'affichera. Essayez entre autre la palette "officielle" Web. échanger les palettes de 2 images conservez la première image en mémoire et chargez également l'image suivante et transformez-la en image palettée - sous Photoshop pour chaque image enregistrez la palette (avec la même dimension) en utilisant le menu Image->Mode->Table de couleur. Créez des fichier.act pour chaque image chargez la palette de l'autre image - sous Gimp Pour chaque image enregistrez la palette dans la table des palettes en utilisant le menu "Dialogues->Palette", vous obtiendrez alors la fenêtre de gauche:

28 Dans le bandeau "Palette" de la fenêtre de gauche sélectionnez le bouton à droite comportant une petite flêche, puis dans le menu qui apparait "Importer une palette". La fenêtre de droite s'affiche alors. Sélectionnez comme source "Image", puis cliquez sur le bouton "Importer". La palette apparait alors dans la liste de la fenêtre "Palettes". Faites de même avec la deuxième image (suivre le lien ci-dessus). pour changer de palette passer an mode RVB, puis repasser en mode Couleurs Indexées pour obtenir le menu de choix de la palette comme ci-dessus. Question : envoyez les images obtenues après échange des palettes

29 Gérer la transparence Créez un nouveau fichier de taille 400x400 (menu "Fichier->Nouveau") A l'aide du lasso découpez un morceau d'une image tif et collez-le dans la nouvelle image. Supprimez l'affichage du calque de fond. Sous Photoshop, àl'aide du menu "Fichier->Sauvegardez pour le Web" choisissez le format GIF et cochez la case "Transparence". Si votre version de Photoshop vous le permet, jouez avec les différents paramètres et formats en choisissant d'afficher 4 vignettes, puis testez l'image obtenue en cliquant sur le bouton navigateur en bas à droite (voir menu) sous Gimp, passez en mode RVB et sélectionnez "sélectionnez une palette optimale" et "Activer le tramage de la transparence" Question : Envoyez le fichier obtenu

30 exemple :

31 3.4 QUESTIONNAIRE SUR LES IMAGES PALETTEES 1 - Pour créer une palette sur une image en vraies couleurs on choisit - l'ensemble de couleurs auxquelles l'utilisateur est sensible. - l'ensemble des couleurs utilisées dans l'image parmi toutes les couleurs possibles (dans le codage des couleurs choisi ou imposé). - un sous-ensemble de dimension N de l'ensemble des couleurs de l'image. 2 - Une image palettée ou indexée permet un taux de compression : - d'au moins 5 - d'au moins 2 - variable 3 - La transformation d'une image en image palettée de 256 valeurs n'est pas intéressante pour les images en niveau de gris. - Vrai - Faux

32 4 - Sur un écran en vraies couleurs (16 millions) toutes les applications partagent la même palette - Vrai - Faux 5 - Dans une palette les couleurs sont uniformément réparties sur le spectre. - Vrai - Faux 6 - Une palette adaptée, c'est - la palette la plus adaptée au système visuel humain. - celle qui est calculée sur l'image. - une palette calculée exprès pour l'affichage sur écran. 7 - Trouver l'intrus : - GIF - JPEG - PNG - TARGA

33 8 - Une image avec beaucoup des dégradés donne de bons résultats sous forme palettée : - Vrai - Faux 9 - Une image avec de brusques variations de couleurs donnera de meilleurs résultats compressée en GIF qu'en JPEG. - Vrai - Faux Supprimez vos réponses