+
Images
+
Images
Les images peuvent être classifiées selon le nombre de bits utilisés dans leur
représentation
Monochrome (noir et blanc)
1 bit par pixel
Niveaux de gris (Gray scale, 256 nuances de gris)
1 octet par pixel
Couleurs
Jusqu’à 24bits = 16.7 millions (32 bits avec un alpha)
2
+
1-bit Monochrome
Type d’image le plus simple
Ne contient pas de couleur
Chaque pixel est codé sur 1 seul bit (0 or 1)
Image binaire
Usage
Tickets de caisse, journaux, fax, etc. Lena
3
+
Taille d’une image monochrome
480 px 37,5 Kibytes
640 px
4
+
Niveau de gris
Chaque pixel est codé sur un seul
octet
Chaque pixel a une valeur grise parmi
256 nuances (i.e. 28)
5
+
Taille d’une image en niveau de gris
640 px
480 px 300 Kibytes
Image en niveaux de gris de Lena
6
+
Image 24 bits
Un pixel est représenté par 3 octets (RGB)
Supporte 256 x 256 x 256 couleurs possibles (i.e. 16777216 )
Connue sous le nom de Couleur vraie (True Color)
L’oeil humain différencie 10 millions de couleurs
Format gourmand en taille d’image
Ex. Taille d’une image 24 bits 640 x 480 : 921.6 kB (sans compression)
7
+
Séparation en canaux de couleurs
Image originale
Red Green Blue
8
+
Image 32 bits
Les images sont parfois codées sur 32 bits pour représenter un effet sur le
pixel
L’octet supplémentaire s’appelle le canal alpha
Souvent utilisé pour gérer des effets de transparence
Par exemple, pour la composition d’objets se recouvrant
9
+
Image 8 bits (couleurs indexées)
Quand la taille de l’image (stockage, transfert) importe, on peut utiliser des
couleurs indexées (256 couleurs codées sur 24 bits)
Tous les systèmes sont compatibles
Même sur smartphones
Ces images utilisent une palette de couleurs ou lookup table (LUTs) pour
sauvegarder l’information de couleur
Le pixel ne code pas directement la couleur mais l’index d’une couleur dans la palette
10
+
Format populaire sur le Web
GIF
Le plus ancien et encore très populaire du fait de son intrication historique avec HTML.
JPEG
Le type de fichier le plus répandu actuellement
PNG
Remplaçant de GIF
SVG
Format vectoriel
GIF (Graphics Interchange Format)
Développé et breveté par CompuServe en 1987
Encore très utilisé sur Internet
Limité à 256 couleurs indexées 8-bits
Peut stocker plusieurs images et contrôler le défilement et la transparence pour faire des
animations
Une couleur spéciale sert de couleur transparente (pas d’alpha)
Compression sans perte
Hors réduction de couleurs
Application pour les dessins au trait, les clip art et les images avec de gros aplat de
couleurs
12
GIF animé
13
+
Transparence GIF
Une couleur de la palette est désignée comme étant transparente
Tous les pixels dans cette couleurs se seront pas rendus à l’écran
GIF avec transparence GIF sans transparence
14
+
JPEG (Joint Photographers Expert Group)
Plus de 16 millions de couleurs
Adéquate pour les photos
Compression avec perte pour réduire au maximum la taille
Réduction de la résolution de l’image
Distorsion des lignes
Les images JPEG sont dégradées avec un facteur de qualité
Proche de 100 dégradation peu perceptible, faible compression
Proche de 0 très forte dégradation, fichier peu volumineux
75 est généralement un bon compromis
+
JPEG Quality Factor
Q = 100 Q = 10 Q=1
83,261 Kbytes 4,787 Kbytes 1,523 Kbytes
Size=100% Size=17,39% Size=1,83%
+
Degradation
Les dégradations causées à l’image sont cumulatives
i.e., si vous lisez une image JPEG et que vous réappliquer l’encodage en JPEG, de
nouvelles dégradations de l’image vont apparaître
Très mauvais résultats sur les lignes droites et les textes
Dégradation visible
Ce type d’image doit utiliser GIF ou PNG
Très bon résultat sur les photographies
+
JPEG Progressif
Deux types d’image JPEG
JPEG séquentiel : qui stocke les images par blocs
JPEG progressif : l’image apparaît “par couche”. Semble hors du focus au départ
et s’affine par la suite
Avantage
On peut voir un pré-rendu de l’image complète lors du chargement
Désavantage
Coût en calcul plus important
PNG (Portable Network Graphic)
Créé pour être une alternative gratuite et plus performante à GIF
Compression sans perte
Mais pas d’animation
3 types d’images supportés: True color, gray scale, indexée
JPEG supporte les 2 premiers.
GIF supporte le 3ème.
Supporté par tous les navigateurs actuels
GIF ne devrait servir qu’aux animations
19
SVG (Scalable Vector Graphics)
Développé à partir de 1999 par le W3C
SVG est un format XML
C’est donc un fichier texte !!!
Format descriptif à partir de primitive de dessin (cercles, rectangles,
courbes de Béziers, …)
Supporte le changement d’échelle
Important pour HTML5 ! (balise <svg>)
20
SVG - Exemple
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="[Link] version="1.1" width="300" height="200">
<title>Exemple simple de figure SVG</title>
<desc> Cette figure est constituée d'un rectangle, d'un segment de droite et d'un cercle. </desc>
<rect width="100" height="80" x="0" y="70" fill="green" />
<line x1="5" y1="5" x2="250" y2="95" stroke="red" />
<circle cx="90" cy="80" r="50" fill="blue" />
<text x="180" y="60">Un texte</text>
</svg>
« ExempleSimple » par Sanblihac —Sous licence CC BY-SA 3.0 21
SVG - Exemple
22
Tableau comparatif
GIF JPEG PNG SVG
Photographies, Images avec
Line Art, Image
Images avec beaucoup de Dessin
Application avec peu de
beaucoup de couleurs/Text composites
couleurs, texte
couleurs/textures ures, texte
Vitesse
++ --- - --
affichage
Transparence, Bonne
Compression Changement
Bénéfices compression pour
Animation sans perte d’échelles
les photos
Nb
256 16,7 millions 16,7 millions 16,7 millions
Couleurs
23
