Les images du Web : quels formats ?

Au Sommaire :

Notions et mots-clés
Les formats utilisés sur le Web
Tableau récapitulatif des usages
Comparatif des formats GIF, JPEG et PNG
Synthèse de l'article

Une quantité de sites individuels prônent les recommandations des standards du Web, en se référant généralement à des connaissances déjà existantes sur des sites collectifs, ci et là sur la toile ; raccommodant généralement les bénéfices pour l'accessibilité ou l'interopérabilité, grâce à l'association de XHTML (Extensible HyperText Markup Language) et CSS (Cascading Style Sheets), la plupart omettent de spécifier le média qui est incontestablement celui qui permettra une réelle optimisation de l'espace poids : l'image.

Il est aujourd'hui devenu impensable, que cela soit pour un webmestre, un client ou pour un chef de projet, de concevoir une « interface » de site Internet sans utiliser le média image. La restitution graphique de votre site est primordiale pour le visiteur, qui va pouvoir, en quelques secondes, se fixer des repères sur son organisation générale ; position du menu, du logo, et autres outils de navigation : il vaut mieux que cela soit étudié pour lui permettre d'accéder rapidement aux éléments que vous jugez principaux.

Le responsable de la réalisation du design se voit alors endosser de lourdes responsabilités : il doit respecter le cahier des charges qui lui a été confié, mais également proposer une interface claire, propre et accessible. Le choix du média image utilisé, ou plus précisément son format, va avoir une large influence quant au poids final de l'interface, et donc sur son temps de chargement dans le navigateur de l'utilisateur. Quel(s) format(s) choisir pour quel(s) besoin(s) ? Existe t'il un format dédié pour le Web ?

Notions et mots-clés

Les images numériques utilisées sur le Web sont des images matricielles, de type BitMap. Le terme BitMap signifie que l'image utilise un repère pour y stocker les données ; ces repères sont représentés par les points qui composent l'image. C'est le sujet du premier terme important.

La définition

Définition

La définition de l'image représente le nombre de points (de pixels) qu'elle contient ; c'est le rapport entre la largeur et la hauteur de l'image. Lorsque on multiplie ces deux valeurs, on obtient la définition.

La définition est annoncé dans le code XHTML (Extensible HyperText Markup Language) par les attributs width et height, mais ces valeurs ne sont pas nécessaires pour que les navigateurs puissent restituer l'image ; la plupart d'entre eux savent exploiter correctement le contenu des images (où la définition est spécifiée) en se passant des attributs XHTML. Néanmoins, le navigateur graphique va structurer plus rapidement la mise en page lorsque ces attributs sont spécifiés dans les balises <img />.

La définition est liée à la résolution de l'image, qui va représenter un nombre de pixels par unité de longueur. Elle va définir le niveau de détail de l'image : plus la valeur de résolution est élevée, meilleure est la qualité de l'image.

Dans l'exemple ci-contre, on admet qu'un carré représente un pixel de l'image. Dans cet exemple, l'image est composée de 8 pixels pour la largeur, et de 8 pixels pour la hauteur. Cela signifie que la définition est de 8 * 8 = 64, soit 64 pixels. Cette notation est sera compactée dans les articles en « 8 x 8 ». La notation px (Pixel) sera également utilisée pour désigner une définition ; par exemple 1024 x 768 pixels (1024 x 768).

Dimensionnement avec `width` et `height`

redimensionnement

Les navigateurs savent en grande majorité exploiter correctement le contenu des images, et la restituer selon la définition prévue. Avec les propriétés width et height, qui sont à l'origine prévues pour annoncer la définition de l'image, il est possible d'effectuer un dimensionnement « à la volée ».

Cette technique est malheureusement souvent mal exploitée : beaucoup de webmestre pensent encore aujourd'hui que redimensionner une image de cette manière leur permettra de réduire le poids de l'image.

En effet, affecter ces attributs en vue d'effectuer un dimensionnement n'a qu'un impact indirect sur l'image elle même ; c'est le moteur du navigateur qui effectue la modification, puis qui restitue (souvent tant bien que mal) l'image selon les valeurs spécifiées. En aucun cas le poids de l'image n'en sera affecté. Il vaut donc mieux effectuer un nouveau dimensionnement par logiciel, puis enregistrer l'image avec ces nouvelles valeurs :

Comparatif Image originale, réduite dans HTML et réduite par logiciel
Photo originale	Photo réduite dans HTML	Photo réduite par logiciel

Définition : 250 x 190 pixels	Définition : 250 x 190 pixels HTML : 150 x 114 pixels	Définition : 150 x 114 pixels
Poids : 7.38 Ko (7554 octets)	Poids : 7.38 Ko (7554 octets)	Poids : 3.64 Ko (3725 octets)

La qualité de l'image restituée avec les attributs width et height dépend directement du navigateur. C'est lui qui effectue la modification à la volée, grâce à son propre moteur, ou à l'aide de l'environnement sur lequel il est installé (linux, windows, etc.).

La profondeur

