Couleur - Frichtiweb.com

mustardunfInternet και Εφαρμογές Web

21 Οκτ 2013 (πριν από 3 χρόνια και 9 μήνες)

74 εμφανίσεις

1

Institut Supérieur d’Informatique
Année Universitaire 2008
-
2009


Chapitre 3

Plan


Nature physique de l’image

1.
Qu'est
-
ce que la lumière?

2.
La perception visuelle chez l'être humain

3.
Synthèse de couleurs


Additive


Soustractive


Modélisation et stockage de l'image

Les 2 natures de la lumière



Ondulatoire



L’optique ondulatoire considère la lumière comme une onde
électromagnétique.


Explique les phénomènes affectant les ondes : interférences,
diffraction


Corpusculaire



La théorie corpusculaire considère la lumière comme un flux
discontinu de photons. Son énergie est liée à la
fréq

de l'onde : E =


(h, constante de Planck ; v,
fréq
)


Explique les observations relatives à l'émission et à l'absorption de la
lumière par la matière.



Vitesse de déplacement : ~ 300000 km/s.


Caractéristiques :


Fréquence. ~ 600000
Ghz



lg d’onde : 500nm


Intensité.



Spectre de la lumière


Couleur dépend de la longueur d'onde









Couleur (notion perceptive)


lg d’onde (notion physique)


Attention : l'œil ne distingue pas un Y monochromatique (une seule lg
d'onde) d'une composition de G et de R. C’est l’illusion qui permet
d'afficher du Y sur les

écrans PC

Longueur d'onde (nm)

Couleur

< 380

rayonnements ultraviolets

380
-

450

violet

450
-

490

bleu

490
-

560

vert

560
-

590

jaune

590
-

640

orange

640
-

760

rouge

> 760

rayonnements infrarouges

380nm

760nm

La perception visuelle


L'oeil humain :



Grâce à la cornée et à l'iris l’image se forme sur la rétine


Rétine :
cônes + bâtonnets


Bâtonnets : perçoivent la luminosité et le mouvement


Cônes : différencient les couleurs



3 types : percevoir le bleu, le vert et le rouge.


Perception entre 400 et 700 nm.


Si un type de cônes manque : daltonisme
.

Sensibilité de l'oeil


beaucoup + grande aux variations d'intensité (luminance) qu'aux
variations de couleur (chrominance)



Luminance

(
luminance)

: % de N ou de B dans la couleur désirée, brillance
de la couleur , aspect clair ou sombre


Chrominance

:


Teinte
(
hue
) : détermine la couleur souhaitée à partir des couleurs à disposition
(R,G,B,C,J,M); correspond à la couleur de base


Saturation

