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