La profondeur de l'image représente indirectement la méthode d'enregistrement choisie pour le stockage des données (ou la méthode dite d'encodage). Elle est quantifiée en bits/pixel sur tous les formats images de type BitMap. Elle représente la valeur maximale que peut prendre un pixel dans l'image. En connaissant cette valeur, il sera aisé d'en déduire la méthode d'encodage. Il existe « trois grandes méthodes » de stockage, qui sont choisies efficacement lorsqu'elles le sont selon le contexte d'utilisation.

Encodage Paletted

L'encodage Paletted a été initialement utilisé par le format GIF (Graphics Interchange Format), puis repris par la suite par PNG (Portable Network Graphics) ; il représente une méthode de stockage par entrées. Il peut être nommé différemment selon le logiciel : indexed-color, pseudocolor, colormapped, palette-based. Cette méthode consiste à stocker une valeur fixe d'une couleur dans un entête, et à la restituer à l'endroit voulu dans la matrice rectangulaire de l'image. Cette valeur s'appelle une entrée : elle correspond à un numéro, associé à une couleur :

Encodage Paletted
Entête indexant les entrées	Image matricielle	Image restituée graphiquement
1: rgb(0,0,0) 2: rgb(255,255,255) 3: rgb(255,0,0) 4: rgb(0,255,0) 5: rgb(0,0,255)

Une image encodée au format Paletted peut contenir jusqu'à 256 entrées. Lorsqu'une image ne nécessite pas autant d'entrées (par exemple notre image qui n'en nécessite que 5), les formats images peuvent proposer des encodages par paliers variables de 1 à 8 bits/pixels selon le nombre de couleurs à stocker.

Encodage GrayScale

grayscale

Le format GrayScale est utilisé pour l'encodage des images en niveaux de gris, ou des images en noir et blanc. A l'instar du format Paletted, il possède lui aussi des paliers d'encodage, qui vont varier selon le même principe. La particularité du GrayScale va résider dans le codage de la couleur, quelque peu différente de Paletted.

La valeur de chaque pixel va en effet varier entre 0 et 255. La valeur 0 représentera la couleur noir pur, tandis que 255 représentera la couleur blanc pur. Ainsi, le logiciel exploitant l'image n'a pas à lire des entrées référencées, mais directement exploiter le contenu de l'image, où les valeurs sont spécifiées.

Encodage TrueColor

Lorsqu'une image doit disposer de plus de 256 couleurs pour être restituée, la méthode de stockage Paletted sera substituée à l'encodage TrueColor : la palette prendrait des proportions trop volumineuses en espace poids, et l'image serait plus ou moins dégradée (la dégradation variant selon le nombre de couleurs). L'encodage TrueColor peut également substituer à l'encodage Paletted, selon les caractéristiques de l'image, même si celle ci de moins de 100 couleurs par exemple. La méthode de stockage de TrueColor se révèle, dans certains cas, un meilleur compromis qualité/poids que Paletted.

Canaux RVB sur un pixel

Le format TrueColor va utiliser la même manière pour coder une couleur, à savoir un mélange entre le Rouge, le Vert, et le Bleu ; mais à l'inverse d'un Paletted, il ne va pas créer des entrées pour chaque couleur ; chaque pixel va disposer des trois canaux de couleurs (Rouge + Vert + Bleu), et la valeur va varier selon la couleur voulue. Dans l'exemple ci contre, pour obtenir la couleur souhaitée, j'ai fait varier la valeur de chaque canal. Le canal rouge a la valeur 78, le vert 40, et le bleu 210. Cette combinaison restitue une couleur proche du violet.

Chaque pixel va donc disposer des trois canaux RVB (Rouge Vert Bleu). Chaque canal peut prendre une valeur comprise entre 0 et 255 (soit 256 possibilités). Pour stocker ces 256 variables, il faut un espace de 8 bits de données. Comme chaque canal occupe 8 bits de données, et qu'il y'a trois canaux, cela signifie que chaque pixel dispose de 24 bits de données. Cette notation représente la profondeur d'une image TrueColor : 24 bits/pixel.

Les formats utilisés sur le Web

Parmi les centaines de formats images existants, trois d'entre eux se distinguent clairement du lot, et sont couramment utilisés : les formats JPEG (Joint Photographic Experts Group), PNG et GIF. Le format PNG, que je cesserais de recommander dans les situations où il excelle, a même été élevé au rang de format standard pour le Web par le W3C (World Wide Web Consortium). Néanmoins, il reste encore méconnu du grand public, à cause de sa réalisation relativement tardive par rapport aux deux autres ; je vais essayer de combler cette lacune en vous présentant toute son potentiel, au fil des paragraphes qui lui seront dédiés.

Malgré cette nomination favorisante, il ne peut pas encore être considéré comme une « référence » ; dans certaines situations, il sera plus avantageux d'étudier le choix du format, plutôt que de recourir aveuglément à PNG : il n'y a donc pas d'universalité pour un remède contre le poids des images ; le PNG pourra uniquement garantir l'interopérabilité sur de nombreux systèmes, comme le font déjà les deux autres formats.

Le format GIF

