Articles

Images et graphiques pour le web: Le format PNG

Un peu d'histoire

L'histoire du format PNG commence le 28 décembre 1994. Dans la quiétude de l'année finissante, les sociétés Compuserve et Unisys rendent public un accord de licence relatif à la technique de compression LZW. Désormais, tous les créateurs de logiciel utilisant cette technique doivent payer des royalties à Unisys.

Dans le monde du logiciel libre, c'est la consternation, car le format GIF utilise la compression LZW. Tous ceux qui ont écrit des programmes gratuits impliquant le format GIF ne peuvent plus ni les utiliser, ni les distribuer. Légalement, il n'est plus possible de publier sur le web les images GIF créées à l'aide de ces programmes.

Tandis que les programmeurs bénévoles expriment violemment leur indignation dans les groupes de discussion, l'un d'entre eux (Thomas Boutell) se met tranquillement au travail. Le 4 janvier 1995, il publie un premier projet de format destiné à remplacer le format GIF. Le jour même, un groupe de volontaires enthousiastes se met au travail. Un mode de compression, libre de droits, est immédiatement proposé ; il est issu des recherches initiales de Lempel et Ziv. Les premières spécifications sont publiées le 16 janvier. Le nom du nouveau format, PNG (Portable Network Graphics), est définitivement adopté le 23 janvier. Les premières images au format PNG sont publiées sur le web le 13 mars, mais seuls les initiés dotés d'un lecteur adéquat peuvent les voir. Le premier site web dédié au PNG est mis en ligne le 13 juin... il s'est bien étoffé depuis !

