Beaucoup de gens n’utilisent pas l’excellent format graphique PNG (le successeur libre du format GIF), surtout parce qu’Internet Explorer ne supporte pas bien la transparence de ce format (malgré le fait que la spécification du PNG est connue depuis... IE 4.0 !).
En fait, Internet Explorer supporte très bien une classe de fichiers PNG : les fichiers indexés, avec un seul niveau de transparence (complètement transparent ou complètement opaque).
En revanche, Internet Explorer n’affiche pas correctement les images PNG avec un canal alpha (256 niveaux de transparence).
Voici une façon de transformer les PNG avec un canal alpha pour qu’ils deviennent visibles correctement sous IE. Son seul défaut est que cela diminue le nombre de couleurs possibles de l’image à 256. Par contre, il ne faut pas oublier que le GIF est aussi limité à 256 couleurs. Cependant, le format PNG est complètement libre de tout brevet, contrairement au GIF.
Cette astuce est une traduction de l’article "Fixing transparent PNGs" de Wikimédia. Nous allons utiliser Gimp pour le faire. Cette ressource contient aussi la méthode AlphaImageLoader qui sous certaines conditions et compromis permet d’afficher correctement les images PNG avec un canal alpha sans la méthode décrite ici.
L’idée derrière ce truc consiste à incorporer à l’image la couleur d’arrière-plan sur laquelle cette image sera affichée, permettant ainsi de transformer la transparence en tons de la couleur d’arrière-plan.
Les saisies d’écran ci-dessous sont faites avec Gimp 2.0.
1- Ouvrir le PNG transparent avec Gimp. Créer un calque transparent et le placer à l’arrière de l’image.
2- Remplir le calque transparent avec la couleur grise #eeeeee. Cette couleur fonctionne bien avec un arrière-plan brillant, comme le blanc ; si l’image doit être affichée sur un fond noir, utiliser #000000, et ainsi de suite.
3- Se placer sur le calque supérieur, et fusionner les calques (fusionner le calque vers le bas). Dans l’exemple ci-dessous, on atteint ce menu par un clic-droit sur le calque supérieur.
4- Sélectionner la couleur choisie à l’étape 2 avec l’outil de sélection des régions par couleur.
5- Utiliser la gomme pour enlever toute trace de cette couleur. Soyez prudent, dans l’exemple ci-dessous, on voit que certaines parties de l’intérieur de l’image sont sélectionnées. La gomme peut donc les atteindre, dans l’exemple nous les avons contournées.
6- Convertir l’image qui est toujours en 24 bits en image indexée. Menu Image-> Mode-> Couleur indexées. Appuyez sur Ok pour confirmer. Vous pouvez choisir de ne pas utiliser de tramage couleur si le résultat vous satisfait : l’image utilisera moins d’espace stockage et donc moins de temps de transmission.
Voilà ! Votre image paraît maintenant transparente, et a conservé une certaine qualité depuis l’original. Bien sûr ce n’est pas parfait, pour que ça le soit, IE devrait suivre les standards comme les produits Mozilla (Firefox par exemple), Opera, Konqueror, Safari qui supportent sans problème les PNG transparents 24 bits qui sont bien entendu de bien meilleure qualité.
