CSS-IG.net Use The Ping!

Présentation du format PNG

PNG est un format image méconnu, au profit des formats les plus présents sur le Web, à savoir le GIF (Graphics Interchange Format) et le JPEG (Joint Photographic Experts Group). Malgré le fait qu'il est était élevé au rang de format standard par le W3C (World Wide Web Consortium), les réflexes ont la vie dure et les divers retours des utilisateurs sont également la cause de son retard : beaucoup se plaignent des problèmes de transparence du format, et d'autres d'un poids prohibitif par rapport à GIF.

Avec cet article, j'espère avant tout vous donner une autre opinion de ce format, et de démontrer que sa mauvaise réputation est dans la plupart des cas due à un mauvais usage de la part de l'utilisateur. Il existe en effet des solutions propre à son format pour déjouer les problèmes de transparence (sans utiliser JavaScript, ou autre ressource), et également des explications concernant un éventuel poids excessif selon le contexte d'utilisation.

Les formats PNG

L'abréviation PNG signifie Portable Network Graphics, et se prononce « ping ». C'est un format de fichier informatique conçu pour stocker, transmettre et restituer des données numériques au format image. Très souvent comparé au format GIF, notamment parce qu'il a été conçu dans la même optique, le format PNG admet en lui même plusieurs sous formats qui peuvent rendre des résultats versatiles selon les utilisations.

A l'inverse du format GIF qui ne propose qu'une seule méthode de stockage pour tous les types d'image, le format PNG propose quant à lui 5 formats parmi 3 grandes familles. Les logiciels qui enregistrent l'image au format PNG le font généralement selon l'image. Ces 5 formats sont différenciés par l'attribut ColorType, dont la valeur est stockée dans l'entête du PNG :

• 0 : GrayScale, l'encodage des images en noir et blanc, et niveau de gris ;
• 2 : RGB (Red Green Blue), l'encodage des images TrueColor, disposant de plus de 256 couleurs ;
• 3 : Paletted, adapté aux images du web, pour les images de 256 couleurs, ou moins ;
• 4 : GrayScale+alpha, pour une insertion de qualité des images noir et blanc ;
• 6 : RGB+alpha, pour une insertion de qualité des images TrueColor.

Le PNG Paletted

Le PNG Paletted est identifié par l'attribut ColorType: 3. Il utilise l'encodage Paletted pour structurer les données de l'image dans sa matrice de restitution. De la même manière que GIF, PNG propose un encodage par paliers, selon le nombre de couleurs à référencer. Ces paliers sont clairement définis, à savoir 1 bit/pixel, 2 bits/pixels, 4 bits/pixel et 8 bits/pixel. L'encodage Paletted permet de stocker de 1 à 256 couleurs au maximum.

La vulgarisation logicielle a fait que le PNG Paletted souvent nommé « PNG8 » ; la valeur 8 représente en fait la profondeur de l'image (en bits/pixel). Cette nomination n'a rien d'officielle ; aussi peut on raisonnablement penser que certains logiciels peuvent donner l'appellation PNG4, PNG2 et ou PNG1, pour des images dont la profondeur est moindre. Ne soyez pas surpris si vous les rencontrez.

De manière comparable au format GIF, le PNG Paletted dispose d'une palette de couleurs associée à des nombres. Le formatage de ces références, que l'on nomme des entrées, sont d'ailleurs identiques au GIF :

1: rgb ( 128, 50 , 60 )

2: rgb ( 0 , 90 , 140 )

3: rgb ( 40 , 80 , 126 )

Le PNG TrueColor

Le PNG TrueColor est identifié par l'attribut ColorType: 2. Il va représenter les images dont le nombre de couleurs sera supérieur à 256. La méthode de stockage TrueColor substitue à la méthode de stockage Paletted, car lorsque les entrées dépassent les 256 couleurs, la palette devient trop volumineuse. Les images TrueColor disposent des trois canaux RVB de 8 bits chacun, et les valeurs varient sur les pixels ; on a donc 24 bits/pixel (nommé parfois « PNG24 »).

