Rendre transparents tous les PNG sous Internet Explorer

Rubrique Développement Web

J’ai testé plusieurs solutions alternatives pour simuler la transparence des PNG sous Internet Explorer. Chacune possède ses avantages mais aucune ne propose un solution complète notamment par rapport aux images de fond en CSS. Après un petit mix de toutes ces astuces, voici un petit script simple, et j’espère complet.

Publié il y a déjà trop longtemps…

Un des gros problèmes d’Internet Explorer est qu’il ne gère pas les degrés d’alpha des images PNG. Or, les PNG offrent des possibilités de transparence qui pourraient réellement donner un plus au niveau graphique. Malheureusement, la carence d’Internet Explorer freine considérablement son développement.

Pour comprendre ce qu’est une image PNG et sa non prise en compte par Internet Explorer, voici une petite illustration d’une image PNG affichée dans Firefox et Internet Explorer sur un fond rouge (#F00).

Remplacer le gris immonde d’Internet Explorer

Pour eviter d’avoir le gris par défaut qu’affiche Internet Explorer, il est possible de modifier les en-têtes de l’image PNG. Il set possible de définir par quelle couleur Internet Explorer remplacera la transparence alpha.

Pour ce faire il faut utiliser un petit logiciel tel que TweakPNG qui va permettre au navigateur de Microsoft d’afficher la couleur de votre choix.

Pour réaliser ce petit tour de passe-passe il vous suffit de suivre le tutoriel 32-bit PNG degradability in IE sur Phonety.

Une solution efficace tant que votre image reste sur un fond uni de couleur.

Une solution pour simuler la transparence des PNG sous Internet Explorer

Pour palier à ce problème, il faut utiliser le filtre Microsoft ImageAlphaLoader. Une parade un peu barbare mais efficace. Le principe est de remplacer les images PNG par des <div> dont l’image PNG est établie en fond. Divers méthodes existent pour résoudre ce problème facilement à l’aide d’une petite fonction Javascript.

Quelques liens utiles :

Avec un Javascript : PNG in Windows IE: How To Use
Avec un fichier HTC : PNG Behaviour
En CSS : Cross-browser semi-transparent backgrounds (non valide).

Une solution pour les images PNG en background CSS

Ces astuces fonctionnent très bien pour les images présentes directement dans le code XHTML via la balise <img />, mais avec les images PNG de fond transparentes en CSS, qu’en est-il ?

L’excellent site A List Apart nous présente la méthode propre et efficace d’Oak Sanderson dans l’article que je vous conseille Cross-Browser Variable Opacity with PNG: A Real Solution de Michael Lovitt. Cette méthode permet de simuler aussi la transparence alpha des PNG sur les images de fond, comme on peut le voir dans l’exemple de <div> translucide.

Méthode efficace, mais peu pratique et flexible. En effet, il est nécessaire de déterminer chaque image de fond en JavaScript. Or, si le JavaScript est désactivé sur votre navigateur pour une raison quelconque, vous n’aurez pas d’image du tout ! Problème.

Une solution complète ?

Fort de ses diverses solutions, j’ai cherché s’il y exitait une solution complète capable de combiner toutes ces solutions de manière intelligente et bien pensée. Aucun résultat.

Etant donné que l’on n’est jamais mieux servi que par soi-même. J’ai adapté chacune de ses solutions à mon gré pour n’avoir qu’un seul fichier JavaScript gérant toutes les possibilités.

Voir l’exemple

Ma solution est donc concentrée dans un fichier Javascript qui automatisera ces tâches au chargement de la page.

Télécharger le fichier Javascript

Configurez le fichier dans les premières lignes de code.
Placez le fichier ci-dessous sur votre serveur.
Placez un appel de ce fichier entre les balises <head> du type :
<script type="text/javascript" src="/wp-content/images/developpement-web/png-transparent-background-css-hack-internet-explorer/pngfixall.js"></script>.
Choisissez au mieux vos couleurs de remplacement de transparence d’Internet Explorer via TweakPNG.

Cette méthode comporte maleureusement quelques désagréements notables :

Mauvaise prise en compte des liens
Défilement vertical saccadé
Un blocage au chargement de la page car le script parcourt la page HTML ainsi que les feuilles de style CSS associées
Une non prise en compte des backgrounds répétés en mosaïque

Un bilan mitigé en attendant Internet Explorer 7

Toujours est-il que, sans vouloir faire de l’anti-Billou, Internet Explorer freine le développement des PNG du fait de sa notoriété. Ce qui rassure, c’est que la prochaine version n°7 comprendra correctement la transparence des PNG comme on peut l’espérer dans l’article IE7 Transparent PNG Implementation d’IEBlog.

Ceci dit, il faudra tout de même attendre quelques années avant que les versions 6 et inférieures d’Internet Explorer ne disparaissent de la toile…

Article rédigé par Samuel Le Morvan.

Ce que nos lecteurs en disent :

Ben

Yes, merci, de tres bonnes sources et resources! ;)
je vois partout (pour ce pb d’alpha de png) "en attendant IE7"!
Mais je doute que l’arrivée de IE7 soulage vraiment tous les "webdesigner" :( pour cet alpha…
Athéna

L’idée est bonne mais complexe, autant à ce niveau enregistrer en jpg avec le fond qui convient. Moi aussi j’attends avec impatience qu’IE modifie le PNG. Je pense qu’ils le feront prochainement, firefox leur fait du mal rien qu’à ce niveau sans compter tout ce que propose se logiciel.
Merci pour l’info
an.archi

mmm… Salut !

Peut-être devrais-tu préciser quelque part que IE gère la transparence des PNG en 8 bits, mais pas des PNG 24 bits, et que le problème se situe bien à ce niveau là.
Toz'Man

Bonjour,

En cherchant des information sur le problème, je suis tombé sur le très bon site de Pixtyle. Un article est consacré au PNG transparent sous IE :

noyau.pixtyle.net/viewtop…

En espérant que cela puisse aider ;o)
elentarion

