1. Pourquoi un format d'image pour le web ?

Une image est composée de pixels (picture elements), des petits points qui ont une couleur et une taille infime. Le problème, c'est que plus l'image est grande (c.à.d. contient de nombreux pixels) plus le poids du fichier augmente...

Or il est impensable de mettre sur une page web des photos à plus de 2 méga octets (Mo) la photo : les utilisateurs en bas débit (56k) mettent environ 5 à 6 min pour télécharger 1 Mo, donc imaginez une page web (ou même un mail) contenant 4 photos de 2 Mo chacune, il faut 40 min pour la voir entièrement. Et sur un forfait limité en temps, 40min sont non négligeables.

2. Qu'est-ce que la compression d'image ?

L'idée de base est la suivante : obtenir la même image, si possible avec les mêmes dimensions, mais un poids plus léger. C'est ainsi que, d'une photo de 2 Mo, on peut "descendre" à 100 ko ... !

Ceci dit, pour comprimer une image, il va forcément falloir supprimer des informations : des pixels jugés inutiles, des coins où l'on peut rendre plus floue l'image ... ou tout simplement mettre moins de couleurs : ce sont ainsi les 2 principales techniques de compression :

• La compression dite "destructrice" : ce type de compression peut être opéré à différents degrés (souvent une règle avec un curseur qui varie de 0 à 10 ou de 0 à 100%) : plus on s'approche du 100% (ou du 10) plus le poids de l'image sera léger, mais plus l'image sera dégradée.
• La compression dite "non destructrice" : ce type de compression ne détruit absolument pas l'image, mais supprime des couleurs qui sont superflues. Par exemple, une image codée en 24 bits (2²⁴ = 16 777 216 couleurs) dispose d'un très grand panel de couleurs. Seulement l'oeil humain, en voit-il autant ?

