La transparence du format PNG

Au Sommaire :

Transparence et formats
Support dans les navigateurs
Les solutions aux problèmes
Synthèse de l'article

PNG (Portable Network Graphics) est incontestablement le format qui nourrit le plus de doute concernant ses capacités à restituer la transparence sur certains navigateurs ; et pour cause, il dispose de nombreuses méthodes totalement différentes des unes des autres pour jouer sur la transparence.

Cette versatilité peut engager l'utilisateur à remplacer, à tort, un PNG par un GIF dans certaines conditions : que cela soit dit, le type de transparence que propose GIF, PNG le permet aussi, à un même niveau de support de la part des navigateurs.

Il suffit en effet de rechercher l'information sur Internet pour obtenir le même genre d'informations relayées : « Internet Explorer ne supporte pas la transparence du format PNG », « Internet Explorer ne pourra pas restituer la même qualité qu'une image PNG24 », etc. ; bonne ou mauvaise pioche, je vais ici vous démontrer que ces affirmations ne sont ni vraies, ni fausses.

Vous allez trouver dans cet article une explication concernant les différentes méthodes utilisées par PNG pour la transparence, ainsi que des solutions pour accroître le support du PNG ; vous trouverez sur le Web différentes méthodes pour forcer la transparence sur certains navigateurs qui ne le supportent pas nativement (solutions JavaScript, CSS, CSS (bis), ou encore PHP.). Dans cet article, vous obtiendrez des solutions propres à son format, qui ne nécessitent aucune ressource extérieure.

Transparence et formats

Pour bref rappel, GIF ne propose qu'un seul format, une seule méthode d'encodage, et une seule méthode de transparence. PNG propose 5 types de formats, identifiés par l'attribut ColorType ; parmi ces 5 formats, on distingue 3 grands types d'encodage : Paletted, GrayScale et TrueColor. Il propose des solutions de transparence pour ces différents types d'encodage.

PNG Paletted - valeur `alpha`

Le PNG Paletted est similaire au GIF : il utilise la même méthode d'encodage (Paletted), et la même méthode de transparence. Mais là où GIF se contente de proposer une valeur de transparence totale, PNG peut (en plus) faire varier cette transparence selon plusieurs niveaux. C'est l'attribut tRNS, codé dans l'entête, qui a pour fonction de remplir cette mission.

Transparence totale

Le format PNG Paletted permet au même titre que GIF de proposer une transparence totale d'une couleur. Il s'agit en fait de rajouter une valeur alpha à l'entrée de la palette que l'on souhaite voir transparente :

PNG Paletted - Transparence totale
Type	Syntaxe PNG	Image restituée	Image restituée sur un arrière plan
Image originale (non transparente)	1: rgb ( 0 , 0 , 0 ) ; 2: rgb ( 0 , 0 , 255 ) ;
Image transparente	1: rgba ( 0 , 0 , 0 , 255 ) ; 2: rgba ( 0 , 0 , 255 , 0 ) ;

Ce type de transparence, souvent nommé transparence binaire, est celle utilisée par GIF. Au même titre que GIF, elle est supportée par une grande majorité de navigateur (Internet Explorer 6 inclus). Un PNG Paletted de transparence totale est encodé sous les paliers 1, 2, 4 ou 8 bits/pixel.

Transparence graduelle

Le PNG Paletted permet également de faire varier la valeur de l'opacité (la valeur alpha) sur chaque entrée de la palette, parmi les valeurs disponibles entre 0 et 255. Les navigateurs qui supportent cette fonctionnalité restitue partiellement les couleurs, selon la valeur spécifiée :

PNG Paletted - Transparence partielle
Type	Syntaxe PNG	Image restituée	Image restituée sur un arrière plan
Image originale (non transparente)	1: rgb ( 0 , 0 , 0 ) ; 2: rgb ( 0 , 0 , 255 ) ; 3: rgb ( 0 , 0 , 254 ) ; 4: rgb ( 0 , 0 , 253 ) ; 5: rgb ( 0 , 0 , 252 ) ; 6: rgb ( 0 , 0 , 251 ) ; 7: rgb ( 0 , 0 , 250 ) ; 8: rgb ( 0 , 0 , 249 ) ; 9: rgb ( 0 , 0 , 248 ) ; 10: rgb ( 0 , 0 , 247 ) ; 11: rgb ( 0 , 0 , 246 ) ;
Image transparente	1: rgba ( 0 , 0 , 0 , 255 ) ; 2: rgba ( 0 , 0 , 255 , 255 ) ; 3: rgba ( 0 , 0 , 254 , 224 ) ; 4: rgba ( 0 , 0 , 253 , 192 ) ; 5: rgba ( 0 , 0 , 252 , 160 ) ; 6: rgba ( 0 , 0 , 251 , 128 ) ; 7: rgba ( 0 , 0 , 250 , 255 ) ; 8: rgba ( 0 , 0 , 249 , 96 ) ; 9: rgba ( 0 , 0 , 248 , 64 ) ; 10: rgba ( 0 , 0 , 247 , 48 ) ; 11: rgba ( 0 , 0 , 246 , 36 ) ;