(
saturation
) : mesure l'intensité ou la pureté d'une couleur, % de
couleur pure par rapport au B (caractère vif ou terne/ couleur vive ou pastel), (

Synthèse additive


Calcul fait par addition des longueurs d'onde de sources lumineuses


R, G, B : Toutes les couleurs peuvent être synthétisées en utilisant les 3
sources monochromatiques correspondant aux maxima de sensibilité des 3
types de cône de la rétine de l’œil humain


Modèle RGB


Mode de synthèse adapté pour les sources lumineuses (tubes cathodiques)


Exemple: 2 composantes G et R d'un moniteur d'ordinateur sont allumées
quand les phosphores associés sont frappés par les électrons


les couleurs
des phosphores juxtaposés se
superposent

en raison de la mauvaise
résolution de l'œil


on voit du jaune



blanc

Mélange des couleurs par addition

Synthèse soustractive


Calcul fait par soustraction des longueurs d'onde de la lumière


Mode de synthèse adaptée dans le mélange de pigments, le filtrage et
l’absorption (imprimerie, peinture et art du vitrail)


Exemple :


L'herbe et les feuilles paraissent vertes car elles absorbent le
complémentaire du vert ( violets et ultraviolets). Ce sont les ondes
utilisées dans la photosynthèse.


L'encre filtre la lumière réfléchie par le papier blanc


Lorsqu’on mélange 2 couleurs au pinceau, la couleur obtenue est le
résultat d'une synthèse soustractive


La couleur vue est la lumière non absorbée


Cyan, Magenta, Yellow : C



R, M


G, Y


B alors que


B


R & G, R


G & B, G


B & R


Ce sont les 3 couleurs complémentaires de RGB.


Modèle CMY

Mélange des couleurs par soustraction


noir

Pigment jaune
absorbe le bleu

W(R+G+B)

Y=R+G

Plan


Nature physique de l’image


Modélisation et stockage de l'image

1.
Chaîne de l’image

2.
Image vectorielle

3.
Image bitmap


Espace des couleurs et conversion


Codage des images


Méthode simple


Méthode par palette


Avantages/limitations


Format : BMP, TIFF, GIF, PNG, …


Format : JPEG

Chaîne de l’image


Acquisition/création

: numérisation (scanners, appareils
photos & caméscopes numériques, carte d’acquisition vidéo
)/synthèse (via souris, tablettes graphiques ou par
modélisation 3D)


Codage



Perte d'information envisageable à la compression


Stockage

(disquette, disque dur, CD
-
ROM...)


Traitement

: modifier la taille, la couleur, ajouter ou
supprimer des éléments, appliquer des filtres,…


Transmission


Échange de graphiques, de dessins, d'images.


Prolifération de formats, incompatibilités fréquentes.


Restitution

: Affichage, projection, Impression

Format des images


Les images vectorielles :


On décrit l'image comme une association d’objets
graphiques simples (droites, ellipses,...).


Formats SVG, SWF,...



Les images bitmap :


Image pixélisée. On indique la couleur de chaque pixel


Formats BMP, GIF, JPEG,...



Image Vectorielle


Images décrites comme l'association d’objets graphiques
simples (droites, ellipses...).





3 types de données graphiques :


Points isolés => objets ponctuels.


Lignes isolées => objets linéaires.


Surfaces isolées => objets surfaciques.


Méthodes de représentation vectorielle :


Fil de fer 2D.


Polyédrique.


Codage des contours

Redimensionnement


Pas de perte de qualité, les courbes sont lissées quelque soit l'échelle
d'affichage

Bitmap

Vectorielle

Le format WMF


WMF (Windows Meta File) format vectoriel
de Windows, utilisé par Microsoft Draw, et
anciennes versions de Word, Excel.


Format mixte, pouvant contenir des
informations sous forme matricielle


Un fichier WMF contient :


Une suite d'objet (cercle, carre, bitmap,...).


Chacun décrit par un entête.


Peut contenir jusqu’à 65535 objets

Autres formats vectoriels


SVG (Scalable Vector Graphics)

: Spécification W3C basé sur
XML
pour gérer les
images vectoriels notamment sur le web. Supporte les animations et le son. Format
du futur mais début difficile :


Pas d’implémentation native dans les navigateurs web; développement en cours.


Plug
-
in d’Adobe :
http://www.adobe.com/svg/viewer/install/main.html


Editeurs libres : Sodipodi et OpenOffice Draw


Apparition de banques de clipart sur l'
Internet
.


AI (Adobe Illustrator)
Format de Adobe, très populaire


EPS (Encapsuled PostScript)

: Format mixte universel de Adobe basé sur
postscript mais contenant une image de prévisualisation vectorielle ou bitmap.


PDF (Portable Document Format):
Format mixte universel

de Adobe

dérivé de
PostScript et préservant la mise en forme, les polices, les couleurs et les graphiques
du document source.


PICT

(
Picture)

: Format par défaut de Mac OS.


SWF (Flash)

: Format d’animation vectorielle propriétaire de Macromedia destiné au
web, très populaire. Supporte les animations et le son.


DXF

(
D
rawing e
X
change
F
ormat): Format de AUtodesk utilisé en DAO ( logiciel
libre QCad

)


CGM
(Computer Graphics Metafile) : norme ISO; Format mixte utilisé en DAO


Avantages


Codage riche prenant en compte la sémantique


Codage compact : fichiers de taille réduite


Redimensionnement sans perte de qualité


Retouches aisées car éléments de l'image indépendants


Animation + simple grâce aux vecteurs


Traduction aisée en bitmap


Recherche de texte, d’objets


Lien hypermédia sur des objets, interactivité


Génération automatique à partir de données XML,…


Limitations




Inutilisables pour des photographies


Pas adaptée aux images complexes avec bcp d'objets
de petites tailles


Bcp de formats industriels, non standardisés, non
reconnus par les navigateurs web


Impossible de transformer un bitmap en vecteur

Image bitmap
Pixelmap, matricielle, raster



On indique la couleur de chaque pixel.


Pixel (
PICture ELement)

: + petit élément constitutif
d'une image numérique







Codage des couleurs:



Choix du modèle RGB


Certains formats supportent le modèle CMYK.


Manipulation et restitution utilise d’autres modèles



Critères de qualité : couleur & définition

Définition
(Ordinateur)

Résolution

(Scanner, imprimante)

Taille de l’image en nb
de pixels

Nb de points par unité de longueur (2,54cm)
(unité dpi/ppp : point par pouce)

300dpi


300 points sur une ligne de 2,54cm

Espace des couleurs


Représentation mathématique d'un ensemble de couleurs. Il
en existe plusieurs :


Le codage
RGB

(
Red, Green, Blue
).


Le codage
CMY

(Cyan, Magenta, Yellow)


Le codage
CMYK


Le codage
HSL

(
Hue, Saturation, Luminance
).


Le codage YUV : vidéo analogique (PAL et SECAM).


Y représente la luminance (l'information en N&B), Cb et Cr la
chrominance. Permet de transmettre des infos colorées aux TV
couleurs, en restant compatible avec les TV N&B affichant en niveau
de gris.

Y

=
0,299

*
Rouge

+

0,587

*

Vert

+
0,114
*
Bleu

Cr

=
Rouge


Y

Cb

=
Bleu
-

Y


Le codage YIQ


Le codage CIE


Modèles RGB, CMY et CMYK



Modèle RGB


La couleur est définie comme une somme pondérée des couleurs
primaires.


Choix des couleurs primaires du système : RGB : Red, Green, Blue


Modèle CMY


La couleur est définie comme différence pondérée entre le blanc et les
couleurs primaires.


Choix des couleurs primaires du système : CMY : Cyan, Magenta, Yellow


Modèle CMYK


Extension du modèle CMY


En pratique, le noir n'est pas tout à fait noir.


Ajout d'une composante "noir pur".


CMYK :
C
yan,
M
agenta,
Y
ellow, Blac
K
.


Possibilité de remplacer les 3 encres couleurs par du noir pour réduire la
consommation d'encre



Modèle naturel HSL


Modèle de représentation proche de la perception
physiologique de la couleur par l'oeil humain.


Le modèle RGB ne permet pas de sélectionner
facilement une couleur : éclaircir une couleur


augmenter proportionnellement la valeur des 3
composantes.


HSL (
TSL
en français )


Hue


Saturation



Luminance

Système de représentation


Équation de conversion entre RGB et CMY


Exemple : Convertir le Blanc de RGB (1,1,1) à CMY (0,0,0) et vice versa.


Conversion CMY vers CMYK : même principe.



























C = 1


R

M = 1


G

Y = 1


B

R = 1


C

G = 1


M

B = 1
-

Y

Codage des images


Coder une image


Le tableau de pixels.


La couleur des pixels :


Modèle de représentation


Couleur des pixels : 2 méthodes


Méthode simple (pixel

couleur)


Méthode par palette (pixel


indice dans la palette)



Méthode simple


Pour chaque pixel , chaque composante RGB occupe n bits.



P
ixel occupe 3 x n bits.



Pixel peut avoir 2
3n

couleurs.


Mode True Color, Couleurs vraies : n = 8


24 bits


16 millions de
couleurs.


Également


Mode 32 bits :


Ajout d’une 4
ième

composante sur 8 bits :le canal alpha.


gére la transparence ou la texture des points.



évite les effets de "marches d'escalier".


Mode N&B
:

1 bit/pixel


2 couleurs possibles (N ou B)


Mode 16 couleurs/niveaux de gris


Mode 256 couleurs/niveaux de gris : 1 octet/pixel


Limitations :


Toutes les nuances ne sont pas utilisée.


Pas assez de nuances pour une teinte donnée.


Ex. : image sur la mer :bcp de nuances de B; peu de R.



Méthode par palette


Méthode par palette (colormap)


choisir les couleurs disponibles.


Image en couleurs indexées


La couleur de chaque pixel :


Est codée comme une référence dans une palette.


La palette contient les composantes RGB de la couleur.


On obtient alors :


N couleurs parmi 2
3M

possibles.


N = nombre d'entrées dans la palette.


M = nombre de bits utilisés pour coder une composante d'une
couleur dans la palette.

Taille d'une image


Taille brute : sans compression.


Taille = X . Y . n.


X = nombre de colonnes.


Y = nombre de lignes.


n = nombre d'octets nécessaires pour coder un pixel.


Exemple d'une résolution de 1024 x 768.

Nombre de couleurs

Taille

En octets

En Ko

Noir et Blanc

X*Y*(1/8)

98.304

96 Ko

Palette de 16 couleurs

X*Y*(1/2)

393.216

384 Ko

Palette de 256 couleurs

X*Y*1

786.432

768 Ko

True Color, 16 millions de
couleurs.

X*Y*3

2.359.296

2.304 Ko

Avantages


Adapté aux applications orientées images


Qualité photographique












Limitations




Codage "pauvre" de l'information.


Pas de distinction d'objet dans l'image.


Taille des fichiers importante.


Traitements d'image longs.






Avantages & limitations (2/2)


Limitations (suite) :


L'agrandissement provoque un effet de mosaïque :








La création d'une image "à la souris" est difficile.


Usage conseillé d'un périphérique de numérisation :
scanner, digitaliseur, appareil photo numérique...


Retouches délicates : effacer un élément de l'image crée un
"trou".



Formats d'images bitmap


Nombreux


Caractéristiques


Nombre de couleurs.


Méthode de compression utilisée.


Contexte d'utilisation.


Comparaison : taille des fichiers pour les images

Nom

Résolution

Définition

Nombre de
couleurs

Image

Droopy

1024x768

72 DPI

256

Trounesol

1600x1144

72 DPI

16 millions

Format BMP


Défini par Microsoft pour Windows


Caractéristiques


1, 4, 8 ou 24 bits : jusqu'à 16 millions de couleurs.


Compression : sans perte, RLE (rarement).


Fichiers de taille importante.


Reconnu par une majorité de logiciels.

Image

Nb couleurs

Compression

Taille

Droopy

256

770 Ko

Droopy

256

RLE

613 Ko

Tournesol

16 millions

5363 Ko

Tournesol

16 millions

RLE

1745 Ko

Format TIFF


TIFF (
Tagged

Image File Format).


Origine
Aldus

et Microsoft.


Standard de codage des images scannées; PAO, infographie, bureautique pour les
images au trait (cliparts, FAX).


Puissant mais complexe à gérer.


Possibilité d'adaptation et d'évolution.


Différentes versions incompatibles!


Caractéristiques :


Codage RVB, CMJN, couleur indexées, niveau de gris


Compression : RLE, LZW, JPEG, compression FAX, ou aucune.


Très bonnes performances en compression d'images noir et blanc.


Fichiers assez gros.


Reconnu par une majorité de logiciels.

Image

Nb couleurs

Compression

Taille

Droopy

256

Aucune

771 Ko

Droopy

256

LZW

364 Ko

Droopy

2

Huffman

156 Ko

Tournesol

16 millions

Aucune

5364 Ko

Tournesol

16 millions

LZW

3395 Ko

Tournesol

2

Huffman

462 Ko

Format GIF


Format GIF (Graphic Interchange Format) :


Compuserve, 1987 : GIF87a.


Caractéristiques


256 couleurs parmi 16 millions.


Compression sans perte LZW, efficace s'il y a des zones
homogènes.


GIF89a : possibilité de transparence, et d'animation.


GIF89a : possibilité d'entrelacement (chargement graduel de
l'image).


Très utilisé :


Reconnu par tous les logiciels ou presque


LE format du Web avec JPG.


Image

Nb couleurs

Compression

Taille

Droopy

256

LZW

353 Ko

Tournesol

256

LZW

1203 Ko

Format PNG


PNG (Portable Network Graphic).


Pour remplacer le GIF (devenu payant!!!).


Le futur format du Web?


Caractéristiques :


16 millions de couleurs.


Compression sans perte LZW.


Possibilité de transparence (niveau de transparence).


Possibilité d'entrelacement (chargement graduel de l'image).


Pas d'animation.


Pas supporté pas tous les navigateurs web


Image

Nb couleurs

Compression

Taille

Droopy

256

LZW

310 Ko

Tournesol

256

LZW

2723 Ko

Format JPG


JPG ou JPEG (Joint Photographic Experts Group)


Comité créé en 1986


Norme adoptée en 1992/93 (ISO/CEI 10918
-
1 ou UIT
-
T Recommandation T.81. )


JPEG 2000 : compression par ondelettes.


Caractéristiques


16 millions de couleurs.


Compression avec perte


Possibilité d'entrelacement (chargement graduel de l'image).