Le format GIF est incontestablement le format le plus utilisé sur le Web. Il est né de l'idée qu'un format image puisse circuler sur un réseau, sans qu'il véhicule un flux trop important de données. C'est d'ailleurs dans ce but qu'il est encore utilisé aujourd'hui, qu'il s'agisse de réseau d'entreprise, ou d'un réseau public, comme Internet.

Le format GIF a été initié par Unisys, et est aujourd'hui un format bien implémenter sur une grande majorité des systèmes d'exploitation. La société est encore détentrice du Brevet d'utilisation dans certains pays (aux Etats-Unis par exemple). En France, comme au Canada, en Italie, en Allemagne, au Japon ou au Royaume-Uni, ce brevet est désormais expiré. Il se base sur les mêmes principes qu'une image classique de type bitmap, à savoir une matrice rectangulaire composée de pixels. Les différences sont alors principalement visibles sur plusieurs facteurs qui influencent directement le poids final de l'image.

Le format GIF ne supporte qu'une méthode d'encodage, qui va lui permettre de considérablement réduire sa variable de couleurs. En effet, l'encodage Paletted va lui permettre d'enregistrer jusqu'à seulement 256 couleurs, qui vont être « logiciellement » choisies pour conserver efficacement son originalité ; si l'image ne nécessite pas autant de variables, la qualité de l'image n'en sera pas dégradée.

Outre le fait que la palette de couleurs soit destituée de nombreuses possibilités, le GIF applique également une méthode compression, basée sur LZW (Lempel-Ziv-Welch) ; il a été longtemps utilisé sur les modems normalisés v42. Elle permet de structurer les données de sorte à ce que le poids final en soit réduit.

Contrairement à ce que l'on peut penser, le GIF ne permet pas de rendre l'image transparente ; c'est une couleur présente dans sa palette de couleurs qui sera rendue transparente, pour que celle ci s'affiche pas, et ne filtre aucune donnée en arrière plan. Cela permet généralement de donner l'impression que l'image n'est plus contenue dans une matrice rectangulaire, et ainsi accroître la qualité d'insertion dans une interface.

La valeur de transparence nécessite 8 octets supplémentaires, autant ne pas s'en priver : souvenez vous que vous ne maîtrisez pas l'interface par défaut du navigateur de vos visiteurs. Dans cet exemple, l'image est identique à celle insérée précédemment, mis à part qu'elle est insérée sur un fond noir, et que la couleur #fff (blanc) est rendue transparente.

L'animation, ou le fait de jouer à intervalles et fréquences maîtrisables plusieurs images, est également dans les facultés du format GIF. L'utilisateur va alors pouvoir :

Contrôler le nombre d'images à jouer ;
La vitesse à laquelle elles sont jouées ;
La répétition éventuelle de la séquence.

Néanmoins, gardez à l'esprit que l'insertion d'une animation au format GIF n'est pas sans conséquences :

Les images animées sont généralement très lourdes, tant en poids que leur restitution sur l'interface ;
L'animation peut être considérée comme une publicité, et faire fuir le visiteur ;
Le contenu de l'image, qu'il soit textuel ou non, sera très difficilement descriptible.

Comment utiliser efficacement le format GIF ?

Le format GIF est un format qui se distingue très difficilement de PNG : dans une grande majorité des cas, convertir une image GIF en PNG permet d'obtenir un fichier d'une qualité visuelle identique, tout en bénéficiant d'une compression meilleure. Certaines images, dont la palette de couleurs ne contient que 2 entrées, sont cependant généralement moins lourdes lorsqu'elles sont enregistrées en GIF (cela n'est pas du à la compression elle même, mais à l'entête du format PNG, qui occupe quelques octets en plus). Ainsi, le format GIF prendra l'avantage sur les images décoratives à faible résolution, comme les puces, les flèches, ou un arrière plan répété par la propriété repeat de CSS. Dans les autres cas, il sera plus judicieux d'utiliser PNG.

Comparatif d'une icône de 2 couleurs
GIF	JPEG	PNG

Encodage Paletted	Encodage TrueColor	Encodage Paletted
Nombre de couleurs : 2	Nombre de couleurs : 58	Nombre de couleurs : 2
Profondeur : 1 bit/pixel	Profondeur : 24 bits/pixel	Profondeur : 1 bit/pixel
Définition : 9 x 7 pixels	Définition : 9 x 7 pixels	Définition : 9 x 7 pixels
Poids : 0.04 Ko (46 octets)	Poids : 0.34 Ko (344 octets)	Poids : 0.09 Ko (97 octets)

Le format JPEG

Le format JPEG est un format également très rependu, et également bien mieux intégré dans les systèmes d'exploitation. Il est apparu pour les mêmes besoins qui ont engendrés GIF, mais viendra avantageusement le remplacer dans certaines situations. Le JPEG a été institué par la « fusion de plusieurs groupes de professionnels de l'industrie de l'image », et initialement conçu par la société IBM (International Business Machines).

