Seuls quatre formats graphiques d'image sont reconnus nativement par les navigateurs de dernière génération :

• le format GIF (Graphics Interchange Format),
• le formet JPEG (Joint Photographic Experts Group),
• le format PNG (Portable Network Graphics),
• le format SVG (Scalable Vector Graphic).

D'autres formats peuvent éventuellement être pris en compte, mais seulement par l'intermédiaire d'un plug-in ou d'une fonctionnalité spécifique au navigateur qui prendront en charge le traitement particulier du format graphique. Ils sont à éviter absolument.

Toutes les images de type bitmap de cette liste ont le point commun d'être compressées. Cette compression se fait par la réduction du nombre de couleurs dans l'image, soit par un mécanisme destructif (images de plus de 256 couleurs), soit par un mécanisme d'optimisation (images jusuq'à 256 couleurs). Suivant ce qui est représenté par l'image, il faut choisir la bonne méthode pour obtenir le poids de fichier le plus faible par rapport à la qualité acceptable la moins dégradée.

Le changement de format d'une image ne se fait pas en renommant simplement le fichier avec un extension particulière (.gif, .jpg, .png, .svg) mais en utilisant un logiciel spécifiquement fait pour le traitement d'image (photoshop, Gimp, Paintshop Pro, etc).

Il existe 2 types d'images :

• les images de type vectoriel,
• les images de type bitmap.

Une image de type vectoriel est constituée de formules mathématiques qui décrivent les éléments géométriques constitutifs de l'images. On aura une liste de figures géométriques simples (rectangles, cercles, triangles, segments de droite, courbes de Bézier, etc.), avec leur couleur et leur emplacement. On stocke non pas une matrice de points comme dans les images de type bitmap, mais une suite d'opérations mathématiques conduisant au tracé des formes.
Un tel type d'image présente des avantages indéniables pour le Web (gain de poids important, déformation possible par changement des valeurs des formules mathématiques, animations), mais n'est pas du tout adapter pour stocker des images présentant beaucoup de nuances et de formes complexes (par exemple des photos).
Dans ce type d'image on trouvera sur le web le format SVG.

Une image de type bitmap (ou matricielle ou type point) est constituée par la matrice de tous les "points" constitutifs de l'image. Un "point" est le carré élémentaire pouvant être représenté par un écran. Un "point" est appelé pixels (picture element) et il est représenté visuellement par une couleur (codée sur 1 ou 3 octets).
Dans ce type d'image on trouvera sur le Web les formats GIF, JPEG et PNG.
Les images utilisées sur le Web sont à 98% des images de type bitmap. L'explication de cette situtation est historique : jusqu'à il y a peu de temps, les navigateurs ne supportaient nativement que ce type d'images. Dans le futur, l'utilisation d'images vectorielles va certainement beaucoup se développer à cause des poids réduits et des possibilités de déformation qui permettent d'avoir la même image pour différents type d'écrans (ordinateurs, tablettes, smartphones).

Le mode colorimétrique définit la façon dont seront calculées et stockées les couleurs d'une image.
On aura par exemple :

• le mode noir et blanc : un pixel est soit noir, soit blanc
• le mode niveau de gris : un pixel est une teinte choisie parmi 256 niveau de gris (du noir au blanc)
• le mode CMYB (Cyan, Magenta, Yellow, Black, CMJN en français) : la couleur d'un point est obtenue par un mélange de cyan, de magenta, de juane et de noir. C'est le mode à utiliser pour toute image destinée à être imprimée (4 encres de couleurs différentes = quadrichromie).
• le mode HSL (Hue, Saturation, Lightness, TSL en français) : la couleur est codée suivant le cercle des couleurs,
• le mode RGB (Red, Green, Blue, RVB en français) : la couleur d'un pixel est obtenue par le mélange de ces 3 couleurs. C'est le mode généralement utilisé pour toute image couleur destinée à être vue sur un écran.