Pas d’animation, pas de transparence


Très utilisé


Reconnu par tous les logiciels ou presque


LE format du Web avec GIF

Image

Nb couleurs

Compression

Taille

Droopy

16 millions

Taux 1

451 Ko

Droopy

16 millions

Taux 10

159 Ko

Droopy

16 millions

Taux 20

119Ko

Droopy

16 millions

Taux 99

17Ko

Tournesol

16 millions

Taux 1

897 Ko

Tournesol

16 millions

Taux 10

457 Ko

Tournesol

16 millions

Taux 20

346 Ko

Tournesol

16 millions

Taux 99

40 Ko


Contraintes d’exploitation fixé par le comité JPEG


Modes de compression avec ou sans dégradation


Implémentation hard ou soft


Réseau de transport Numéris (64 kbits/s)


Affichage séquentiel ou progressif


Objectifs fixés ambitieux


2.25 bits/pixel : qualité de l’originale


0.75 bit/pixel : qualité excellente


0.25 bit/pixel : qualité moyenne


0.08 bit/pixel : reconnaissable !



JPEG
compression

JPEG
compression


6 étapes


Format des données compressées et schéma de dé/codage.


Algorithmes de dé/compression proposés mais non normalisés
.

JPEG
Découpage de l’image (1)


& transformation des couleurs (2)