C'est une image de type bitmap à matrice rectangulaire, composée de blocs de pixels. Si GIF pourra effectivement convenir sur certains types d'images (celles disposants d'une petite résolution et de très peu de couleurs), il montrera rapidement ses limites sur des images de types photographies : ne supportant que l'encodage Paletted (256 couleurs), la qualité de restitution en sera peut être parfois largement affectée. Le JPEG pourra alors, dans ce cas, remplacer efficacement le format GIF.

Le format JPEG peut encoder l'image en TrueColor ou en GrayScale en appliquant un phénomène de « destruction de couleurs » ; des blocs de pixels sont encodés, optimisés et stockés dans le fichier image en question. Il résulte que l'image encodée est très difficilement réutilisable : un ré-enregistrement au même format pourra par exemple, à nouveau dégrader l'image.

C'est donc l'inconvénient majeur de ce format ou l'impossibilité de contrôler les dégradations déjà appliquées, ou de restituer une qualité identique à l'image originale. Il est néanmoins important de souligner que sur une large palette de couleurs, il surpasse la qualité de restitution de compression du format GIF.

Comment utiliser efficacement le format JPEG ?

Le format JPEG sera utilisé à bon escient sur des images de types photographies, une capture d'écran vidéo, et viendra avantageusement remplacer PNG sur un arrière plan à haute résolution, et au nombre de couleurs élevé. Il peut s'avérer efficace sur de larges bannières, ou des logos aux résolutions élevées. En guise d'indice, le format JPG peut être utilisé lorsque le format PNG restitue un poids qui semble excessif.

Comparatif d'une photographie en GIF, JPEG et PNG
GIF	JPEG	PNG

Encodage Paletted	Encodage TrueColor	Encodage TrueColor
Nombre de couleurs Image originale : 21885	Nombre de couleurs Image originale : 21885	Nombre de couleurs Image originale : 21885
Nombre de couleurs Image encodée : 256	Nombre de couleurs Image encodée : 23171	Nombre de couleurs Image encodée : 21885
Profondeur : 8 bits/pixel	Profondeur : 24 bits/pixel	Profondeur : 24 bits/pixel
Définition : 250 x 190 pixels	Définition : 250 x 190 pixels	Définition : 250 x 190 pixels
Poids : 16.55 Ko (16948 octets)	Poids : 7.38 Ko (7554 octets)	Poids : 53.3 Ko (54580 octets)

Le format PNG

Le format PNG (prononcez « ping ») est apparu dans les années 95 pour remplacer le format GIF, dont le brevet était (et est encore dans certains pays) détenu par Unisys. Ce format a été initialement conçu afin de remplir les mêmes objectifs que le format GIF, à savoir être utilisé sur un réseau, afin d'économiser les taux de transfert de données ; nous verrons également que les potentialités de ce format ont rapidement évoluées vers d'autres horizons, comme la retouche graphique.

Le format PNG a eu du mal à s'intégrer à cause de sa jeunesse, et du support d'abord partiel ou inexistant de la part des systèmes d'exploitation ou des navigateurs. Ce n'est qu'en 1997 que NetScape et Internet Explorer daigne inclure le support du format PNG. Aujourd'hui encore, presque 10 ans plus tard, son potentiel n'est que partiellement supporté par les navigateurs ; néanmoins, il a gagné une grande majorité d'éditeurs de logiciels, et a même été élevé au rang de « format standard pour le Web » par le W3C.

Fonctionnalités principales

Multi-formats pour tous types d'image : Malgré le fait qu'il soit initialement conçu pour remplacer GIF en utilisant une méthode similaire d'encodage, le PNG s'est diversifié en proposant trois « sous formats » : Paletted, GrayScale et TrueColor. Il a, de part ce fait, la propriété de stocker n'importe quel type d'image sans en dégrader la version originale.
Compression des données numériques : Le format PNG a la particularité d'être prédisposé à la compression de données ; en effet, une première étape avant la compression (l'étape filtering) permet une modification des données de l'image afin d'optimiser la compression. Sur des images particulièrement imposantes, ces filtres prouvent toute leur efficacité.
Opacité de l'image encodée : Au même titre que GIF, PNG admet une valeur alpha 0 à une entrée de la palette (ce qui rend une couleur totalement transparente) sur les images Paletted ou GrayScale. Il admet en plus une gamme de valeur d'opacité pouvant varier de 0 à 255 (256 possibilités).
Ajout d'un Canal Alpha : Dans les encodages GrayScale ou TrueColor, PNG peut disposer d'un canal alpha qui peut adopter deux fonctions : l'opacité sur 256 niveaux, et un support filtrage anti-aliasing (effet anti-escalier). Cette particularité unique permet une qualité de restitution exceptionnelle, et une facilité d'insertion quelque soit l'arrière plan.
Correction de l'affichage Gamma/correction couleurs : PNG peut stocker des informations destinés à des logiciels, puis au matériel : une information Gamma grâce à sa propriété gAMA (4 octets), ainsi qu'une correction de couleurs grâce à l'attribut cHRM. Lorsque un logiciel (un navigateur Web par exemple) va exploiter cette propriété, il va effectuer, grâce à son propre moteur, une correction Gamma ou une correction des couleurs sur l'image. Cela permet d'éviter d'obtenir une restitution plus ou moins sombre, et une restitution plus pâles des couleurs d'origine, selon le matériel, et le logiciel utilisé.
Un attribut d'arrière plan par défaut : Lorsque l'image n'a pas d'arrière plan, ou lorsque le canal alpha n'est pas correctement supporté par les navigateurs, une couleur d'arrière plan par défaut est affichée, restitué par le moteur du logiciel exploitant. Cela permet, par la même occasion, de résoudre un certain problème de transparence.
Un affichage progressif : L'affichage progressif (Interlacing) permet de restituer l'image durant son chargement dans le navigateur. A l'inverse du GIF, qui affiche dans un premier temps les pixels verticaux uniquement, le PNG admet l'affichage complet de l'image sous plusieurs paliers.