PNG Paletted - Transparence partielle

Type

Syntaxe PNG

Image restituée

Image restituée
sur un arrière plan

Image originale
(non transparente)

1: rgb ( 0 , 0 , 0 ) ;
2: rgb ( 0 , 0 , 255 ) ;
3: rgb ( 0 , 0 , 254 ) ;
4: rgb ( 0 , 0 , 253 ) ;
5: rgb ( 0 , 0 , 252 ) ;
6: rgb ( 0 , 0 , 251 ) ;
7: rgb ( 0 , 0 , 250 ) ;
8: rgb ( 0 , 0 , 249 ) ;
9: rgb ( 0 , 0 , 248 ) ;
10: rgb ( 0 , 0 , 247 ) ;
11: rgb ( 0 , 0 , 246 ) ;

carré de nuance de bleu sur un arrière plan

Image transparente

1: rgba ( 0 , 0 , 0 , 255 ) ;
2: rgba ( 0 , 0 , 255 , 255 ) ;
3: rgba ( 0 , 0 , 254 , 224 ) ;
4: rgba ( 0 , 0 , 253 , 192 ) ;
5: rgba ( 0 , 0 , 252 , 160 ) ;
6: rgba ( 0 , 0 , 251 , 128 ) ;
7: rgba ( 0 , 0 , 250 , 255 ) ;
8: rgba ( 0 , 0 , 249 , 96 ) ;
9: rgba ( 0 , 0 , 248 , 64 ) ;
10: rgba ( 0 , 0 , 247 , 48 ) ;
11: rgba ( 0 , 0 , 246 , 36 ) ;

carré dont les nuances de bleus sont restituées claires

carré dont les nuances laissent plus ou moins apparaître le fond

Ce type de transparence n'est pas supportée par certains navigateurs, dont Internet Explorer 6 et version antérieure. La plupart des navigateurs alternatifs supportent cette transparence. Un PNG Paletted de transparence partielle est encodé sous les paliers 1, 2, 4 ou 8 bits/pixel.

PNG GrayScale - valeur `alpha`

Le format PNG GrayScale permet l'ajout de l'attribut tRNS ; ce dernier va pouvoir spécifier une valeur des niveaux de gris de l'image, afin de rendre la couleur transparente à l'affichage.

PNG GrayScale - Transparence d'une couleur
Type	Syntaxe PNG	Image restituée	Image restituée sur un arrière plan
Image originale (non transparente)	1: 255 ; 2: 0 ;
Image transparente	`tRNS` transparent color =(1)

Ce type de transparence n'est pas supporté par tous les navigateurs. Un PNG GrayScale avec cette méthode de transparence est encodé sous les paliers 1, 2, 4 ou 8 bits/pixel. Notez que la plupart des logiciels d'optimisation vont convertir un PNG GrayScale transparent en PNG Paletted transparent car ce dernier offre un meilleur potentiel d'espace poids.

PNG GrayScale+alpha - `canal alpha`

Le PNG GrayScale+alpha ajoute un canal alpha 8 bits au canal des niveaux de gris déjà existant. Il permet d'appliquer un niveau de filtre, qui permet d'obtenir un effet anti-aliasing (effet anti-escalier des pixels plus ou moins gênants) ainsi qu'un niveau de translucidité variable. Les données du Canal Alpha ne sont malheureusement pas supporté par certains navigateurs.

PNG GrayScale+alpha - Opacité et translucidité
Type	Propriétés	Image restituée	Image restituée sur un arrière plan
Image originale (non transparente)	GrayScale 241 couleurs
Image transparente	`Canal Alpha`
Image transparente et Translucide	`Canal Alpha`

De part le fait qu'il soit muni d'un canal alpha, le PNG GrayScale+alpha dispose d'un encodage basé sur une profondeur de 16 bits/pixel. Notez encore une fois qu'une PNG GrayScale pourra être convertit en PNG Paletted avec valeur alpha par certains logiciels d'optimisation, afin d'économiser de l'espace poids.

PNG TrueColor - valeur `alpha`

Le format PNG TrueColor permet l'ajout de l'attribut tRNS dans l'entête du PNG : une couleur, spécifiée par la syntaxe rgb (x,x,x) sera restituée transparente dans le navigateur compatible.