Découper l’image en M carreaux
f
i
(
x
,
y
) de 8 x 8 ou 16x16

pixels


les matrices doivent être carrées


petit bloc


temps de calcul raisonnable


JPEG peut coder les couleurs sous plusieurs modèles,
mais meilleure compression avec codage de type
luminance/chrominance (YUV)


Oeil + sensible à luminance qu’à chrominance

JPEG
Sous échantillonnage (3)


Exploiter la faible sensibilité de l'œil à la chrominance


sous échantillonner les signaux de chrominance


sous échantillonner à 4:4:4, 4:2:2, 4:1:1

JPEG
DCT

(4)


Discrete Cosine Transform


Appliquée sur les matrices Y, Cb et Cr



Sépare les basses et les hautes fréquences
présentes dans l'image



Même principe que la transformée de Fourrier


Décomposition de la fonction
f
(
x
,
y
) dans une
base de N*N fonctions dont la somme pondérées
=
f
(
x
,
y
)


Calcul des coefficients C(
u,v
)

1 si w

[1,N
-
1]

si

JPEG
DCT

(4)


Fonction 2D


Coefficient DC

= valeur moyenne du bloc : c’est le plus important


Coefficients AC

= puissance spectrale pour chaque fréquence spatiale
.

DCT

JPEG
DCT

