Gestion des PNG dans Internet Explorer
Si le format PNG a tant tardé à s'imposer sur internet c'est probablement à cause de son mauvais support sur IE. On rencontre en particulier 2 problèmes majeurs:
- une coloration plus foncée des PNG exportés depuis photoshop
- le non-support de la transparence progressive sur les versions d'IE inférieure à la 7
La coloration trop foncée
Photoshop insère dans le fichier PNG une information gamma qu'IE interprète et modifie donc légèrement la couleur de l'image.
Démonstration:
Le premier carré a été exporté au format gif, le deuxième png, depuis photoshop. Sur IE on constate une différence de couleur alors que, sur les autres navigateurs, la couleur des deux carrés est bien identique:
Remédiation:
Il suffit de retirer l'information concernant le gamma du fichier PNG. TweakPNG permet de le faire simplement:
- ouvrir le fichier PNG dans tweakPNG
- click droite sur gAMA
- choisir delete
- sauvegarder (ctrl+s)
En revisualisant le fichier PNG dans IE, on s'aperçoit que la couleur est maintenant correctement interprétée:
La transparence progressive
Les versions d'IE inférieure à la 7 ne savent pas nativement interpréter la transparence progressive des PNG. A la place, un fond gris s'affiche:
Microsoft à développé un filtre pour pallier à ce manque depuis internet explorer 5.5. On a aussi moyen de limiter les dégâts en définissant une couleur de fond autre que le gris par défaut.
définir une couleur de fond
Afin que la non-transparence se voie le moins possible, on peut attribuer la couleur de notre choix. De nouveau, tweakPNG permet de le faire simplement:
- ouvrir le fichier PNG dans tweakPNG
- dans le menu INSERT, choisir bKGD (background-color)
- double cliquer sur le bKGD nouvellement crèé
- choisir la couleur voulue
- sauvegarder (ctrl+s)
En revisualisant l'image sur IE6-, on constate qu'il applique la couleur de fond indiquée:
Rendre la transparence progressive à l'aide du filtre
Si le filtre permet, dans certaines situations, de rendre la transparence progressive sur IE 5.5 et ie6, il n'en reste pas moins limité. Il ne permet pas de rendre transparente l'image en elle-même mais applique l'image à un élément entre son fond et son contenu. Il est à noter que l'élément en question doit être doté de layout. On peut choisir entre 2 options de dimensionnement:
- scale: l'image est étirée sur toute la surface de l'élément
- crop: l'image n'est affichée qu'une seule fois depuis le coin supérieur gauche de l'élément
Appliquer le filtre pour un balise img
Dans le cadre d'une image, il est difficile d'appliquer le filtre directement à l'élément img puisque l'image vient se poser par-dessus. on peut cependant jouer avec les propriétés de padding, de width et de height de l'image. On applique un padding vertical et horizontal égal aux dimensions de l'image que l'on met à 0. Cela aura pour effet de faire disparaitre l'image "réelle" et de ne laisser apparaître que le fond de l'élément img auquel on appliquera le filtre. Exemple:
Et le css pour IE6:
width:0;height:0;
padding:150px 200px 0 0;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');
}
Attention, si le filtre fonctionne depuis IE 5.5 d'après la documentation Microsoft, sauf erreur, IE 5.5 n'accepte pas d'accorder un padding à une image