En quelques mois, le format PNG a pris une forme quasi définitive, et les organismes officiels du web vont s'impliquer à leur tour. Le 8 décembre, le W3C publie un premier projet. Le 23 février 1996, IETF en fait autant. Le 14 octobre, IANA publie le type MIME (image/png). En 1998, les travaux de normalisation du format PNG commencent à l'ISO (ils viennent d'aboutir -- ISO/IEC 15948:2003). Ouf ! le format PNG est lancé.

Le problème, désormais, consiste à obtenir que les deux principaux éditeurs de navigateur implémentent le nouveau format. C'est chose faite chez Microsoft dès la version 4.0 pour Windows (et en 2000 pour la version 5 de IE pour Mac), mais chez Netscape, on se montre plus réticent. La version 4.04 du Communicator supporte enfin le format PNG, mais ce support disparaît avec les versions suivantes. Motif ? en avril 1998, une petite entreprise (Stac, Inc.) prétend que le mode de compression du format PNG utilise deux de ses brevets, et Netscape joue la prudence. Le cauchemar du format GIF recommencerait-il ? Non, il ne s'agit que d'un bluff sans suite, ou d'un malentendu, mais les promoteurs (tous bénévoles) du format PNG ont eu des sueurs froides. Cependant le mal est fait car, à cette époque (1997-8), Netscape domine encore le marché des navigateurs. Nous nous souvenons, au CERIG, d'une petite image PNG que nous avions introduite dans une note technique, et que nous avons dû remplacer rapidement par une image gif, parce que certains utilisateurs de Netscape ne la voyaient pas. Aujourd'hui, c'est plutôt Internet Explorer qui est sur la sellette, parce qu'il ne gère pas correctement la transparence des images PNG, et que ce défaut ne sera pas corrigé avant 2004 au plus tôt.

A la fin des années 1990, le format PNG entame sa traversée du désert. Le logiciel de dessin utilisé par presque tous les graphistes -- Photoshop -- ne supporte pas correctement le format PNG, du moins pas avant la version 6. De plus, dans cette version et la suivante, l'algorithme de compression n'est pas très performant, si bien que les images enregistrées au format PNG apparaissent aussi lourdes -- sinon plus -- que celles enregistrées au format GIF. Dans ces conditions, tous les graphistes qui travaillent pour le web continuent à utiliser le format GIF pour les dessins au trait. Certes, le logiciel de dessin Fireworks compresse nettement mieux le format PNG que Photoshop, mais il est beaucoup moins utilisé que ce dernier, car il est pauvre en filtres et en effets.

A l'heure où nous écrivons ces lignes (fin 2003), le format PNG trouve enfin une modeste place sur le web. Bref, ce n'est plus seulement un format dont on parle, c'est également un format dont on commence à se servir.

Dernière minute : le W3C vient de valider (10 novembre 2003) la deuxième révision du format PNG. Cette opération concerne des détails mineurs, si bien que le format PNG peut être considéré comme stable.

Les deux formats PNG

Il existe en fait deux types d'image PNG :

• dans le premier type, la couleur de chaque pixel est codée sur un octet (8 bits) et provient d'une palette, laquelle comporte 256 couleurs au maximum. La compression n'est pas dégradante. Ce type (souvent noté PNG-8) est le concurrent direct du format GIF ;
• dans le second type, la couleur de chaque pixel est codée sur 3 octets. La compression n'est pas dégradante. Ce type (souvent noté PNG-24) peut être considéré comme concurrent du format JPEG.

Pour comparer les deux formats PNG entre eux et avec les formats GIF et JPEG, nous avons utilisé l'image de l'un des boutons de navigation qui figurent en haut de cette page, et nous nous sommes servis des versions 7 et 8 (cette dernière est appelée "CS") de Photoshop. Le format PNG-24 a été obtenu à l'aide de la fonction "Enregistrer sous...", les autre formats à l'aide de la fonction "Enregistrer pour le web... ". La palette des images GIF et PNG-8 a été limitée à 64 couleurs (palette sélective avec diffusion, pas de tramage, pas d'entrelacement, pas de transparence). L'image JPEG a été enregistrée en qualité 70/100 afin de ne pas dégrader l'aplat de couleur orange, et avec l'option "optimisée" dans Photoshop CS.

image GIF (749 octets)		image PNG-8 (893 octets)		image PNG-24 (1760 octets)		image JPEG (1411 octets)
Images issues du logiciel Photoshop (version 7)

image GIF (769 octets)		image PNG-8 (754 octets)		image PNG-24 (1224 octets)		image JPEG (1090 octets)
Images issues du logiciel Photoshop (version 8 "CS")

Comme nous l'avons déjà signalé, Photoshop 7 n'est pas très performant dans la compression des images PNG (la version 8 est nettement meilleure). Il en résulte que les image PNG-8 générées dans Photoshop 7 pèsent généralement plus lourd que les image GIF correspondantes (toutes choses égales par ailleurs). Notons au passage que l'image JPEG pèse plus lourd que l'image GIF, malgré la présence de dégradés, parce que l'image est de petite dimension (36x32 pixels).

Nous voyons également sur la figure ci-dessus que l'image au format PNG-24 pèse plus lourd que l'image JPEG. Cela provient du fait qu'elle utilise une technique de compression non dégradante. D'une manière générale, le format PNG-24 ne peut pas lutter efficacement avec le format JPEG, si bien qu'on ne le rencontre pas sur le web. Il est utilisé, par contre, comme format natif du logiciel Fireworks.

Le rôle du logiciel de dessin

Le logiciel de dessin joue un double rôle : sur le poids de l'image d'une part, sur la manière dont les navigateurs affichent cette image d'autre part.

Le poids de l'image. Le logiciel de dessin Fireworks de Macromedia est réputé fournir des images PNG-8 moins lourdes que Photoshop. Pour effectuer une comparaison, nous avons de nouveau utilisé l'un des boutons de navigation qui figurent en haut de cette page. Nous avons limité à 64 le nombre de couleurs, et utilisé une palette adaptative, sans tramage ni transparence. Nous constatons que, sur cet exemple, l'image PNG créée dans Fireworks MX pèse 18 % de moins que l'image PNG créée dans Photoshop 7. Les différences sont nettement plus faibles avec la version CS de Photoshop, laquelle vient d'arriver sur le marché (déc. 2003).

image GIF (749 octets)		image PNG-8 (893 octets)		image GIF (769 octets)		image PNG-8 (754 octets)		image GIF (717 octets)		image PNG-8 (728 octets)
Images Photoshop 7				Images Photoshop CS				Images Fireworks MX

Faut-il jeter Photoshop aux orties et ne plus dessiner que dans Fireworks ? C'est aller un peu vite ! Photoshop fournit beaucoup plus de filtres et d'effets que son concurrent et, de ce point de vue, il est pour l'instant imbattable. On peut donc continuer à dessiner dans Photoshop, mais il est intéressant d'importer ensuite l'image dans Fireworks pour comparer le poids des fichiers.

Pour transporter l'image de Photoshop à Fireworks, il faut l'enregistrer dans un format non dégradant reconnu par les deux logiciels. Le plus simple consiste à utiliser PNG-24, qui sert de format natif à Fireworks, et donne de ce fait les meilleurs résultats. Il faut éviter d'utiliser le format natif de Photoshop (PSD), car Fireworks n'interprète pas correctement les filtres et les effets de son concurrent.

Attention ! pour sauvegarder une image en PNG-8 dans Fireworks, il faut utiliser la fonction "Exporter..." et non la fonction "Enregistrer sous...", sinon l'image sera enregistrée en PNG-24, et sera donc beaucoup plus lourde.

Le rendu de l'image dans les navigateurs. La figure ci-dessous comporte deux carrés de 100 pixels de côté et de couleur rose (R=204, V=B=102). Nous les avons construits en colorant le fond (#CC6666) de deux cellules d'un tableau invisible.

Au centre de chacun des deux carrés, nous avons avons superposé une image PNG (8 bits) de 50 pixels de côté et de la même couleur rose. L'image de gauche a été créée dans Photoshop CS (ce qui correspond à la version 8) et pèse 157 octets. L'image de droite a été créée dans FireWorks MX (ce qui correspond à la version 6) et pèse 169 octets.

+ image PNG de PS		+ image PNG de FW

Si vous observez cette page dans Internet Explorer, vous constatez que l'image PNG de gauche apparaît comme plus foncée (R=198, V=B=90) que le fond. Si vous utilisez un navigateur à moteur Gecko, vous ne constatez aucune différence. L'image créée dans Photoshop contient donc une information qui incite le navigateur de Microsoft à lui appliquer une correction (de gamma, très probablement), ce qui la rend plus foncée. Le navigateur à moteur Gecko ne réagit pas à cette information. L'image créée dans FireWorks ne contient pas cette information, et les différents navigateurs l'affichent de la même façon. D'ailleurs, si vous ouvrez les deux images dans un éditeur de texte, vous constatez qu'elles ne sont pas identiques.

Conséquence : dans Photoshop, il faut éviter d'utiliser le format PNG quand on découpe une image en morceaux pour la reconstituer ensuite dans une page Web. Les continuités de teinte attendues ne se produiront pas si l'on met bord à bord une image PNG et une image GIF, ou une image PNG et une cellule de tableau dont on a coloré le fond.

Le format PNG-8 et l'image hybride

S'il existe un consensus sur le web pour affirmer que l'image PNG-24 n'est pas en mesure de concurrencer l'image JPEG, le match entre l'image GIF et l'image PNG-8 est par contre nettement plus ouvert. Pour certains types d'image au trait (les logos, les saisies d'écran), la seconde est réputée plus performante que la première.

Pour en avoir le coeur net, nous avons enregistré le logo du CERIG dans les deux formats, à partir du dessin d'origine disponible au format Illustrator et pixellisé dans Photoshop (options : couleurs RVB, 72 dpi, lissage). En utilisant les mêmes options (128 couleurs, palette adaptative, ni tramage ni transparence) dans Photoshop 7 et dans Fireworks MX, nous avons obtenu les résultats représentés ci-dessous. Comme vous pouvez le constater, les images au format PNG sont plus légères que celles au format GIF d'une part, et Fireworks compresse mieux le format PNG que Photoshop 7 d'autre part.

image GIF (3524 octets) PS 7		image PNG (3481 octets) PS 7
image GIF (3545 octets) FW MX		image PNG (3069 octets) FW MX

Nous avons répété l'expérience avec la petite boite de message (issue d'une application un peu longue à s'exécuter...) représentée ci-dessous (options : palette sélective, 90 couleurs --c'est le minimum pour éviter la formation de bandes dans le dégradé bleu, c'est même un peu limite). Cette fois, l'image PNG l'emporte nettement sur l'image GIF. Le passage du format GIF au format PNG réduit de 34 % le poids du fichier dans Photoshop 7, et de 49 % dans Fireworks MX. Quel succès !

image GIF (3461 octets) PS 7		image PNG (2293 octets) PS 7
image GIF (3328 octets) FW MX		image PNG (1707 octets) FW MX

Quand on l'examine de près, cette boite de message apparaît comme une image hybride. Certains de ses éléments relèvent du dessin au trait (le texte, les formes géométriques simples, l'aplat gris), d'autres de l'image en tons continus (le dégradé bleu, les ombres). Pour vérifier si la représentation de l'image hybride est bien le point fort du format PNG, nous avons créé une image ad hoc, comportant un fond dégradé parfaitement régulier, et un texte simple, comme le montre la figure ci-dessous. Pour éviter la formation de bandes et le tramage par le navigateur, nous avons conservé 256 couleurs. Pour obtenir une bonne compression de l'image PNG, nous avons utilisé le logiciel de dessin Fireworks (la cause de Photoshop 7 étant désormais entendue). Nous voyons que l'image PNG est 39 % plus petite que l'image GIF. Cette fois, il n'y a plus de doute possible : l'image hybride est un point fort du format PNG.