Tableau récapitulatif des usages

Tableau récapitulatif des usages des formats images
Usage	PNG	GIF	JPEG
Edition de l'image Enregistrement rapide	OUI	OUI	NON
Dégradation de l'image à l'enregistrement	NON	POSSIBLE	OUI
Image Web, TrueColor Pas de transparence	VERSATILE (selon l'image)	NON	OUI
Image Web, TrueColor Transparence	OUI	NON	NON
Image Web, Paletted Pas de transparence	OUI	OUI	NON
Image Web, Paletted Transparence	OUI	OUI	NON
Image Web, Paletted Transparence Alpha variable	OUI	NON	NON
Image Web, Paletted Animation	NON	OUI	NON
Image Web, TrueColor Photographies	NON	NON	OUI
Image Web, logos, icônes éléments décorations, dégradés	OUI	OUI	NON
Image Web, très faible résolution peu de couleurs	OUI	NON	OUI

Comparatif des formats GIF, JPEG et PNG

La série de tests qui suit permet d'essentiellement comparer les formats GIF, JPEG et PNG et les dégâts au niveau rendu ou au niveau du poids qu'ils peuvent infliger s'ils ne sont pas utilisés correctement.

Test n°1 : L'image comporte 2 couleurs

Commentaire : La qualité de restitution des trois images est méconnaissable. PNG utilise l'encodage GrayScale pour la couleur noir+blanc, et obtient un poids impressionnant. (Le poids du PNG est 10 fois inférieur à GIF).

Comparatif d'une image de 2 couleurs en GIF, JPEG et PNG
GIF	JPEG	PNG

Encodage Paletted	Encodage TrueColor	Encodage GrayScale
Nombre de couleurs : 2	Nombre de couleurs : 64	Nombre de couleurs : 2
Profondeur : 1 bit/pixel	Profondeur : 24 bits/pixel	Profondeur : 1 bit/pixel
Définition : 123 x 258 pixels	Définition : 123 x 258 pixels	Définition : 123 x 258 pixels
Poids : 1.22 Ko (1247 octets)	Poids : 8.33 Ko (8528 octets)	Poids : 0.12 Ko (123 octets)

Test n°2 : L'image comporte 4 couleurs

Commentaire : Le format JPEG montre ses premiers signes de faiblesse : l'image se détériore en qualité de restitution. PNG utilise l'encodage Paletted, et conserve son avance sur GIF. (Le poids du PNG est 7 fois inférieur à GIF).

Comparatif d'une image de 4 couleurs en GIF, JPEG et PNG
GIF	JPEG	PNG

Encodage Paletted	Encodage TrueColor	Encodage Paletted
Nombre de couleurs : 4	Nombre de couleurs : 253	Nombre de couleurs : 4
Profondeur : 2 bits/pixels	Profondeur : 24 bits/pixel	Profondeur : 2 bits/pixel
Définition : 123 x 258 pixels	Définition : 123 x 258 pixels	Définition : 123 x 258 pixels
Poids : 1.3 Ko (1329 octets)	Poids : 8.34 Ko (8543 octets)	Poids : 0.18 Ko (183 octets)

Test n°3 : L'image comporte 8 couleurs

Commentaire : Le poids du format JPEG reste stable, et ne fera qu'augmenter que légèrement au fur et à mesure que le nombre de couleurs va augmenter. PNG conserve son avance sur GIF. (Le poids du PNG est 6 fois inférieur à GIF).

Comparatif d'une image de 8 couleurs en GIF, JPEG et PNG
GIF	JPEG	PNG

Encodage Paletted	Encodage TrueColor	Encodage Paletted
Nombre de couleurs : 8	Nombre de couleurs : 1098	Nombre de couleurs : 8
Profondeur : 3 bits/pixel	Profondeur : 24 bits/pixel	Profondeur : 4 bits/pixel
Définition : 123 x 258 pixels	Définition : 123 x 258 pixels	Définition : 123 x 258 pixels
Poids : 1.49 Ko (1524 octets)	Poids : 8.42 Ko (8623 octets)	Poids : 0.23 Ko (238 octets)

Test n°4 : L'image comporte 16 couleurs

Commentaire : Le format GIF passe le pallier des 4 bits/pixel. Le poids du fichier augmente, et de part ce fait, PNG conserve une longueur d'avance. (Le poids du PNG est 6 fois inférieur à GIF).

Comparatif d'une image de 16 couleurs en GIF, JPEG et PNG
GIF	JPEG	PNG

Encodage Paletted	Encodage TrueColor	Encodage Paletted
Nombre de couleurs : 16	Nombre de couleurs : 2050	Nombre de couleurs : 16
Profondeur : 4 bits/pixel	Profondeur : 24 bits/pixel	Profondeur : 4 bits/pixel
Définition : 123 x 258 pixels	Définition : 123 x 258 pixels	Définition : 123 x 258 pixels
Poids : 1.85 Ko (1899 octets)	Poids : 8.49 Ko (8695 octets)	Poids : 0.3 Ko (306 octets)

Test n°5 : L'image comporte 32 couleurs

Commentaire : PNG propose une palette d'édition de 8 bits/pixel, soit un potentiel de stockage de 256 couleurs. GIF propose une palette de 32 couleurs seulement, et reste tout de même plus volumineux. (Le poids du PNG est 6 fois inférieur à GIF).

Comparatif d'une image de 32 couleurs en GIF, JPEG et PNG
GIF	JPEG	PNG

Encodage Paletted	Encodage TrueColor	Encodage Paletted
Nombre de couleurs : 32	Nombre de couleurs : 4865	Nombre de couleurs : 32
Profondeur : 5 bits/pixel	Profondeur : 24 bits/pixel	Profondeur : 8 bits/pixel
Définition : 123 x 258 pixels	Définition : 123 x 258 pixels	Définition : 123 x 258 pixels
Poids : 2.6 Ko (2663 octets)	Poids : 8.8 Ko (9012 octets)	Poids : 0.41 Ko (424 octets)

Test n°6 : L'image comporte 64 couleurs

Commentaire : Le poids du format GIF augmente excessivement par rapport au PNG. Le format JPEG quant à lui duplique un nombre important de couleurs dans l'image. (Le poids du PNG est 7.5 fois inférieur à GIF).

Comparatif d'une image de 64 couleurs en GIF, JPEG et PNG
GIF	JPEG	PNG

Encodage Paletted	Encodage TrueColor	Encodage Paletted
Nombre de couleurs : 64	Nombre de couleurs : 10510	Nombre de couleurs : 64
Profondeur : 6 bits/pixel	Profondeur : 24 bits/pixel	Profondeur : 8 bits/pixel
Définition : 123 x 258 pixels	Définition : 123 x 258 pixels	Définition : 123 x 258 pixels
Poids : 4.16 Ko (4259 octets)	Poids : 9.08 Ko (9293 octets)	Poids : 0.58 Ko (598 octets)

Test n°7 : L'image comporte 128 couleurs

Commentaire : Même constatation (Le poids du PNG est 7.5 fois inférieur à GIF).

Comparatif d'une image de 128 couleurs en GIF, JPEG et PNG
GIF	JPEG	PNG

Encodage Paletted	Encodage TrueColor	Encodage Paletted
Nombre de couleurs : 128	Nombre de couleurs : 21846	Nombre de couleurs : 128
Profondeur : 7 bits/pixel	Profondeur : 24 bits/pixel	Profondeur : 8 bits/pixel
Définition : 123 x 258 pixels	Définition : 123 x 258 pixels	Définition : 123 x 258 pixels
Poids : 7.02 Ko (7185 octets)	Poids : 9.07 Ko (9284 octets)	Poids : 0.93 Ko (950 octets)

Test n°8 : L'image comporte 256 couleurs

Commentaire : Voici le nombre de couleurs que l'on trouve sur une majorité des captures d'écran sur le Web. (Le poids du PNG est 8 fois inférieur à GIF).

Comparatif d'une image de 256 couleurs en GIF, JPEG et PNG
GIF	JPEG	PNG

Encodage Paletted	Encodage TrueColor	Encodage Paletted
Nombre de couleurs : 256	Nombre de couleurs : 44 269	Nombre de couleurs : 256
Profondeur : 8 bits/pixel	Profondeur : 24 bits/pixel	Profondeur : 8 bits/pixel
Définition : 241 x 256 pixels	Définition : 241 x 256 pixels	Définition : 241 x 256 pixels
Poids : 14.31 Ko (14 649 octets)	Poids : 16.97 Ko (17 374 octets)	Poids : 1.74 Ko (1783 octets)

Test n°9 : L'image comporte 1788 couleurs

Commentaire : L'étape filtering montre ici un avantage. En encodant l'image d'une manière « intelligente » et non linéaire, PNG permet de conserver l'intégralité des couleurs et un taux de compression supérieur aux deux autres formats. (Le poids du PNG est 7 fois inférieur à GIF, et sans dégradations)

Comparatif d'une image de plus de 1500 couleurs en GIF, JPEG et PNG
GIF	JPEG	PNG

Encodage Paletted	Encodage TrueColor	Encodage TrueColor
Nombre de couleurs : 256	Nombre de couleurs : 22 904	Nombre de couleurs : 1788
Dégradations : Oui	Dégradations : Oui	Dégradations : Non
Profondeur : 8 bits/pixel	Profondeur : 24 bits/pixel	Profondeur : 24 bits/pixel
Définition : 175 x 187 pixels	Définition : 175 x 187 pixels	Définition : 175 x 187 pixels
Poids : 9.68 Ko (9910 octets)	Poids : 2.53 Ko (2593 octets)	Poids : 1.37 Ko (1403 octets)

Test n°10 : L'image comporte 255 couleurs

Commentaire : L'étape filtering est fortement exploitée pour démontrer son potentiel. En encodant l'image de cette manière, PNG permet de conserver l'intégralité des couleurs et un taux de compression impressionnant. (Le poids du PNG est 22 fois inférieur à GIF)

Comparatif d'une image 255 couleurs en GIF, JPEG et PNG
GIF	JPEG	PNG

Encodage Paletted	Encodage TrueColor	Encodage TrueColor
Nombre de couleurs : 255	Nombre de couleurs : 255	Nombre de couleurs : 255
Profondeur : 8 bits/pixel	Profondeur : 24 bits/pixel	Profondeur : 24 bits/pixel
Définition : 255 x 453 pixels	Définition : 255 x 453 pixels	Définition : 255 x 453 pixels
Poids : 21.2 Ko (21 708 octets)	Poids : 5.88 Ko (6026 octets)	Poids : 0.95 Ko (972 octets)

Test n°11 : Une capture d'écran simple

Commentaire : Ce test, et principalement le suivant, vise à démontrer que le format JPEG n'est clairement pas adapté pour les captures d'écran. (Le poids du PNG est 8.5 fois inférieur à JPEG, et sans dégradations)

Comparatif d'une capture d'écran simple en GIF, JPEG et PNG
GIF	JPEG	PNG

Encodage Paletted	Encodage TrueColor	Encodage Paletted
Nombre de couleurs : 6	Nombre de couleurs : 2065	Nombre de couleurs : 6
Profondeur : 8 bits/pixel	Profondeur : 24 bits/pixel	Profondeur : 8 bits/pixel
Définition : 250 x 237 pixels	Définition : 250 x 237 pixels	Définition : 250 x 237 pixels
Poids : 1.17 Ko (1197 octets)	Poids : 3.41 Ko (3488 octets)	Poids : 0.38 Ko (393 octets)

Test n°12 : Une capture d'écran textuelle

Commentaire : Du texte a été ajouté. PNG et GIF arrive à conserver un bon taux de compression, tandis que le format JPEG est clairement inadapté. (Le poids du PNG est 33 fois inférieur à JPEG, et sans dégradations)

Comparatif d'une capture d'écran textuelle en GIF, JPEG et PNG
GIF	JPEG	PNG

Encodage Paletted	Encodage TrueColor	Encodage Paletted
Nombre de couleurs : 6	Nombre de couleurs : 3218	Nombre de couleurs : 6
Profondeur : 3 bits/pixel	Profondeur : 24 bits/pixel	Profondeur : 4 bits/pixel
Définition : 250 x 237 pixels	Définition : 250 x 237 pixels	Définition : 250 x 237 pixels
Poids : 3.33 Ko (3408 octets)	Poids : 21.03 Ko (21 536 octets)	Poids : 0.62 Ko (635 octets)

Test n°13 : Une capture de 533 couleurs

Commentaire : GIF arrive à conserver une qualité de restitution acceptable, malgré le fait incontestable qu'elle soit dégradée (256 couleurs au lieu de 533). (Le poids du PNG est 7 fois inférieur à GIF, et sans dégradations)

Comparatif d'une capture de 533 couleurs en GIF, JPEG et PNG
GIF	JPEG	PNG

Encodage Paletted	Encodage TrueColor	Encodage TrueColor
Nombre de couleurs : 256	Nombre de couleurs : 10 393	Nombre de couleurs : 533
Dégradations : Oui	Dégradations : Oui	Dégradations : Non
Profondeur : 8 bits/pixel	Profondeur : 24 bits/pixel	Profondeur : 24 bits/pixel
Définition : 250 x 237 pixels	Définition : 250 x 237 pixels	Définition : 250 x 237 pixels
Poids : 8.42 Ko (8618 octets)	Poids : 6.48 Ko (6633 octets)	Poids : 1.15 Ko (1181 octets)

Test n°14 : Transparence et qualité

Commentaire : Le poids du PNG n'est ici pas comparable (même s'il est plus lourd), car les deux fichiers ne sont pas encodés de la même manière. L'on constate ici le potentiel du Canal Alpha du format PNG, tandis que GIF restitue un effet aliasing important, et pas particulièrement esthétique. Le fichier PNG s'intègre parfaitement sur n'importe quel type d'arrière plan (fond à couleur uni, arrière plan complexe, etc.). Notez que le PNG ne sera pas restitué correctement sur certains navigateurs.