PNG TrueColor - Transparence d'une couleur
Type	Propriétés	Image restituée	Image restituée sur un arrière plan
Image originale (non transparente)	TrueColor 4644 couleurs
Image transparente	`tRNS` transparent color =(0,0,0)

Le PNG TrueColor muni de l'attribut tRNS est encodé sous 24 bits/pixel ; il voit son poids augmenter de quelques octets pour l'ajout de l'attribut. Un effet escalier peut être constaté selon l'arrière plan, et la caractéristique de l'image.

PNG TrueColor+alpha - `canal alpha`

Le PNG TrueColor+alpha ajoute un canal alpha 8 bits aux trois canaux RVB (Rouge Vert Bleu) existants. Au même titre qu'un GrayScale+alpha, cela permet d'appliquer un niveau de filtre, qui permet d'obtenir un effet anti-aliasing ainsi qu'un niveau de translucidité variable ; on constate toujours le même problème au niveau du support de la part de certains navigateurs.

PNG TrueColor+alpha - Opacité et translucidité
Type	Propriétés	Image restituée	Image restituée sur un arrière plan
Image originale (non transparente)	TrueColor 4604 couleurs
Image transparente	`Canal Alpha`
Image transparente et Translucide	`Canal Alpha`

De part le fait qu'il soit muni d'un canal alpha, le PNG TrueColor+alpha dispose d'un encodage basé sur une profondeur de 32 bits/pixel. Là encore, le support de la part des navigateurs est partiel.

Support dans les navigateurs

Support des types de transparence du format PNG dans les navigateurs Web
Navigateur	Paletted totale	Paletted graduelle	GrayScale + `tRNS`	GrayScale + `Canal alpha`	TrueColor + `tRNS`	TrueColor + `Canal alpha`
Crazy Browser 1.0.5 *	OUI	NON	NON	NON	NON	NON
Dillo 0.8	OUI	OUI	OUI	OUI	OUI	OUI
Epiphany 2.14	OUI	OUI	OUI	OUI	OUI	OUI
Firebird 0.7	OUI	OUI	OUI	OUI	OUI	OUI
Firefox 1.5	OUI	OUI	OUI	OUI	OUI	OUI
Firefox 2.0	OUI	OUI	OUI	OUI	OUI	OUI
Flock 0.7	OUI	OUI	OUI	OUI	OUI	OUI
Galeon 2.0	OUI	OUI	OUI	OUI	OUI	OUI
Ghostzilla 1.0.1	OUI	OUI	OUI	OUI	OUI	OUI
GreenBrowser 3.6 *	OUI	NON	NON	NON	NON	NON
Internet Explorer 4.x > 6.x	OUI	NON	NON	NON	NON	NON
Internet Explorer 7.x	OUI	OUI	OUI	OUI	OUI	OUI
K-Meleon 1.02	OUI	OUI	OUI	OUI	OUI	OUI
Konqueror 3.5.4	OUI	NON	OUI	NON	OUI	NON
Maxthon Combo 1.5 *	OUI	NON	NON	NON	NON	NON
Off By One Web Browser 3.5c	OUI	OUI	NON	NON	NON	NON
Opera 9.0	OUI	OUI	OUI	OUI	OUI	OUI

* : Testé avec l'environnement Internet Explorer 6.x.

Les solutions aux problèmes

Comme l'indique le tableau ci-dessus, certains navigateurs ne supportent pas les effets de transparence, selon l'encodage et les méthodes utilisées. Il existe néanmoins des solutions propres au format PNG qui vont permettre de résoudre la plupart des problèmes rencontrés ; ces solutions vont substituer aux utilisations de ressources supplémentaires, comme des javascripts, ou diverses bidouilles CSS que vous pouvez trouver ailleurs sur le Web.

Paletted (PNG8)

Le PNG Paletted avec valeur alpha est très certainement le type de PNG le plus utilisé pour la transparence, car il garantit, au même niveau que GIF, un support de la part d'une grande majorité de navigateurs graphiques. De nombreux utilisateurs rencontrent néanmoins quelques soucis, souvent engendrés par la vulgarisation logicielle, ou par le manque du support logiciel.

TrueColor+alpha (PNG32)

Lorsqu'un PNG TrueColor+alpha sera destiné à être inséré sur un fond uni, l'attribut bKGD sera utilisé pour attribuer une couleur de fond par défaut, qui sera utilisée lorsque le navigateur ne supporte pas ou en partie les données du canal alpha. Lorsque cette valeur n'est pas pré-spécifiée, c'est l'application qui choisie quelle couleur attribuer à l'arrière plan du PNG (exemple : Internet Explorer 6.x restitue par défaut une couleur bleu-vert). Dans notre exemple, l'image sera resitué sur un fond bleu :

Restitution d'un canal alpha sur un navigateur non compatible
Sans l'attribut `bKGD`	Avec l'attribut `bKGD`

