Transparent PNG & IE (optimisation)

Internet Explorer 6 n'affiche pas correctement les images PNG transparentes, voici des solutions !

Autant le dire tout de suite : il n'y a pas de solutions miracles ! !

La première des solutions est d'utiliser une image GIF : ça peut paraître rétrograde, mais l'image sera lu correctement partout et elle sera moins "lourde" qu'une image PNG qui est assez lourde.

Sinon, un article d'Alsacréations (toujours au top) donne de bonnes pistes.

A priori, la meilleure solution est d'utiliser des images en PNG 8 bits.
Il n'est pas possible d'utiliser Gimp pour créer des images PNG 8 bits avec transparence, les PNG 8 bits générés avec Gimp ressemble à du GIF. Voir l'article du site En 1 heure, et aussi la documentation de Gimp.
L'alternative est d'utiliser la ligne de commande avec pngnq (packagé dans Ubuntu, donc s'installe avec un sudo aptitude install pngnq ).

On peut trouver plus d'informations sur les images PNG et l'optimisation dans ces articles (en Anglais) :

• Optimizing Images chapitre (10) d'un livre d'O'Reilly.
• Un article de Smashing Magazine, d'autres méthodes d'optimisations en utilisant Photoshop au départ.
• Un état des lieux sur les différents formats des images PNG et leur utilisation dans les browsers web , en images !
• YSlow : l'optimiseur de Yahoo

Il y a aussi d'autres scripts basés sur l'AlphaImageLoader (que celui donné par Alsacréations) :

• les explications de Micro$oft
• une vieille version de PNG  Fix, cf. article de comment ça marche, et le site de l'auteur. Ce dernier indique que son script est daté et pointe vers le script suivant.
• SuperSleight de Drew MacLellan (en anglais), donné par l'auteur précédent.
• une autre version (en anglais) en utilisant un behavior (CSS de MS), comme dans la solution script donné par Alsacréations.
• encore un script plus toute une explication du problème (en anglais).
• et une dernière solution avec VML : sans script mais laborieuse.

Enfin pour information, Internet Explorer n'est plus le premier browser en Europe (depuis ce mois-ci), d'après StatCounter.

En résumé, voici ce que j'utilise pour obtenir des fichiers PNG de taille réduite et visibles dans IE6 :
(mais dans certains cas -petit fichier, en particulier- un fichier GIF sera une meilleure solution à tester au cas par cas)

$ pngnq mon_image.png && pngcrush -brute -q mon_image-nq8.png mon_imageN.png

Bon affichage d'images ! !