A l'inverse du PNG Paletted, qui disposera d'une palette fixe, le PNG TrueColor va disposer d'un potentiel d'édition maximal. En effet, lorsque vous éditerez un PNG Paletted, vous ne pourrez pas disposer d'une palette complète ; rajouter ou modifier une couleur ne sera pas par forcément possible (cela dépend essentiellement du logiciel).

Le PNG TrueColor + canal alpha

Le PNG TrueColor est identifié par l'attribut ColorType: 6. Il s'agit du TrueColor, auquel est rajouté un Canal Alpha.

Le canal alpha est un canal supplémentaire que l'on ajoute à un PNG GrayScale ou un PNG TrueColor. Il s'agit essentiellement d'un filtre qui propose une insertion maîtrisée de l'image dans n'importe quel environnement Web :

Une fonction anti-aliasing qui va pouvoir garantir une transparence maîtrisée au pixel près, supprimant les effets escaliers des pixels, ou les pixels trop clairs ;

Une fonction de translucidité qui va pouvoir restituer une valeur alpha comprise entre 0 et 255 en laissant partiellement apparaître l'arrière plan.

Le canal alpha est un canal indépendant, qui stocke la même valeur que le canal Rouge, Vert ou Bleu : une valeur qui varie de 0 à 255. Il occupe donc le même espace poids, soit 8 bits supplémentaires par pixel. Un PNG TrueColor+alpha dispose donc d'une profondeur de 32 bits/pixel (« PNG32 »).

Le PNG GrayScale

Le PNG GrayScale est identifié par l'attribut ColorType: 0. Il utilise l'encodage GrayScale pour structurer les données ; cette méthode consiste à faire varier les valeurs de chaque pixel de 0 à 255. Cela permet une meilleure méthode de stockage que Paletted pour les images en noir et blanc, et les images en niveaux de gris. Le format GrayScale n'est pas supporté par GIF, et est stocké par les mêmes niveaux de paliers qu'un PNG Paletted : 1 bit/pixel, 2 bits/pixels, 4 bits/pixel et 8 bits/pixel.

Le PNG GrayScale + canal alpha

Le PNG GrayScale+alpha est identifié par l'attribut ColorType: 4. Il permet d'ajouter un Canal Alpha (8 bits) à l'image GrayScale, afin d'appliquer les mêmes fonctions déjà décrites pour le TrueColor : anti-aliasing, et une translucidité sur 256 niveaux. De la même manière que pour un TrueColor+alpha, le PNG GrayScale+alpha se voit rajouter 8 bits de données par pixel. Il en résulte qu'il dispose d'une profondeur de 16 bits/pixel (« PNG16 »).

Quel formats pour mes images ?

Autant dire clairement les choses : selon le contenu de l'image, certains de ces formats ne seront pas adaptés pour le Web ; de la même manière, pour comparer efficacement un autre format à un PNG, il faut s'assurer que le fichier PNG ait été encodé de la même manière (un fichier GIF devrait être comparé à un PNG Paletted, et pas un PNG TrueColor par exemple).

Si une grande majorité des logiciels encodent généralement de manière « logique » (à savoir selon le nombre de couleurs), il est tout de même préférable d'optimiser l'image selon l'environnement dans lequel elle va être intégrée. Pour l'utiliser sur une page Web, il sera on ne peut plus conseillé d'utiliser le format Paletted pour une grande majorité d'entre elles, notamment lorsque les dégradations visuelles dues à la conversion sont négligeables :

Comparatif : PNG TrueColor - PNG Paletted

PNG TrueColor	PNG Paletted
Définition : 250 x 190 pixels	Définition : 250 x 190 pixels
Profondeur : 24 bits/pixel	Profondeur : 8 bits/pixel
Nombre de couleurs : 2807	Nombre de couleurs : 254
Compression : Très forte, filtrée	Compression : Très forte, filtrée
Poids : 10.07 Ko (10314 octets)	Poids : 3.81 Ko (3898 octets)

Quels sont les avantages de PNG ?