Format : TrueColor+alpha Appellation logicielle : PNG32	Format : TrueColor+alpha Appellation logicielle : PNG32
Poids : 18.94 Ko (19 392 octets)	Poids : 18.96 Ko (19 410 octets)
L'image est mal restituée sur Internet Explorer 6.0	L'image est bien restituée sur Internet Explorer 6.0

Ré-encoder l'image AVEC l'arrière plan

La méthode consiste à restituer la couleur de l'arrière plan, mais pas grâce à l'attribut bKGD : la couleur est intégrée dans la matrice de l'image, et est restituée dans tous les navigateurs ; l'attribut devient inutile. Il faut, pour ce faire, restituer l'image dans une application compatible, et effectuer une capture de l'image restituée.

Image restituée sur une application compatible, puis réencodée
Encodage `TrueColor`	Encodage `Paletted`

Format : TrueColor Appellation logicielle : PNG24	Format : Paletted Appellation logicielle : PNG8
Poids : 16.81 Ko (17209 octets)	Poids : 6.87 Ko (7030 octets)
L'image est bien restituée sur Internet Explorer 6.0	L'image est bien restituée sur Internet Explorer 6.0

TrueColor+alpha sur « arrière plan »

En ce qui concerne les images qui profitent du Canal Alpha pour bénéficier d'une insertion haute qualité, sans se soucier de l'arrière plan, il est possible de restituer partiellement l'effet avec une image encodée en Paletted. A cause des limitations de cet encodage, cette technique ne sera pas applicable sur des images à définition élevée, et aux nombre de couleurs élevé.

Image restituée sur un arrière plan
Encodage `TrueColor+alpha`	Encodage `Paletted`

Format : TrueColor+alpha Appellation logicielle : PNG32	Format : Paletted Appellation logicielle : PNG8
Poids : 1.21 Ko (1239 octets)	Poids : 1.39 Ko (1421 octets)
L'image est mal restituée sur Internet Explorer 6.0	L'image est bien restituée sur Internet Explorer 6.0

procédure de modifications de l'image

Pour rappel, Internet Explorer ne supporte la transparence que sur une entrée de la palette ; cela signifie qu'il faut encoder l'image en Paletted, et créer un fond plus ou uni de l'image avec le même couleur, afin de rendre cette entrée transparente.

Il faut dans un premier temps capturer l'image correctement restituée dans une application compatible. Dès lors, vous obtenez une image composée de l'arrière plan, contenu dans la matrice de l'image. Il vaut mieux de ne pas la conserver ainsi, afin de prévenir tout problème de mise en page selon les navigateurs, ou d'éventuels agrandissement de police de la part des utilisateurs.

L'image ci-contre illustre la manoeuvre : un remplissage de couleur se fait progressivement, avec n'importe quel utilitaire de remplissage de couleurs. Une légère correction est généralement à prévoir pour confondre tous les pixels gênants sur un même fond, une même couleur. L'étape finale va alors consister à encoder l'image en Paletted, et lui attribuer une valeur alpha 0 (opacité totale) à la couleur unie.

TrueColor+alpha translucide

Cette méthode est la plus versatile, car elle ne s'applique pas dans tous les cas. En effet, avec un arrière plan plus complexe, elle risque de poser problème lorsque l'utilisateur agrandit la police de la page, ou selon les différences de mise en page des navigateurs. Elle consiste simplement à encoder l'image restituée correctement par une application compatible :

Image restituée sur un arrière plan
Encodage `TrueColor+alpha`	Encodage `TrueColor`

Format : TrueColor+alpha Appellation logicielle : PNG32	Format : TrueColor Appellation logicielle : PNG24
Nombre d'images : 2 (avant-plan et arrière plan)	Nombre d'images : 1 (fusion)
Poids : 18.75 Ko (19 197 octets) + 0.19 Ko (194 octets)	Poids : 16.3 Ko (16692 octets)
L'image est mal restituée sur Internet Explorer 6.0	L'image est bien restituée sur Internet Explorer 6.0

Synthèse de l'article

En synthèse :

GIF propose un seul type de transparence, là ou PNG en propose 6 variantes, selon le type d'encodage choisi. Il permet la transparence de GIF, qui est supportée de la même manière de la part des navigateurs. En ce qui concerne les 5 autres méthodes, certains navigateurs arriérés n'ont encore qu'un support partiel, même si cela à tendance à s'améliorer depuis l'arriver de Internet Explorer 7.
Il existe diverses solutions pour obtenir l'effet de transparence recherché, propre au format PNG, avant de recourir aveuglément aux solutions de facilités trouvées ci et là sur le Web, qui impliquent l'utilisation de technologies supplémentaires (JavaScript), ou encore divers hack CSS.

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.