Comparatif des transparences en GIF, JPEG et PNG
GIF	JPEG	PNG



Encodage Paletted	Encodage TrueColor	Encodage TrueColor
Nombre de couleurs : 256	Nombre de couleurs : 6538	Nombre de couleurs : 3318
Dégradations : Oui	Dégradations : Oui	Dégradations : Non
Transparence : alpha 0	Transparence : aucune	Transparence : Canal Alpha
Profondeur : 8 bits/pixel	Profondeur : 24 bits/pixel	Profondeur : 24 bits/pixel
Définition : 128 x 128 pixels	Définition : 128 x 128 pixels	Définition : 128 x 128 pixels
Poids : 6.96 Ko (7131 octets)	Poids : 5.28 Ko (5407 octets)	Poids : 16.29 Ko (16683 octets)

Test n°15 : Compression (1/3)

Commentaire : PNG va démontrer son potentiel dans les 3 prochains tests. Dans celui ci, il montre son potentiel de compression sur une image de 256 couleurs, en résolution élevée (800 x 849 pixels). (Le poids du PNG est 15 fois inférieur à GIF)

Compression en GIF, JPEG et PNG | PNG/GIF : 62,59 Ko (64 101 octets)
GIF	JPEG	PNG

Encodage Paletted	Encodage TrueColor	Encodage Paletted
Nombre de couleurs : 256	Nombre de couleurs : 30 611	Nombre de couleurs : 256
Profondeur : 8 bits/pixel	Profondeur : 24 bits/pixel	Profondeur : 8 bits/pixel
Définition : 800 x 849 pixels HTML : 240 x 240	Définition : 800 x 849 pixels HTML : 240 x 240	Définition : 800 x 849 pixels HTML : 240 x 240
Poids : 66.78 Ko (68 385 octets)	Poids : 53.1 Ko (54377 octets)	Poids : 4.18 Ko (4284 octets)