image GIF(4684 octets) FW MX		image PNG (2872 octets) FW MX

A l'appui de cette affirmation, nous nous sommes livrés à l'expérience qui consiste à séparer l'image hybride ci-dessus en deux parties. Si nous ne conservons que le texte, alors les deux formats se valent (dans Fireworks tout au moins), comme le montre la figure ci-dessous (en 16 couleurs pour le lissage).

image GIF(1655 octets) FW MX		image PNG (1584 octets) FW MX

Par contre, si de l'image hybride nous ne conservons que le dégradé, le format PNG apparaît comme bien supérieur au format GIF, comme le montre la figure ci-dessous ( en 250 couleurs). C'est donc bien là que réside le point fort du format PNG, et qu'il ne faut pas manquer de l'exploiter.

image GIF(4125 octets) FW MX		image PNG (1117 octets) FW MX

En ce qui concerne le format PNG, on remarque que la somme des poids des deux images partielles (le texte et le dégradé, 1584+1117=2701 octets) est inférieure au poids de l'image complète (2872 octets). Nous sommes donc tentés de restituer l'image complète par superposition des deux images partielles. Pour ce faire, nous utilisons un tableau invisible, le dégradé étant utilisé comme image de fond de cellule. Le fond de l'image contenant le texte est déclaré transparent (ce qui fait croître son poids de 1584 à 1590 octets), puis l'image est affichée dans la cellule. Comme le montre la figure ci-dessous (à gauche), ce qui devait arriver -- le phénomène de halo accompagné de crénelage -- est arrivé ! Mieux vaut traiter le texte en tant que texte, comme le montre la figure ci-dessous (à droite). Encore faut-il être sûr que la police correspondante est bien présente sur la machine de l'internaute -- ce qui est présentement le cas puisque le texte est écrit en Times New Roman.

		CERIG
