Commentaires sur : Images, PNG et GIF

Par : thierry

thierry — Thu, 20 May 2010 23:40:14 +0000

excellent billet , merci pour toutes ces informations !

Par : gui221

gui221 — Tue, 05 Jan 2010 16:00:57 +0000

Merci pour cet article sur le png 8 qui m’a permis de faire des images légères et compatibles IE6. Mais il me manque une information que j’avais trouvé il y a longtemps: je ne sais pas comment rendre mon image PNG8 transparente ?
J’utilise GIMP et n’ai pas d’autre logiciel et ne peut en installer d’autre. J’avais trouvé sur un site le moyen de le faire mais suis incapable de retrouver l’information.
Merci.

Par : Hubert

Hubert — Thu, 18 Dec 2008 17:26:56 +0000

si je comprends bien:
La transparence alpha ne marche pas avec IE6, la transparence d’index si.
On peut donc avoir un fond transparent, en transparence d’index, avec IE6.
En transparence d’index, les couleurs opaques (laissant passer « un peu » la couleur de fond) ne fonctionnent pas sous IE6 (sauf à reproduire l’effet si on connaît la couleur de fond finale, mais c’est pas de la transparence, c’est une évaluation du mélange de couleur que ça donnera au final).
Le cas typique ce sont les effets d’ombre, une transition de plusieurs pixels opaques aux bords de l’image, ou encore (dîtes-moi si je me trompe) l’effet anti-aliasing. On peut le faire en png8 mais ça ne marchera pas sous IE6. Pourquoi pas sous IE6! j’en sais rien, mais ça a 2 avantages: même si sous IE6 ce n’est pas nickel* ça l’est avec les autres navigateurs, 1/ ça permet de ne pas utiliser de hack IE6 (css, js ou propriétaire) 2/ c’est super léger.
=> pour ses performances 2 bonnes raisons d’utiliser png8 en transparence d’index plutôt que png32 (suivant la dénomination Fireworks) en transparence alpha. Et ceci quelque-soit le navigateur (cqfd?)

*ça donnera l’impression qu’une courbe été découpée en « escalier », et c’est quand même pas très gênant sous IE6, (dont l’interface est déjà bien moche, là je m’égare).

à tous les mac users cette page aide à imaginer ce que ça donne sous IE6:
http://www.sitepoint.com/blogs/2008/03/20/making-ie6-friendly-png8-images/

Je note au passage que Adobe a racheté Macromedia, qu’ils nous ont pondu deux versions depuis (CS3 et 4) mais que les compatibilités entre logiciels restent du grand n’importe quoi. Vu le prix de ces apps dîtes professionnelles, c quand même scandaleux, qu’on ne puisse pas en sortie de ces usines à gaz, avoir des images « performantes ».

Par : Hubert

Hubert — Thu, 18 Dec 2008 16:06:52 +0000

Merci beaucoup!

Par : Éric

Éric — Wed, 17 Dec 2008 23:34:07 +0000

Alors, je parle de PNG24 parce que c’est le nom du format, mais il s’agit bien de 3 couleurs en 8 bits plus une transparence en 8 bits elle aussi, soit 32 au total.

La question de concordance entre le fond et l’image ce peut être deux choses :

- Le passage en PNG8 qui, vu qu’on diminue le nombre de couleurs, tente de faire une approximation au mieux au lieu d’utiliser la couleur exacte. Ca arrive quand l’image de base, elle, contient plus de 256 nuances. Que ce soit dans Photoshop ou Fireworks, il y a moyen de fixer une couleur arbitraire dans la palette et palier ce problème.

- Le profil de couleurs, ou le gamma utilisé. C’est stocké dans les méta données de l’image, les navigateurs ne savent pas ou mal le relire, en général le supprimer corrige tout problème. Les outils type pngcrush savent faire. Ces profils sont utiles pour des vrais « images », pas pour des éléments de fond (dans un fond l’important n’est pas d’avoir des couleurs éclatantes ou justes, mais d’avoir les mêmes que l’élément d’à côté).