(4)

C

JPEG
Quantification (5)


Introduit les principales pertes


La DCT est conservatrice si on omet les erreurs d’arrondis.


Réduire le nb de valeurs correspondant aux amplitudes.


Hautes fréquences = faibles amplitudes peu sensible pour l'œil


éliminées.


Utilisation d’une matrice Q (u,v) qui définit le niveau de
quantification pour chaque fréquence


Moins de niveau pour les matrices de chrominance que pour
la luminance






Les tables doivent être transmises au décodeur

JPEG
Quantification (5)

C

C
*
=

Codage RLE, DPCM & Huffman (6)


RLE zigzag pour les AC d’un carreau


Dans notre exemple RLE sur :


0,
-
2,
-
1,
-
1,
-
1, 0, 0,
-
1, EOB (End Of Block)



0,
-
2, #3
-
1, #20,
-
1, EOB (End Of Block)


Économie de 3 valeurs


Compression différentielle DPCM des cœfficients DC






Huffman sur les suites de DC et AC encodés


Les tables doivent être transmises au décodeur




JPEG Décompression


Dans notre exemple




Résultat :






Erreur :
e(x,y)


Amplitude max :5



Moyenne : 1.6


Moyenne normalisé

1% (1,6/150)


Autres formats


PCX (PiCture eXchange).