Test n°16 : Compression (2/3)

Commentaire : Exploitation importante de filtering sur une image en haute résolution, disposant à l'origine de 1023 couleurs. Le PNG est très distinctivement avantageux. (Le poids du PNG est 88 fois inférieur à GIF, et sans dégradations)

Compression en GIF, JPEG et PNG | PNG/GIF : 297,6 Ko (304 751 octets)
GIF	JPEG	PNG

Encodage Paletted	Encodage TrueColor	Encodage TrueColor
Nombre de couleurs : 256	Nombre de couleurs : 846	Nombre de couleurs : 1023
Dégradations : Oui	Dégradations : Oui	Dégradations : Non
Profondeur : 8 bits/pixel	Profondeur : 24 bits/pixel	Profondeur : 24 bits/pixel
Définition : 1024 x 775 pixels HTML : 240 x 240	Définition : 1024 x 775 pixels HTML : 240 x 240	Définition : 1024 x 775 pixels HTML : 240 x 240
Poids : 301.02 Ko (308 246 octets)	Poids : 21.62 Ko (22 139 octets)	Poids : 3.41 Ko (3495 octets)

Test n°17 : Compression (3/3)

Commentaire : Exploitation maximale du filtering sur une image disposant des 16 millions de variables pouvant être encodées dans une image TrueColor. Le format GIF est bien évidemment hors course à cause du stockage limité du nombre de couleurs, et parvient tout de même à créer un fichier 11 fois plus lourd (Le poids du PNG est 11 fois inférieur à GIF, et sans dégradations)