Quelque soit l'écran électronique qui affiche une image, la couleur est toujours calculée par le mélange de 3 sources lumineuses : une rouge, une verte et une bleue. Dans sa forme la plus gourmande en taille, la représentation informatique de ces 3 sources lumineuses est faite par une valeur stockée dans 3 octets :

• un octet pour la source rouge (avec 256 valeurs possibles - de 0 à 255)
• un octet pour la source verte (avec 256 valeurs possibles - de 0 à 255)
• un octet pour la source bleue (avec 256 valeurs possibles - de 0 à 255)

La couleur résultant de ces 3 nuances de rouge, vert et bleu étant stockée dans 3 octets, soit 24 bits, on parle aussi "d'images 24 bits" ou "true color". Les pixels d'une telle image peuvent avoir 16 777 216 couleurs différentes (256*256*256).
Remarque : l'oeil humain perçoit "seulement" 5 000 000 de couleurs.

Images à palette indexée
Pour minimiser la taille des fichiers, et si la représentation faite par l'image s'y prête, on peut stocker les couleurs des pixels avec seulement un octet. On parlera alors "d'images 8 bits" ou "d'images à palette indexée". L'inconvénient majeur du principe est d'être limité à la représentation de 256 couleurs différentes dans une image. C'est souvent insuffisant pour des photographies, mais tout à fait acceptable pour des images avec de grands aplats de couleur comme les illustrations, logos, icônes, etc.

La palette est un ensemble d'octets qui stockent 2, 4, 8, 16, 32, 64, 128 ou 256 couleurs différentes. Bien entendu chacune de ces couleurs est elle même représentée sur 3 octets, mais on aura au maximum 768 octets (3*256) pour la palette.

Un index est fait avec les couleurs de la palette, et chaque pixel de l'image est référencé par une entrée dans l'index. On pourra donc ainsi représenter la couleur d'un pixel avec un seul octet (images 8 bits) plutôt qu'avec 3 (images 24 bits).

Les formats d'images utilisés sur le Web permettent de faire un affichage progressif particulièrement adapté pour les images de grandes dimensions ou de poids élevé.

Par défaut, le navigateur va afficher une image au fur et à mesure qu'il la reçoit, ligne par ligne.

Avec l'affichage progressif, le navigateur affiche l'image par plusieurs passes successives qui apportent de plus en plus de précisions dans les détails. Le poids du fichier est un peu plus élevé mais le ressenti de l'utilisateur sera bien meilleur.

Attention : l'affichage progressif ne doit pas être utilisé avec des images de faibles dimensions (ie moins de 300/300 pixels)

Le format GIF (Graphics Interchange Format) a été créé par Compuserve. Il est indépendant des plates-formes et s'affiche aussi bien sur PC, Mac ou Linux/Unix. Il gère au maximum 256 couleurs et produit donc exlusivement des images en mode 8 bits avec une palette de couleurs indexées. L'extension des fichiers est .gif.

Les deux images ont la même taille (190 pixels / 279 pixels), mais le nombre de couleurs utilisées dans la palette n'est pas le même (256 ou 32). Le poids de la deuxième image est la moitié de celui de la première, pour une qualité pratiquement identique (sauf si on regarde entre les pieds du robot). Le temps de chargement de la deuxième image sera donc deux fois plus rapide, sans une perte de qualité vraiment notable.

Le format GIF permet les images entrelacées (dénomination de l'affichage progressif pour le gif). Le principe est un peu différent de celui utilisé par les autres formats, mais le résultat est intéressant pour les images de grandes dimensions.

On peut définir une couleur de transparence : une couleur parmi les 256 possibles est choisie pour ne pas être affichée. De cette façon l'image se fond dans son environnement. A toujours utiliser pour les icônes de navigation ou d'interface.

On peut contruire des animations : les gifs animés. Ils sont constitués d'une succession d'images gif toutes différentes, avec des durées d'affichage variables, stockées dans le même fichier.

Le format GIF utilise l'algorithme de compression LZW (propriété jusqu'en 2004 de Unisys). L'algorithme est plus ou moins bien adapté suivant la répartition des zones de couleur car il travaille sur la redondance d'informations sur une ligne, de la droite vers la gauche.

