PNG 8 Bits avec transparence Alpha, c'est possible!

Contrairement à ce qu'on peut penser, le PNG 8 bits n'est pas l'équivalent du GIF. Le PNG-8 permet une bien meilleure gestion de transparence. Alors qu'un simple GIF ne permet que la définition de la transparence sur 1 bit (qu'une couleur), le PNG permet d'aller plus loin dans les nuances de transparence grâce aux couches Alpha (je parle bien ici du 8 bits et non 32 bits). Mieux encore ces niveaux de transparence seront parfaitement ignorés par les navigateurs anciens. Faisons un petit tour de ce format et de ses options méconnues.

Merci Fireworks !

Pour le moment, seul Fireworks semble tirer partie de ces possibilités avancées. Adobe étant maintenant propriétaire de Fireworks, il y a fort à parier que cette option sera implémentée dans de futures versions de Photoshop (Je n'ai pas eu l'occasion de tester CS4 à l'heure où j'écris ces lignes). Cette option s'appelle Transparence Alpha et est entre autre cachée dans le panneau Optimiser de Fireworks.

Comparaison des différentes options

Voici quelques copies d'écrans de différentes options de transparences que propose le PNG ainsi que la différence de rendu sur navigateurs modernes et plus anciens. A noter que ce format est idéal pour agrémenter vos images d'effets d'ombres et lueurs sans trop les alourdir ni truffer vos pages de hacks Css (Vous savez ? les poétiques progid:DXImageTransform.Microsoft.AlphaImageLoader dont Microsoft à la secret) ou de solutions Javascript pour contrer le manque de support de Internet Explorer 6.

Prenons un joli fond chargé et une sympathique citrouille (je sais, je suis un peu en retard sur Halloween).

Puis un peu de Html et Css pour faire nos essais.

HTML

<div id="fond">
    <img id="citrouille" src="citrouille.png" />
</div>

CSS

#fond{
    width:650px; height:400px;
    background:url(background.png);
    position:relative;
}
#citrouille {
    position:absolute;
    left:0; top:0;
}

Comparons maintenant les résultats.

PNG 8 bits avec transparence 1 bit

Ici, on obtient une transparence 1 bit typique. Une couleur est définie comme transparente, pas de nuance, la bordure transparent/visible est tranchée. Autant dire que l'utilité est limitée.

PNG 32 bits avec transparence Alpha

Maintenant la transparence est parfaite sur les navigateurs modernes. Seulement, en plus d'apporter un poids d'image décuplé, la transparence n'est pas supportée par Internet Explorer 6 laissant un fond gris opaque.

PNG 8 bits avec transparence Alpha, magique !

La solution la plus parfaite. Avec l'option Transparence Alpha de Fireworks on obtient les avantages d'une images légère 8 bits et d'une presque transparence 32 bits. L'effet de transparence (ici ombre et lueur) est parfaitement ignoré par les navigateurs anciens permettant ainsi d'utiliser cette image en toute circonstance sans se soucier de la dégradation.

Précaution

Vu que les pixels même légèrement transparents sont totalement ignorés par les vieux navigateurs, il faudra se méfier des images translucides. Comme le montre l'exemple ci-dessous, une image à 50% de transparence (ou même quelques pourcents !) sera totalement ignorée.