Compression en GIF, JPEG et PNG | PNG/GIF : 923,41 Ko (945 582 octets)
GIF	JPEG	PNG

Encodage Paletted	Encodage TrueColor	Encodage TrueColor
Nombre de couleurs : 256	Nombre de couleurs : 2 642 167	Nombre de couleurs : 16 777 216
Dégradations : Oui	Dégradations : Oui	Dégradations : Non
Profondeur : 8 bits/pixel	Profondeur : 24 bits/pixel	Profondeur : 24 bits/pixel
Définition : 512 x 32 768 pixels HTML : 199 x 100	Définition : 512 x 32 768 pixels HTML : 199 x 100	Définition : 512 x 32 768 pixels HTML : 199 x 100
Poids : 1012.77 Ko (1 037 077 octets)	Poids : 373.58 Ko (382 551 octets)	Poids : 89.35 Ko (91 495 octets)

Synthèse de l'article

En synthèse :

Trois grands formats images sont couramment utilisés sur le Web : JPEG, GIF et PNG. Il convient de choisir le format qui s'ajuste le mieux, selon la situation. Dans une grande majorité des cas, le format PNG sera très avantageux ; cependant, il ne devrait pas être utilisé d'une manière exlusive ! Etudier le choix du format vous permettra d'économiser un espace poids conséquent, et du temps de chargement pour vos visiteurs.
Il existe trois encodages : TrueColor, utilisé pour les images de plus de 256 couleurs, et certaines images avec dégradés de couleurs. Paletted, qui propose 256 couleurs au maximum, utilisé pour le Web, pour les captures d'écran, logos simples, images décoratives. GrayScale, qui propose le stockage des couleurs en noir et blanc, et niveau de gris.
Evitez d'utiliser les attributs width et height pour réduire la définition de vos images : cette méthode ne réduit en aucun cas le poids du fichier. Préférez effectuer une édition logicielle de l'image, et annoncer les valeurs vraies de l'image. Un navigateur graphique structure plus rapidement la page lorsque ces attributs sont renseignés.

Si vous avez une remarque, une critique constructive, un quelconque point à éclaircir ou enrichir, que vous avez trouvé une erreur, une faute, vous pouvez me contacter à cette adresse.