Le codage des images

● Une image peut-être aquise (appareil photo, scanner) ou créée avec un programme

● Puis elle peut être traitée : filtres, retouches...

● Et elle peut être stockée et/ou imprimée

Images bitmap ou vectorielle ?

Image vectorielle

Image bitmap

Nombre de pixels

Image en taille réelle de 1000 pixels

Agrandissement du coin supérieur gauche : 1 carré correspond à 1 pixel

Un smartphone moyen aujourd'hui prends des photos d'environ 5 millions de pixels

Un écran d'ordinateur aujourd'hui à une résolution moyenne de 1million de pixels

Codage des couleurs

● L'information est codée à l'aide de 0 et de 1 : c'est donc un codage binaire.

● Ainsi,

– L'élément codé sur 1 bit n'a que 2 possibilités : noir ou blanc.

– L'élément codé sur 8 bits a (2 puissance 8) possibilités : 256 couleurs

● 8Bits = 1 octet, donc 16 bits = 2 octets et 24 bits = 3 octets....

Composition des couleurs en RGB

En images...

Différents formats, différentes utilisations...

● Formats compressés dits « lossy » comme le JPEG.

348 Ko, données conservées 11.8 Ko, couleurs perdues mais poids minimal

Gain de place de presque 97 % !

Compression progressive d'une image

Formats et transparence

● Format JPEG qui ne supporte pas la transparence

● Format GIF ou TIFF ou BMP supportant la transparence

color: rgb(red, green, blue, opacity);

Compression d’images

Logo repésentant une compression

-réduction de l'information basée sur notre propre limite humaine à percevoir ces médias.

-utile pour les transmissions à bas débit, mais dégrade la qualité de l'image restituée

-Exemples de logiciels de compression avec perte :

.jpg .gif

-coder les données binaires de manière plus concise dans un fichier

-retrouver la totalité des informations après une procédure de décompactage

-Exemples de logiciels de compression sans perte :

.zip .cab .rar .ace .7z .tar .gzip...

Avec Perte / Sans Perte

Codage Base 64

-codage de l'information utilisant 64 caractères

-Principalement utilisé pour la transmission de messages (courrier électronique et forums) sur l'Internet

Intégration HTML

-L’encodage des images en base64 est une des bonnes pratiques d’optimisation web.

-Cet encodage transforme un fichier image en suite de caractère.

-Permet de diminuer considérablement le nombre de requêtes envoyées au serveur web par le navigateur.

• Image extérieur à la page web:

<img src="http://www.bellami.fr/wp-content/uploads/2011/06/base64.jpg" alt="aperçu d'une image encodée en base64" />

• Image encodé dans le code HTML de la page web:

<img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQE..........ASABIAAD/2wAGADABg D//Z" alt="aperçu d'une image encodée en base64" />

Fonctionnement des pixels sur un écran

● Il est important de ne pas confondre un picture element avec un pixel de l'écran d'ordinateur

Liens utiles & Sources

● Compression facile par lots : http://bit.ly/logicielcompression

● Image vers base64 : http://bit.ly/imagebase64

● Image en « pixels » : http://bit.ly/imageverspixel

● Créer des images avec Paint.net : http://getpaint.net

● Image bit-map vers vectorielle : http://bit.ly/vectorielle

http://formation.dunoyer.free.fr/imagesnum/bits.htm

http://tecfa.unige.ch/tecfa/teaching/staf13/fiches-mm/formatfichier.htm

http://raphael.isdant.free.fr/traitement_numerique/2-traitement_numerique_de_l%27image.pdf

http://amssoft.free.fr/gifjpg.htm