Un précédent article montrait les différences entre PNG et GIF pour le stockage d’images pour le web. Les plus flagrantes sont certainement la possibilité d’avoir des images en “couleurs vraies” et le support de la transparence progressive, permettant l’affichage d’images fidèles à leur original.
Pour le web, la transparence est une caractéristique clé pour faire des superpositions complexes et des effets graphiques sophistiqués. Cependant, les différences d’implémentation dans les différents navigateurs font que ce format peine à décoller. Dans cet article, nous allons voir comment exploiter au mieux la transparence qu’autorise PNG.
Avant toute chose, il faut distinguer deux types de transparence: la transparence binaire et la transparence alpha.
La transparence binaire est en tout point similaire à la transparence qu’on connait avec le format GIF. Elle permet de rendre un pixel totalement transparent ou totalement opaque. Ce type de transparence convient parfaitement aux images avec des bords nets, comme les images en pixel-art.
La transparence alpha va plus loin en autorisant une translucidité progressive, avec 255 variations possibles. Elle tire son nom du “canal alpha”, canal qui permet de stocker le bit de transparence en plus des traditionnels bits Rouge, Vert et Bleu.
Dans le format PNG, il faut savoir que le mode de transparence est intimement lié au mode de couleurs de l’image. Plutôt qu’un long discours, le tableau qui suit résume bien les combinaisons possibles:
| Mode de couleurs | Transparence binaire | Transparence alpha |
|---|---|---|
| Niveaux de gris | Disponible | Absent |
| Couleurs vraies | Disponible | Absent |
| Couleurs indexées | Absent | Disponible |
| Niveaux de gris avec canal alpha | Absent | Disponible |
| Couleurs vraies avec canal alpha | Absent | Disponible |
Pour les images en niveaux de gris et en couleurs vraies, on peut utiliser la transparence binaire en désignant une couleur (ou un niveau de gris) comme couleur de transparence. Par exemple, si on désigne la couleur verte (valeur rvb(255,0,0) ou #ff0000) comme couleur de transparence, tous les pixels de cette couleur seront vus comme transparents par la suite.
Le cas des couleurs indexées est plus complexe. Chaque entrée (255 au maximum) de la palette se voit assignée une valeur de transparence alpha. La transparence étant définie au niveau de la palette et non au niveau du pixel, il n’est par conséquent pas possible d’avoir deux pixels de même entrée dans des transparences différentes. Par exemple, si l’entrée 42 est un rouge pur (rvb(255,0,0) ou #ff0000) et de transparence 50%, tous les pixels qui utilisent cette entrée seront rouges et semi-transparents. Pour obtenir des rouges de transparences différentes, il faut définir plusieurs entrées rouges et leur assigner des transparences différentes.
Les modes avec canal alpha sont certainement les plus souples. Chaque pixel contient en plus de la couleur une information sur sa transparence. On peut alors imaginer avoir une image totalement noire (valeur rvb(0,0,0) ou #000000) mais dont une partie permettrait de voir à travers.
En pratique, peu de logiciels permettent de régler la transparence aussi finement. Ils se contentent généralement d’associer une transparence binaire aux couleurs indexées et une transparence alpha aux couleurs vraies et aux niveaux de gris. Le choix de la transparence est donc imposé par le mode de couleurs.
La transparence alpha étant plus souple (car on peut simuler un transparence binaire en n’utilisant que des valeurs alpha extrêmes), elle est généralement à privilégier.
Comme pour les autres standards, l’implémentation du format PNG varie selon les constructeurs. La recommandation datant de 2003, les navigateurs sortis avant cette date fournissent un support limité de ce format.
Parmi eux, on peut citer Internet Explorer 6 qui ne permet pas l’utilisation de la transparence alpha. Le mélange avec l’image d’arrière plan est alors remplacé par un fond gris. Il existe néanmoins plusieurs solutions pour contourner ce problème spécifique.
La première solution consiste à utiliser une caractéristique de PNG qui permet de stocker la couleur d’arrière-plan (dans le “chunk” bKGD pour les experts). La couleur grise est alors remplacée par une couleur de votre choix et c’est cette teinte qui sera utilisée pour le mélange. Malheureusement, cela ne résout pas vraiment le problème puisque l’arrière-plan n’est pas mélangé avec l’image pour donner l’impression de translucidité. Tout ce que nous avons fait, c’est remplacer la couleur grise (valeur par défaut lorsqu’aucune couleur d’arrière plan n’est définie) par une couleur plus acceptable.
La seconde solution implique l’utilisation d’un mécanisme propre à Internet Explorer : les “behaviors” ou comportements. Il est alors possible de modifier le comportement des images pour les obliger à utiliser un filtre spécifique pour appliquer la transparence. Malheureusement, cette technique a plusieurs limitations. Ceux qui veulent essayer cette technique peuvent consulter l'article sur WebFX.
Pour le moment, il est donc très difficile d’afficher des images PNG avec transparence alpha avec Internet Explorer 6. La solution viendra sûrement avec la prochaine version, Internet Explorer 7.
Le format PNG dispose de fonctionnalités puissantes pour la création d’images transparentes mais pour le moment seule la transparence binaire est totalement sûre pour une utilisation dans tous les navigateurs.
Ceux qui voudront immédiatement utiliser la transparence alpha pour créer des effets sophistiqués devront être certains de maîtriser le type de navigateur ou bricoler avec les différentes solutions proposées sur le web. Les autres attendront que l’implémentation totale de PNG soit plus largement répandue.