Selon les formats d'image, l'une (ou l'autre) des compressions est appliquée. Ou pas du tout : on parlera alors de format non compressé.

3. Format image GIF

Très populaire, le format GIF (prononcez 'jif') est un format qui utilise une compression non destructrice des images. Il a longtemps été un format propriétaire (c.à.d. que l'utilisateur final n'a pas accès au code de programmation) et est en train de tomber dans le domaine public (Lire un article sur Clubic.com).

3.1. Couleurs du GIF

Une image dans ce format a une capacité maximum de 256 couleurs. En réalité, une image peut avoir 8 bits (2 puissance 8 = 256 niveaux) par composante (Rouge, Vert, Bleu) soit 2⁸ * 2⁸ * 2⁸ couleurs = 2²⁴ = 16 777 216 couleurs. Pour l'exporter au format GIF, le logiciel construit une palette comprenant au plus 256 couleurs : c'est ainsi que le GIF est une image dont la qualité initiale n'est pas dégradée, sauf en terme de couleurs : on dira qu'elle est limitée.

3.2. GIF et transparence

Le GIF supporte également la transparence, c.à.d. qu'une des couleurs de la palette peut être non visible : si l'image chevauche une autre (ou une couleur de fond différente), la couleur choisie comme transparente dans l'image laissera apparaître la couleur de "derrière". Cette transparence, totale, ne peut concerner au plus qu'une des couleurs et concerne tous les pixels de cette couleur.

3.3. GIF et animation

Le format GIF supporte l'animation, c.à.d. la superposition de plusieurs images, chacune "défilant" de manière limitée dans le temps. On peut ainsi créer un petit dessin animé grâce à ce format. Les images constituant le "dessin animé" sont toutes exportées en GIF.

4. Format image JPEG

Le format JPEG parfois abrégé "JPG" pour des extensions de fichier à 3 lettres est plus destiné aux photos. Il utilise une compression destructrice de l'image. Le principe de compression est un algorithme qui peut se résumer ainsi : lors de la compression d'une image en JPEG, les pixels contigüs sont moyennés en pixels uniques. Cela veut dire que si un pixel noir est voisin d'un pixel blanc, l'algorithme va définir un seul pixel de la taille des 2 initiaux qui aura pour couleur la moyenne des 2 qu'il remplace : gris. Plus on compresse l'image, plus les pixels résultants seront gros et plus l'image sera dégradée.

4.1. Couleurs du JPEG

Pareillement au format GIF, le format JPEG code les images sur leurs 3 composantes Rouge, Vert, Bleu. 256 niveaux pour chaque couleur donne une palette finale de 24 bits : 16 777 216 couleurs.

4.2. JPEG et transparence

Le JPEG ne supporte pas de transparence.

4.3. JPEG et animation

Le JPEG ne supporte pas l'animation

5. Format image PNG

Le format PNG (prononcez 'ping') a été créé en réponse au brevet du GIF. Il est un format issu du "libre", c.à.d. que l'on peut avoir accès au code source de son algorithme. Il tient à la fois du JPEG (pour le nombre de couleurs supportées), du GIF (pour la transparence) et même mieux. PNG propose 3 types d'encodages : Paletted, GrayScale et TrueColor.

5.1. Couleurs du PNG

Le PNG peut être en 8 bits (256 couleurs), ou en 24 bits (16 millions de couleurs) : il tient du JPEG pour ce coté là. Toutefois, il n'est pas aussi performant que ce dernier en compression, puisque son coté 'GIF' lui fait utiliser une compression non destructrice.

5.2. PNG et transparence

Le PNG supporte la transparence, mais il supporte bien plus ! Dans le format GIF, la transparence s'applique à une couleur de la palette, et cette couleur est soit transparente, soit pas. En PNG, la transparence peut avoir 256 niveaux (contre 2 pour le GIF).

5.3. PNG et animation

Le PNG ne supporte pas l'animation, mais un format semblable la supporte, toujours dans cette idée de concurrencer le GIF : le format MNG.

5.4. PNG et le canal Alpha

Ceci n'est pas supporté par le GIF, c'est la translucidité. Le format PNG, indépendamment de la transparence, permet d'associer à une couleur un paramètre de translucidité.

5.5. PNG et navigateurs Web

Peu de navigateurs ne supportent pas le PNG : Internet Explorer 6 et antérieurs. Cependant, ce sont les plus répandus ... Ils supportent la transparence totale du PNG (pour retrouver l'équivalent du GIF) en mode 8 bits... Avec Internet Explorer 7, le canal Alpha est mieux supporté.

6. Autres formats d'image

Il existe bien d'autres formats d'image, comme le BMP, le TIFF par exemple, mais ils ne compressent pas les images et ne sont pas recommandés pour le Web.

7. Technique d'affichage web

7.1. Formats d'images retenus

Pour une page Web, les 3 formats les plus répandus (et les plus faciles à mettre en oeuvre) sont le GIF, le JPEG, ou le PNG. Il faut simplement s'assurer que le format employé est judicieusement employé : utiliser un GIF ou un PNG pour un logo est tout à fait approprié, mais pas pour une photo. Pour un JPEG, il faut trouver un compromis entre la qualité d'image désirée (tributaire du taux de compression) et le poids final du fichier compressé ...

7.2. Technique d'affichage

Pour afficher des images sur une page Web, il faut utiliser la balise <img> (ou /> si doctype XHTML). Cette balise prend en charge 2 attributs, width et height, qui spécifient les dimensions de l'image. On peut tout à fait réduire par ce biais (au risque de déformer) une image mais il faut bien garder à l'esprit qu'une photo de 2 Mo, 2200 par 1700 pixels si elle est affichée en spécifiant 50 par 50 pixels dans width et height, pèsera toujours 2 Mo : c'est une redimension à la volée, et l'image est affichée de manière déformée, mais le fichier de l'image n'est nullement modifié : l'image est toujours la même.

Pour résoudre ceci, il est possible de faire une vignette de l'image, de l'afficher, et de faire un lien dessus : ainsi le visiteur, lors de sa visite sur la page, téléchargera la petite vignette et si et seulement s'il veut un agrandi, il cliquera pour (télécharger) afficher la grande, comme ceci :

<a href="images/grande_photo.jpg">
	<img src="images/petite_photo.jpg" width="120" height="100" alt="Photo d'identité" />
</a>