Le format JPEG (Joint Photographic Expert Group) produit des images en mode 24 bits (16 millions de couleurs) et permet donc une excellente reproduction des images avec beaucoup de couleurs et de nuances différentes (photos par exemple). Il est aussi très bien adapté pour les images de grande taille.
Par contre, il ne faut pas utiliser JPEG pour : les images de moins de 16 couleurs, les images de petite taille (moins de 100X100 pixels) ou les images déjà compressées en JPEG.
L'extension des fichiers est .jpg ou .jpeg.

Le format JPEG utilise une compression destructive. L'image est 'dégradée' car des couleurs peu différentes de pixels contigus sont remplacée par une seule et même couleur. L'algorithme JPEG découpe l'image en zones de couleurs proche et supprime des couleurs sont les nuances seraient peu perceptibles à l'oeil humain. Le taux de compression (ie le taux de suppression de couleurs) est défini lors de l'enregistrement de l'image dans ce format. Plus le taux de compression est élevé plus l'image est dégradée avec perte des détails, des contours et l'apparition de blocs de couleur identique. Les pertes sont irréversibles.

JPEG permet l'affichage progressif des images. Cette option se définit au moment de l'enregistrement du fichier.

JPEG ne gére pas de transparence de couleur ou de couche aplha.

Le format PNG (Portable Network Graphics) utilise une compression non destructive pour produire des images 8, 24, 32 ou 48 bits (deep color). PNG a été mis au point pour remplacer GIF qui n'était pas un format totalement libre jusqu'en 2004. C'est une est une spécification du W3C
L'extension des fichiers est .png.

PNG fait 2 passes pour compresser au mieux les images. La 1ère passe va pré-compresser les lignes de l'image avec le filtre jugé adéquat par PNG (5 filtres possibles). La 2eme passer va compresser à nouveau le résultat de la 1ère passe avec l'alogorithme LZ77.
Il existe une vidéo très intéressante sur dailymotion qui explique (en français) le fonctionnement de la compression gzip et des algorithmes LZ.

Pour tout ce qui est génération d'images en 8 bits, PNG est généralement supérieur à GIF, sauf pour l'animation qu'il ne gére pas.

Pour les images en mode RVB 24 bits, le poids des fichiers est plus important que ceux produits par JPEG, mais l'agorithme de compression n'est pas destructif.

PNG permet l'affichage progressif des images. Cette option se définit au moment de l'enregistrement du fichier.

En mode 8 bits, PNG gére une couleur transparente, comme GIF.

En mode 32 ou 48 bits PNG gère des couleurs translucides : on voit la couleur de fond derrière la couleur translucide qui peut avoir 256 niveau de transparence (de totalement opaque a complétement transparent). Ca permet de gérer par exemple des ombrages de façon très fine. On parle alors de mode RGBa (a pour couche alpha comme dans les claques photoshop) ou de transparence par couche alpha.

Dans la figure ci-dessus, 2 images sont affichées sur la même image image de fond.
L'image de gauche est une image 8 bits avec une couleur transparente (le blanc). L'affichage sur un fond uni très clair serait parfait, mais sur un fond composé, elle n'est pas utilisable.
L'image de droite est une image 32 bits avec une couche apha qui permet une transparence sur 256 niveaux (translucidité). Les zones translucides de l'image laissent apparaitre plus ou moins les détails de l'image de fond. On peut ainsi afficher des ombres qui en sont vraiment (sous les branches de lunettes par exemple), et on peut voir ce qui se trouve derrière les verres.
Cette qualité a bien sûr un prix : 1 octet de plus par pixel pour gérer le niveau de transparence de chacun des pixels de l'image.