Le format PNG dispose à l'heure actuelle d'un fort potentiel et de nombreuses caractéristiques qui lui permettent de convenir (voire de substituer à d'autres formats) dans une grande majorité de situations. Dans cette partie de l'article, vous allez découvrir ou redécouvrir quelles sont les fonctionnalités qui lui permit d'être recommandé par le W3C.

Un potentiel d'édition

Le format PNG se distingue des formats GIF et JPEG par son fort potentiel d'édition. En effet, il propose une matrice TrueColor, qui admet le stockage des 16 millions de couleurs disponibles. Cette même matrice est basée sur une méthode de stockage non destructrice, c'est à dire qu'au niveau de l'enregistrement, les couleurs ne sont pas modifiées par l'encodeur : on peut enregistrer, et réenregistrer rapidement et simplement sur la même matrice sans dégradations.

A ce titre, le format GIF lui, ne conservera qu'un maximum 256 couleurs dans sa palette, et détruira des couleurs si le quota est dépassé ; il dispose néanmoins, comme PNG, d'une matrice non destructrice : on peut à souhait enregistrer ou réenregistrer l'image sans aucune dégradations. Enfin le format JPEG pourra stocker comme PNG 16 millions de couleurs, mais chaque enregistrement provoque une perte de qualité significative : il repose sur une matrice destructrice de couleurs.

Canal Alpha : qualité d'insertion

Le Canal Alpha fait disposer au format PNG une avance très significative sur les autres formats images. Sur les navigateurs alternatifs tels FireFox ou Opera, son support fut presque immédiat ; pour Internet Explorer, il a fallu attendre la 7eme génération pour que le canal alpha soit (enfin) totalement supporté.

Le Canal Alpha propose divers niveaux de translucidité et de filtrage de données ; cette particularité permet à une image PNG de s'intégrer parfaitement à un environnement quelconque (arrière plan à couleurs pleines, arrière plan complexe etc.). Il admet un filtrage anti-aliasing (effet anti-escalier des pixels) de l'image ; l'impression restituée est généralement de très haute qualité, et parfaitement adaptée sur n'importe quel support.

Le canal alpha illustré

GIF Transparent	Anti-aliasing	Translucidité

Compression et filtrage

PNG supporte plusieurs types de méthodes de stockage, ce qui permet au logiciel de disposer de plusieurs méthodes d'enregistrement ; il choisira la méthode adaptée à l'image (ce n'est pas l'image qui s'adapte aux contraintes du format). Il dispose d'une matrice non destructrice, ce qui permet et édition, ou réédition rapide sans dégradations des couleurs.

De la plupart des moteurs de compression existants, le format PNG se révèle être un des plus performants. La méthode d'archivage du PNG est nommé deflate, basée sur le même principe que gzip, ou PKZIP ; à son niveau de compression standard (au même niveau que GIF), la durée de l'archivage est similaire.

L'étape filtering

Le réel avantage du format PNG sont ses diverses filtres qu'il peut utiliser pour transformer les données de l'image, avant même d'appliquer son phénomène de compression. L'étape de filtrage permet de transformer les données, afin d'optimiser le poids final du fichier ; ces phénomènes de filtrage ne seront pas décrit explicitement ici, mais en voici un aperçu vulgarisé :

rgb ( 128 , 128 , 128) ;
rgb ( 129 , 129 , 129) ;
rgb ( 130 , 130 , 130) ;
rgb ( 131 , 131 , 131) ;
rgb ( 132 , 132 , 132) ;
rgb ( 133 , 133 , 133) ;

Ici l'image représente un dégradé de gris, qui pourra être utilisé pour un arrière plan par exemple. Lorsque un filtre est appliqué avant la compression, il va ainsi modifier les données :

rgb ( 128 , 128 , 128) ;
+1 x 5 ;

Le filtre va ainsi compacter les données, qui seront bien évidement décompacter lors de la restitution du PNG. Ainsi, il demande de rajouter la valeur +1 sur chaque pixel suivante durant 5 pixels. Ce procédé de filtrage va être très effectif sur les images de type dégradés de gris, ou de couleurs.

GIF, Compression PNG et filtrage

GIF	PNG	PNG filtré
Définition : 255 x 453 pixels	Définition : 255 x 453 pixels	Définition : 255 x 453 pixels
Profondeur : 8 bits/pixel	Profondeur : 24 bits/pixel	Profondeur : 24 bits/pixel
Poids : 21.2 Ko (21708 octets)	Poids : 3.18 Ko (3254 octets)	Poids : 0.95 Ko (972 octets)

Correction Gamma, Couleurs

PNG peut stocker des informations dans son entête concernant une éventuelle correction gamma, représentée par l'attribut gAMA, et une correction concernant la valeur des canaux RVB, représenté par cHRM. Ces corrections Gamma et Couleurs ne sont pas appliquées sur le PNG pendant l'encodage, mais justement pendant le décodage ; c'est le logiciel qui va exploiter le PNG qui va effectuer la modification, selon le matériel de l'utilisateur.

Un retour particulièrement significatif est celui rencontré par les utilisateurs d'ordinateurs Macintosh : une image conçue sur un PC (Personal Computer) peut être restituée avec des nuances claires et sombres différentes sur un Macintosh ; il arrive même que certaines images PC soient mal restituées sur PC ! Cette constatation s'applique principalement selon le type d'écran qui est utilisé.

L'attribut gAMA du PNG permet d'apporter un début de solution à ce problème ; cet attribut n'opère pas une modification physique sur la matrice de l'image : c'est une modulation apportée par le logiciel qui exploite PNG, puis par le matériel. Lors de l'analyse de l'image par le navigateur (notez que ce dernier doit supporter cette fonctionnalité), il va pouvoir extraire le contenu des données gAMA et cHRM afin de modifier l'affichage de l'image à la volée. Selon les valeurs spécifiées, le PNG pourra être restitué de manière « adapté » aux différents matériels.

GIF, Compression PNG et filtrage

Image PNG	Valeur gAMA modifiée	Valeurs cHRM modifiées

Entralecement (affichage progressif)

Au même titre que GIF, PNG supporte la fonction « interlacing », ou entrelacement. Un PNG encodé de cette manière permet d'être restitué par résolution progressive durant le chargement du PNG (l'affichage est proportionnel aux nombres de bits chargés). Le principe étant de restituer les données dès que le navigateur a commencé à charger le fichier.

Par défaut, PNG propose l'entrelacement de type 0, qui permet de restituer l'image de manière classique, de bas à droite de haut en bas. L'entrelacement de type 1 (également nommé Adam7), permet de coder les données selon un principe défini, afin que l'image puisse être progressivement affichée : ce codage nécessite un espace poids supérieur à une image PNG non entrelacée.

Mais tandis que le format GIF propose un entrelacement par un pré-affichage horizontal, PNG restitue d'emblée l'intégrité du fichier et accroît la résolution selon 7 passes, contre 4 pour le GIF. Cela donne l'impression à l'utilisateur que le fichier est plus rapidement chargé (même si c'est généralement le cas, car le PNG sera généralement moins lourd).

GIF entrelacé et PNG entrelacé

Image GIF	Image PNG

Les limites du PNG

Si on peut retenir quelque chose d'important concernant cette introduction au format PNG, c'est qu'il possède plusieurs formats d'encodage, d'où résultats qui peuvent paraître étonnants selon les contextes d'utilisation ; assurez vous, avant de publier une image qui présente un poids excessif, que le choix de l'encodage est réfléchi.

Souvenez vous également que le format JPEG pourra venir remplacement avantageusement PNG dans certains contextes ; évitez l'emploi exclusif de PNG sur vos pages web, notamment lorsque celles ci comportent des images de types photographies : PNG conviendra dans une large majorité des types d'images, mais pas pour les images types photos, arrière plan haute résolution, etc.

Evitez enfin la conversion entre les formats : convertir un GIF en PNG, et plus particulièrement un JPEG en PNG n'aura qu'un effet limité, voir inutile (le PNG obtenu peut être plus lourd en espace poids) ; les méthodes de filtrage et de compression du format PNG s'avèrent bien plus efficaces sur une « image brut », au format BMP (BitMap) par exemple.

Synthèse de l'article

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.