Environnement PC (mode CGA).


256 couleurs.


Compression RLE, adapté à de faibles nombres de couleurs.


PICT


QuickDraw.


Traite aussi le vectoriel.


Spécifique à Macintosh.


FAX


Transmission de documents.


Codage binaire (noir et blanc).


Compression RLC puis type Huffman.


TGA


Créé par Truevision (cartes Targa et Vista).


Très puissant (comme TIFF).


Peu connu.


Compression RLC.


Palettes graphiques haut de gamme (PC).


Exemple de dégradation JPG

Taux 1

Taux 10

Taux 20

897 Ko

457 Ko

346 Ko

Taux 50

Taux 75

Taux 99

241 Ko

119 Ko

40 Ko

Taux de compression JPG

Droopy, compression 10 (159 Ko)


Droopy compression 20 (119 Ko
)



Récapitulatifs


Pour Droppy


Compression sans perte : GIF & PNG.


Compression avec pertes : JPG.

Format

Nb couleurs

Compression

Taille Droopy

Taille Tournesol

BMP

256

770 Ko

5363 Ko

BMP

256

RLE

613 Ko

1745 Ko

TIFF

256

771 Ko

5364 Ko

TIFF

256

LZW

364 Ko

3395 Ko

TIFF

2

Huffman

156 Ko

462 Ko

GIF

256

LZW

353 Ko

1203 Ko

PNG

256

LZW

310 Ko

2723 Ko

JPG

16 millions

Taux 1

451 Ko

897 Ko

JPG

16 millions

Taux 10

159 Ko

457 Ko

JPG

16 millions

Taux 20

119 Ko

346 Ko

JPG

16 millions

Taux 99

17 Ko

40 Ko


Pour Tournesol


Compression sans perte :


GIF, mais 256 couleurs.


PNG, mais compression insuffisante.


JPG !!!


Compression avec pertes : JPG