Ce tuto est génial un grand merci parce que j’en avais vraiment besoin pour mon site
tigrou

Tres interressant! ma solution preferée est celle des CSS
Sinon, l’ideal en attendant serait de savoir comment enregistrer un png 8bit
sur Inkscape j’en ai deja enregistré, mais par hasard, je n’ai pas reussi a le reproduire, y a t -il une palette a respecter ? (quand on utilise seulement les couleurs web, ça marche pas non plus), aucun logiciel a ma connaissance ne permet d’enregistrer expressement un png en 8bit :( (meme lorsque on passe en mode couleurs indexees sur Gimp, ça ne fonctionne pas non plus)
faudrait demander a Maurice Svay :)
http://www.libpng.org/pub/png/sp...
Faudrait demander a Maurice Svay :p
Dragon83

J’ai déjà reuci une fois avec The Gimp mais … je ne me rappelle plus comment.
J’avais trouvé cela avec Google.
Philippe

Les informations contenues dans : Rendre transparent tout les PNG sous Internet Explorer sont très interessantes.

Internet Explorer version 7 supporte le PNG maintenant ! Dommage qu’on ne puisse pas forcer le téléchargement de cette nouvelle version.

Et, en effet, il faudra tout de même attendre quelques années avant que les versions 6 et inférieures d’Internet Explorer ne disparaissent de la toile
dlabaaalle

Hello,

Merci d’avoir passé du temps a faire ce petit script.
Toutefois quelques bugs (partie background en css) :
D’abord l’image ne doit pas avoir de majuscule, pour y remedier il faut modifier les lignes :
BkgroundImg = Rules[j].style.background(*).match(‘[a-z0-9_]*\.png’);
> L’expression réguliere devrait plutot etre : ‘[a-zA-Z0-9_]*\.png’

On peut aussi se passer de la variable ImgsPath, il suffit de mettre cette expression régulière : ‘[a-zA-Z0-9_/]*\.png’ il gerera les images avec leur chemin d’acces, je trouve ca plus souple.

