: css

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:

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:

carre.gifcarre.png

Remédiation:

Il suffit de retirer l'information concernant le gamma du fichier PNG. TweakPNG permet de le faire simplement:

En revisualisant le fichier PNG dans IE, on s'aperçoit que la couleur est maintenant correctement interprétée:

carre.gifcarre2.png

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:

coeur.png

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:

En revisualisant l'image sur IE6-, on constate qu'il applique la couleur de fond indiquée: coeurg.png

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:

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:

<img src="image.png" width="200" height="150" alt="text descriptif de l'image" />

Et le css pour IE6:

img {
  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

Appliquer le filtre sur une image de fond

Editer