CSS-IG Optimisation Web, format PNG

Transparence du format PNG

Le format PNG ne propose pas qu'un seul type de transparence. Il propose plusieurs méthodes, selon les formats de l'image PNG, qui seront présentés et illustrés par des exemples :

La transparence selon le format PNG

Type de transparence
Paletted	Transparence Paletted (binaire), Transparence Paletted (opacités variables)
GrayScale	Transparence Chunk tRNS
GrayScale+alpha	Transparence et / ou transcludité (opacité) Canal Alpha
TrueColor	Transparence Chunk tRNS
TrueColor+alpha	Transparence et / ou transcludité (opacité) Canal Alpha

Transparence Paletted (binaire)

Le PNG Paletted peut rendre une couleur de l'image transparente en associant le chunk tRNS à un index de la palette. La couleur choisie est alors totalement transparente (opacité de 0) et laisse apparaître l'arrière plan sur laquelle est posée :

Transparence Paletted (binaire)

PNG sans transparence	Transparence Paletted - 1 couleur	Transparence Paletted - x couleurs
Aucune	Couleur jaune transparente	Couleur jaune et rouge transparentes

Ce type de PNG est, au même titre que GIF, compatible sur la très grande majorité des navigateurs Web, Internet Explorer 6.0 inclu.

Plusieurs couleurs transparentes ?

Si vous destinez un PNG Paletted à plusieurs couleurs transparentes, ne conservez pas plusieurs couleurs transparentes : colorisez la valeur dans l'index avec la même variable. Cela permettra d'éviter l'encodage d'une couleur dans le chunk PLTE, et supprimera les valeurs d'opacités dans tRNS.

Transparence Paletted (opacités variables)

Le PNG Paletted peut attribuer une valeur d'opacité entre 0 et 255 (0 étant la transparence paletted dite binaire, décrite ci-dessus) à une ou plusieurs couleurs de l'index. Cela permet d'obtenir des nuances graduelles.

Transparence Paletted (opacités variables)

PNG sans transparence	Transparence Paletted avec opacités variables
Aucune	Couleurs différentes avec variables d'opacités
Paletted	Paletted
11 couleurs	11 couleurs

Les images utilisent respectivement 11 couleurs dans cette image. Chaque couleur est presque identique, avec de très légères nuances quasi-imperceptibles. Cela est nécessaire pour attribuer une valeur d'opacité unique, à une couleur unique.

Transparence GrayScale - tRNS

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

Transparence GrayScale et tRNS

PNG sans transparence	Transparence GrayScale
Aucune	Couleur blanche transparente
GrayScale	GrayScale
2	2

Le ScriptPNG (ou autre outils d'optimisation) peuvent abandonner l'encodage GrayScale lorsque celui est associé à l'attribut tRNS, pour le convertir en Paletted binaire. Cela permet un meilleur support du PNG obtenu, et aucune économie de poids.

Transparence GrayScale+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) ainsi qu'un niveau de translucidité variable.

Transparence GrayScale+alpha

Transparence et anti-aliasing	Transparence, anti-aliasing, translucidité
GrayScale+alpha	GrayScale+alpha

Transparence TrueColor - tRNS

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.

Transparence TrueColor et tRNS

PNG sans transparence	Transparence TrueColor
Aucune	Couleur noire transparente
TrueColor	TrueColor

Transparence TrueColor+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.

Transparence TrueColor+alpha

Transparence et anti-aliasing	Transparence, anti-aliasing, translucidité
TrueColor+alpha	TrueColor+alpha

Support dans les navigateurs

Support dans les navigateurs

Navigateurs	IE 4 à IE 6.0	IE 7.0, 8.0	FireFox	Opera > 3.51	Konqueror > 3.6
Paletted (binaire)	Oui	Oui	Oui	Oui	Oui
Paletted (opacités variables)	Non	Oui	Oui	Oui	Oui
Transparence Chunk tRNS	Non	Oui	Oui	Oui	Oui
Canal Alpha	Non	Oui	Oui	Oui	Oui

Améliorer le support de la transparence dans IE

Le support de la transparence du PNG dans les navigateurs peut être amélioré en utilisant différentes méthodes. Les meilleures d'entre elles consistent à utiliser seulement le potentiel du PNG, sans hacks pour les navigateurs, comme alphaimageloader ou autre.

Efficacité de la quantification et transparence

PNG-32	PNG-8
6991 couleurs	256 couleurs
Compatibilité IE7 et supérieur	Compatibilité IE4 et supérieur
30381 octets	9287 octets

Dans cet exemple, seul le potentiel de PNG est utilisé : cela permet un gain considérable sur certaines ressources, comme expliqué dans la brève dédiée à ce sujet.

Complément d'article

Améliorez la transparence de vos PNG

Des solutions pour contourner le problème de la transparence sans bidouillages.