[Résolu] "Transformer" le PNG en GIF pour IE.

Question

19 Jan 2008 à 10:39

Bonjour à tous.

Je n'ai pas vu de sujets a ce propos (peut-être ai-je mal regardé, si c'est le cas, excusez moi).

Bref...ce genre de script doit être trés simple je pense. Je cherche simplement un script permetant de permuter une image png, en image gif pour IE (donc en aucun cas un script pour gérer la transparence avec IE), mais de maniere localiser (donc ne pas transformer tous les png en gif).

Je ne peux pas mettre l'image en background dans mon CSS (du moins, techniquement, je le peux, mais il risque d'y avoir un affichage aleatoire d'images plus tard, donc j'aimerais savoir faire ca).

Ensuite, pourquoi ne pas tout simplement mettre du gif de maniere générale ? C'est simple, le rendu est beaucoup moins bon au niveau des contours.

Cela dit, si vous avez une méthode plus éfficace ? J'ai éssayé le script pour gérer la transparence sous IE, mais le resultat n'était pas térrible (mais ca vennait peut-être du script lui-même ? ).

Biensur, si possible, j'aimerais comprendre le code, pas seulement faire un bete copier/coller.

Je vous donne le lien de mon site : http://www.deathofart.info/

Le script en question est destiné au sofa. (Sinon, le site n'est pas terminé, surtout niveau CSS, donc ne vous inquietez pas si vous voyez des atrocités, c'est juste une multitude de tests. =D).

Merci, bonne journée.
Modifié par TheReverendEVIL (28 Jan 2008 - 11:33)

Felipe

Administrateur

20 Jan 2008 à 15:59

Bonjour,

1/ IE (IE6) gère parfaitement les PNG qui "ressemblent" à des GIF, c'est-à-dire les PNG-8 comportant une couleur de transparence.
2/ les GIF sont techniquement limités à une palette de 256 couleurs dont une pouvant être transparente.

Ton problème est celui qu'IE6 a avec les PNG-24 comportant une couche de transparence (synonymes: PNG-24 avec transparence 8 bit, PNG-24 avec niveauX de transparence, PNG-24 avec couche alpha ou enfin PNG-32) et dont parle la FAQ de ce Forum.
Avec les méthodes traditionnelles et si tu ne veux pas recourir à JS ou les filter d'IE6, il ne te reste effectivement qu'à convertir tes images en 256 couleurs dont une transparente. Mais dans ce cas, que tu convertisses des PNG-24 en PNG-8 ou bien en GIF, le résultat sera exactement le même Smiley cligne

(oui le Gif ça sert vraiment plus à rien, sauf -mauvaise nouvelle- avec les mobiles Smiley sweatdrop

)

Le problème, c'est qu'on utilise les PNG-24 quand il y a beaucoup de couleurs différentes (plus que 256) et que réduire à 256 couleurs c'est souvent ... moche.

Heureusement, il y a des algorithmes plutôt efficaces qui permettent de réduire 'intelligemment' le nombre de couleurs (en tout cas suffisamment bien pour berner l'oeil humain) et Fireworks est un de ceux-là. Il fait même beaucoup mieux puisqu'il permet de conserver la couche alpha (pour les "bons navigateurs") tout en rajoutant la couleur de transparence (qu'IE6 va gérer correctement en passant complètement à côté de la couche alpha, ce qu'on souhaite)

Ton image d'origine (PNG-24, 104 ko):
http://www.deathofart.info/sofa2.png

L'image créée avec Fireworks (PNG-8 "hybride", 33 ko):
upload/39-sofa4.png

Un autre programme PNGnq (*) est lui gratuit et open source mais malheureusement il fait n'importe quoi avec ton image de sofa Smiley biggol

, sans que je sache si c'est l'algo utilisé qui est insuffisant ou son implémentation qui est mal faite ... 'fin bref, je le testais pour justement éviter d'utiliser Fireworks $$$ mais c'est mal barré.

(*) pour installer PNGnq, il faut installer 2 fichiers DLLs à la main Smiley ohwell

C'est décrit dans ce billet: http://eriestuff.blogspot.com/2007/11/cross-browser-png8-alpha-transparency.html
Ce billet parle aussi d'utiliser OptiPNG pour optimiser quasi-systématiquement le poids des PNG que créent d'autres programmes (idéalement en ligne de commande avec l'option -o7) et il parle d'un SPLENDIDE article de SitePoint sur ces PNG-8 hybrides avec une couleur de transparence ET une couche alpha.

Pour info, le résultat "intéressant" Smiley rolleyes