Après il reste la transparence binaire et les couches alpha. Transparence binaire c’est « le pixel est en couleur ou transparent, pas entre les deux ». C’est une entrée spécifique dans l’index. C’est l’équivalent du GIF. Alpha c’est de la semi-transparence, ton pixel a de la couleur mais on voit à moitié en dessous, comme un verre de couleur.

Sur ce qu’il est préférable de faire, tu peux te reporter à http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/

Mais au final oui, sans bidouille à la AlphaImageLoader (que vous ne devriez pas utiliser), le PNG8 n’aura pas plus de possibilité que GIF sous IE6.

Par : Hubert

Hubert — Wed, 17 Dec 2008 20:04:19 +0000

Autre question: si j’utilise smush.it aurais-je besoin de pngcrush ou de optipng? Le pauvre site de smush.it un jour ou l’autre il en aura marre de payer de la bande passante pour des nazes comme moi qui savent pas optimiser les images en ligne de commande ;-) ni avec Fireworks d’ailleurs :-(
Prix Nobel des Performances pour smush.it!

Par : Hubert

Hubert — Wed, 17 Dec 2008 19:59:02 +0000

Salut
plus je relis les articles sur le png, plus je suis paumé! Je bosse avec Fireworks 8.
Je suis sûr que je me plante depuis le début de mon utilisation du png32. Or ici il n’est jamais fait mention du png32. Ici on parle de png8 et de png24. Or dans Fireworks en 24 pas de transparence. Et en png8 je me retrouve toujours avec le même doute (qu’en gif) transparence d’index ou alpha? Je sais vaguement que c’est une histoire de concordance entre la couleur de fond et les bords de l’image. J’avais bien constaté aussi des différénces de couleurs avec les maquettes des clients (en .ai illustrator), là je comprends qu’il s’agit d’une histoire de profil. Si en plus on prends en considération IE6 et que je lis plus haut « PNG8 avec une transparence binaire dans la palette de couleurs, et vous récupérez la compatibilité avec MSIE 6″ Ah OK c’est comme du gif alors? Et pas de problème avec IE6. Bon pour me sortir de ma pétaudière une simple question: transparence binaire = INDEX ou ALPHA?
MERCI!!!

Par : Éric

Éric — Mon, 15 Sep 2008 17:17:09 +0000

Oui, mais sur les tous petits pictos la différence de taille est faible (vu que l’image en elle même est toute petite), quasiment toujours négligeable.
Après ça dépend du contenu même de l’image.

Sur la raison, la palette et les entêtes du PNG prennent plus de place. Quand l’image est petite, ça devient important par rapport au contenu de l’image et le PNG est un chouiat plus gros.

Par : Emmanuel Clément

Emmanuel Clément — Mon, 15 Sep 2008 13:56:51 +0000

> PNG est meilleur dans tous les cas

Je tempèrerais un peu quand même : les tests que j’ai pu réaliser entre GIF et PNG semblent m’indiquer que plus l’image est grande, plus PNG est intéressant niveau poids, et inversemment, plus elle est petite, plus GIF l’emporte (au niveau de petits pictos).

Je n’ai aucune idée du pourquoi-comment de la chose ! Et je parle bien sûr à qualité égale et une fois les optimisations-compressions optimales faites.

Par : Damien

Damien — Tue, 09 Sep 2008 22:06:21 +0000

oui j’ai bien noté tout ça, c’était plus pour l’anecdote qu’autre chose (au passage je viens de faire en sorte que tous les éléments statiques soient accéder via un sous-domaine pour éviter le cookie et maximiser le téléchargement parallèle et puis j’utilise un sprite où il n’y a vraiment pas photo entre GIF et PNG : 3,1ko contre 1,4ko)

Bravo pour votre blog très intéressant.