Malgrè tout je ne suis pas satisfait de l’expression régulière, elle devrait prendre tout ce qui est entre ‘url(‘ et la parenthèse fermante ‘)’, mais je ne touche pas trop ma bille en RegEx. :-( Si quelqu’un sait faire…
dlabaaalle

PS: Le probleme des liens qui ne fonctionnent plus peut etre contourne en rajoutant ceci dans les css :

a {
position: relative;
z-index: 1;
}

Du moins pour moi ca a fonctionné.
dlabaaalle

Je profite de la moderation a postiori :

pour que ca marche (css/background) il faut aussi que la classe ait un haslayout avec IE,
ca se fait en donnant la taille / largeur ou si elle est inconnue, en rajoutant
height: 1%;

Malgre tout si on veut faire un fond qui se repete verticalement Xou horizontalement il peut rester une ligne / colonne vierge a la frontiere.

:-(
Bonzelfe

Merci pour ce tuto clair, simple et accompagné d’un tres bon exemple…
C’est exactement ce que je recherchais… Et le tout me permet enfin d’afficher les png sour IE…Merci encore
Adysone

Je ne comprends pas… J’ai copié-collé le code source de l’exemple. Du moins, presque, j’ai adapté, étant donné que je touche un peu ma bille quand même. J’appelle donc le fichier JS dans l’entête (<head></head>), puis j’appelle les fonctions PngFixImg() et PngFixBkground() dans le onload() du <body>. Strictement aucune réaction de la part de mon "ami" IE. Faut-il que la balise contenant la propriété CSS background-image possède un id ?
Je ne sais pas si tu utilises tes fonctions JS sur ton blog, mais sous IE, l’arrière plan principal n’est pas transparent non plus.

Merci !
Réalisation sites internet

Article intéressant. Merci pour cet aide précieuse concernant ce fameux bug d’internet explorer avec les PNG
galima

Internet Explorer a toujours su afficher les PNG 24. Et d’une manière on ne peut plus simple.
Voir le lien: midiwebconcept.free.fr/PN…
Joel

support.microsoft.com/kb/…

Ca marche :)

Dans le CSS, il faut garder vos paramètres et rajouter celui-ci pour pas que ca beug sur IE.

_background: none;

Enjoy
Joss850csi

*** Voilà j’ai trouvé ***
Alors je vous donne la solution qui m’a pris plus de 4 heures, oui je rigole pas, a cause de IE j’ai plus envie de rigoler, quel merde ce IE.
Bon je commence :
En fait si les liens ne fonctionne pas avec des images en PNG 24bits c’est tout simplement (he oui simplement) car il y à une images PNG declaré dans votre CSS. Je m’explique un peu mieux pour les lent du cerveau (lol) : En fait pour que les liens fonctionnent bien il ne faut declarer aucun fichier PNG dans votre CSS avec la fonction :
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src=’imgage.png’);

Au lieu de faire cela, vous laissez les autres declaration comme :
#img-png {
position: absolute;
top: 8px;
left: 437px;
height: 60px;
width: 468px;
}

et vous mettez votre image dans le code html de la page comme n’importe quel autre image et ensuite vous mettez l’intitulé de votre id exemple :
<img src="img/4rd.png" border="0" id="img-png">

puis vous faites votre lien comme d’habitude pour une image classique.

Vous avez meme pas besoin de mettre le lien en position relative, ça passe direct.

Par contre il vous faut les fichiers pngfix.js et pngfixall.js que vous declarer dans le Head de votre page html :
<!–[if lt IE 7.]>
<script defer type="text/javascript" src="js/pngfix.js"></script>
<script defer type="text/javascript" src="js/pngfixall.js"></script>
<![endif]–>

Voilà n’hesitez pas à tester vous aurez une bonne surprise en cas de pb alors demandez moi : ruedesnews(at)gmail.com
GrosBedo

Merci Joss850csi pour l’info, mais pour ceux qui ont besoin de les déclarer comme background css ?
Sinon comme le disait dlaabaaalle, on peut juste rajouter ceci:

a {
position: relative;
z-index: 1;
}

A placer dans le code CSS. Cela devrait faire revenir les liens au premier plan pour les rendre clickable.

Sinon merci beaucoup a l’auteur pour cet article et aux différents commentaires très utiles pour quiconque ayant besoin d’une solution sur le sujet =D
atazia

Bonjour,

J’aimerai savoir si on peut en javascript modifier une couleur png.
Je m’explique, j’ai une png transparent (fond blanc et image transparente) je lui applique une couleur dynamiquement :

function changeimage(couleur1) { document.getElementById(”visuelprincipal5″).style.backgroundColor=couleur1;
}

Le problème c’est que mon fond reste toujours blanc. Comment faire pour le changer dynamiquement comme mon image transparente.

Merci
valerian

Bonjour,

Personnellement j’ai trouvé cette solution : http://www.twinhelix.com/css/iep...

Elle permet notamment l’utilisation de png en background, en utilisant seulement la proriété behavior dans le css.

Voir la version 1.0 RC5 qui marche très bien pour moi.
Cyril

Bonjour
J’avais également un probleme avec mes png24 qui n’étaient pas transparents sur ie6. J’ai applqué alors l’astuce indiquée ci-dessus ce qui a résolu mon problème. Mais maintenant mes images survolées ne fonctionnent plus (mes liens si !) quelqu’un peut-il m’aider?
merci
cyril

je viens de me rendre compte que certaines image survolée, en jpg, marchent et celles en png24 non.

Les commentaires sont clos.