Fond PNG (1117 octets)+ image PNG (1590 octets)		Fond PNG (1117 octets)+texte

On peut encore faire mieux ! L'image qui sert de fond de cellule n'a pas besoin d'avoir 60 pixels de haut -- un seul pixel suffit, puisque le navigateur se charge de paver la cellule. La taille de l'image PNG baisse alors d'une centaine d'octets. Enfin, on peut diminuer le nombre de couleurs sans faire immédiatement apparaître des bandes, ce qui permet de gagner encore quelques centaines d'octets... Certains webmestres se livrent ainsi à une véritable chasse à la mort en ce qui concerne les octets superflus.

Enfin, en multipliant les essais on s'aperçoit qu'un autre facteur intervient dans la compétition GIF / PNG : la taille de l'image. Plus l'image possède de grandes dimensions, plus le format PNG est favorisé. Inversement, pour les très petites images (un bouton, par exemple), le format GIF est presque imbattable, comme nous l'avons vu plus haut.

L'avenir du format PNG sur le web

Le format PNG peut-il réellement détrôner le format GIF sur le web ? Ses plus ardents défenseurs avancent les arguments suivants :

• le codec (compresseur / décompresseur) du format PNG serait meilleur que celui du format GIF. Les essais présentés ci-dessus montrent que les deux codecs ont en fait des performances comparables ;
• le canal alpha (la transparence). Dans le format GIF, un pixel est soit transparent, soit opaque. Dans le format PNG, chaque pixel possède un niveau de transparence qui peut varier de 0 à 255. Pour l'instant, cette propriété ne sert à rien, car Internet Explorer ne l'implémente pas. De plus, elle concerne le format PNG en vraies couleurs, qui n'est pas concurrent du GIF ;
• la correction chromatique et le gamma. Il est prévu de pouvoir enregistrer le profil ICC et / ou le gamma de l'écran du moniteur de la machine sur laquelle l'image a été créée, de manière à pouvoir l'afficher avec exactement les mêmes couleurs sur l'écran du moniteur de la machine réceptrice. Une telle technique peut concerner des professionnels qui s'échangent des images, et qui sont normalement préoccupés par la gestion de la couleur. Mais on voit mal l'internaute moyen déterminer le profil ICC de son moniteur. De plus, la présence du profil ICC alourdit fortement le fichier, un défaut rédhibitoire sur le web ;
• les meta-données. En plus de l'image elle-même, on peut enregistrer divers renseignements qui l'identifient (auteur, copyright, etc.) ;
• l'entrelaçage. L'affichage progressif d'une image PNG entrelacée est plus esthétique que celui d'une image GIF ;
• le format est ouvert, les développeurs peuvent donc l'utiliser librement.

