Les images au format PNG offrent tout un tas de choses que n'ont pas les JPEG et les GIF !... mais voilà, IE6 (Microsoft Internet Explorer 6), ne sait PAS afficher correctement les PNG !

En effet, il suffit que l'image PNG contienne des zones de transparences et... c'est foutu ! Le fond apparait alors GRIS MOCHE (et c'est pas parce qu'on est en 2010, quand je rédige cette page, qu'une mise à jour viendrait corriger le problème. Ce qui fait que ... moi, comme je suis encore avec IE6, certains sites m'apparraissent moche gris parce que le concepteur ne sait pas, ou ne veut pas, mettre le code qui va bien, et qui fait une belle transparence aux images PNG).

Il existe quelques solutions pour éviter ça. Des lignes de codes très compliqués pour faire appel à une fonction de DirectX installé sur votre ordi... ou autres...

Pour comprendre comment se comporte IE6 avec des PNG, il faut, bien sûr, visiter ces pages avec IE6 ! Si vous êtes avec Opera, Safari, Firefox... l'effet "GRIS MOCHE" ne fonctionnera pas !


Pour mon expérience, j'ai fait 4 images PNG :

1. PAS de transparence incorporée, avec un fond BLANC.

2. PAS de transparence incorporée, avec un fond ROUGE.

3. AVEC transparence incorporée, fond BLANC*.

4. AVEC transparence incorporée, fond ROUGE*.

(* Je précise la couleur de fond, mais comme les images sont transparentes, évidemment, le fond n'apparait PAS si la page contient un code de transparence, et le fond apparait GRIS MOCHE si la page n'a pas de code de transparence. Si la transparence fonctionne correctement, que l'image PNG ait été créée avec un fond rouge ou noir ne changera rien, le fond sera de la même couleur que la page, c'est la belle transparence, qui offre aussi la possibilité d'avoir de belles ombres... Si la transparence ne fonctionne PAS, alors le fond sera gris, pour les PNG AVEC transparence et sera de la couleur du fond de l'image pour celles, non transparantes, qui ont une couleur de fond !)



... pour mieux comprendre ? Voici mes 4 images PNG sur :

1. Page BLANCHE sans aucun code de transparence : ici

2. Page BLANCHE AVEC le code de transparence : ici

3. Page ROUGE sans aucun code de transparence : ici

4. Page ROUGE AVEC aucun code de transparence : ici