A notre avis, en ce qui concerne le web, il n'y a rien là d'essentiel. C'est pourquoi les pessimistes vous diront que le rôle principal du format PNG a été de servir de recours potentiel, pour le cas où Unisys aurait poussé sa politique de licence à des niveaux prohibitifs. L'expiration du brevet Unisys enlève donc sa raison d'être au format PNG, qui est voué à disparaître -- car de plus il ne gère pas les animations. Les optimistes, bien sûr, vous diront que c'est le format GIF qui va céder la place au format PNG.

Pour les gens raisonnables, qui ne se targuent pas de jouer au gourou, et qui font la chasse aux octets superflus, la compétition entre les deux formats apparaît comme très ouverte. Le format GIF a l'énorme avantage d'être présent depuis longtemps, mais le format PNG peut se développer dans la niche des images hybrides -- celles qui sont intermédiaires entre le dessin au trait et l'image en tons continus. On commence d'ailleurs à trouver des images PNG sur le web en quantité non négligeable, et il nous paraît probable que ce mouvement ira en s'amplifiant.

Conclusion

Le format PNG présente des atouts qui devraient lui permettre de se faire une place honorable sur le web. Nous pouvons citer les points suivants :

• le format PNG est tout à fait stabilisé, et même -- depuis cette année -- normalisé ISO. A compter de sa création, il n'a subi que deux révisions mineures ;
• la quasi totalité des logiciels de dessin actuellement sur le marché permet la création d'images au format PNG. Le standard est bien respecté, et la technique de compression mieux implémentée que par le passé ;
• les navigateurs affichent les images PNG sans problème, à moins que l'on utilise une version fort ancienne ;
• le format PNG est compétitif avec le format GIF (sauf pour les très petites images). Il l'emporte largement sur ce dernier pour les images hybrides, c'est à dire celles qui contiennent à la fois des éléments de dessin au trait et des éléments en tons continus ;
• le format PNG commence à être connu des infographistes qui travaillent pour le web.

Par conséquent, l'usage du format PNG devrait se répandre sur le web, en occupant au minimum la niche de l'image hybride. Il ne faut pas s'attendre, cependant, à ce que le format PNG détrône le format GIF dans un avenir prévisible. En effet, il ne fait pas toujours mieux que le format GIF pour les dessins au trait purs (sans tons continus), et souvent un peu moins bien pour les très petites images.

Pour tirer pleinement profit des qualités du format PNG, il faut utiliser un logiciel de dessin qui implémente bien son mode de compression. A notre connaissance, c'est actuellement Fireworks MX (de l'éditeur Macromedia) qui fournit les fichiers les plus légers, suivi de près par Photoshop CS.

En définitive : il est conseillé de tester le format PNG en concurrence avec le format GIF chaque fois que l'on s'apprête à créer pour le web une image du type dessin au trait. On a parfois d'excellentes surprises (voir par exemple le chapitre 9).