Fichiers d'icones de plus de 256 couleurs avec transparence

Hello,

Je travaille actuellement sur une interface qui utilise un grand nombre d'icones pour illustrer ses pages (ajout, suppression, formats de fichiers, etc). Il y en a actuellement près d'une centaine, chacune de taille 16x16 (pour info, c'est le pack Silk, de famfamfam. Mes fichiers sont en png32, donc avec plusieurs couches alpha.

Afin de limiter le nombre de requetes HTTP, j'utilise une seule et grande image qui contient l'ensemble des icones, les unes en dessous des autres. Et j'utilise cela couplé à une feuille de style qui joue sur le background-position.
Bien sur, j'ai automatisé tout le processus de création de l'image globale et des feuilles de styles avec un peu de PHP pour m'éviter la fastidieuse tache de rajouter des icones.

Vu que IE6 ne gère pas ce type de PNG, j'ai donc généré un autre fichier pour lui, en png8. Moins beau, mais au moins avec une simple transparence.

Bon, tout allait bien au début, mais maintenant que je commence à avoir beaucoup d'images, je me rends compte que la qualité baisse, mon image devient granuleuse.
Je générais mon fichier en png8 car je connaissais la limitation des 256 couleurs du gif, et sachant que le png n'avait pas de palette, je me disais que ça m'éviterait ce soucis. Manque de bol, on dirait bien que le png8 possède en fait une palette, ce qui ne m'avance guère.
J'ai ensuite cherché du coté des gifs animés. Chaque frame d'un gif animé possède sa propre palette, il me suffirait donc de faire un grand gif animé avec un delai de 0ms entre chaque frame pour avoir mon grand fichier, sans perte de couleur.
Malheureusemet, il semblerait bien que IE (et les autres non plus d'ailleurs) ne sache pas gérer un délai de 0, et me mets un délai minimum, ce qui fait apparaitre mes icones une par une à la suite, ce qui ne m'arrange pas non plus.

J'arrive donc dans une impasse, je crois que je vais devoir me résoudre à laisser des icones "moches" pour IE6.

A moins que l'un d'entre vous n'ai une solution pour ce problème (qui était quand même à la base, de limiter le nombre de requetes HTTP en fusionnant toutes mes icones en un fichier, et que cela soit propre, même sous IE6) ?

Bonjour,

- PNG-24 est en 16 millions de couleurs, pas de palette EDIT: PNG-32 est un terme abusif pour décrire un PNG-24 avec 8 bits de transparence.
- PNG-8 a une palette de 256 couleurs et peut être sans transparence, avec une couleur de transparence (exactement comme le GIF) ou un dégradé de transparence (seuls Fireworks et pngnq savent les créer mais tous les navigateurs savent les afficher, IE6 n'affichant que la couleur de transparence ce qui est toujours mieux qu'un immonde fond gris opaque )

Si tu souhaites conserver ton unique image, vois avec pngnq ou Fireworks qui font de petits miracles pour tromper l'oeil avec seulement 256 couleurs. Et tu dois pouvoir imposer des couleurs dans la palette, utile si ces programmes suppriment des couleurs flashy pour privilégier les blancs, gris, beige, ... J'ai déjà eu le cas où l'image était quasi-parfaite sauf l'unique couleur contrastée rouge réduite à un rose pale (le reste était vraiment à s'y méprendre).

Sinon il ne reste que la solution de faire 2, 3, 4, ... images en choisissant les icônes qui vont aller ensemble selon leur palette de départ. Bonjour l'algorithme pour choisir, sachant qu'en rajoutant des icônes une icône peut changer de fichier ce qui va impliquer des "remplacer massifs" dans le reste de tes fichiers ou de devoir les générer entièrement

EDIT2: j'oubliais une 3ème option: OptiPNG (ou PNGOUT selon les cas??) pour réduire le poids des PNG (optipng -o7 nomdufichier.png en ligne de commande). Même en restant en PNG-24, le poids peut énormément descendre.

Et une 4ème option est d'utiliser un sous-domaine images.example.com configuré pour servir exclusivement des images et du contenu statique. Avec lighttpd, pas Apache ni mod_rewrite
Modifié par Felipe (14 Jul 2008 - 09:52)

Hello,

Merci de ta réponse, il y a des pistes interessantes.

Je connaissais l'astuce de Fireworks pour le dégradé de transparence, mais comme justement j'automatise la création, je ne peux me servir d'un logiciel externe (même ceux en ligne de commande, le système sur lequel je travaille sera déployé sur différents serveurs qui n'auront pas forcément les commandes demandées, voire même peut-être même pas le droit d'executer de commandes, donc je cherche une solution full php).

La solution de grouper les fichiers en plusieurs petits fichiers de 256 couleurs est faisable, bien qu'un peu casse-tête... Mais me demandera de compliquer (et donc de grossir) la feuille de style associée pour préciser à chaque classe le fichier de background utilisé. Et puis cela me laissera encore plusieurs fichiers plutot qu'un seul, donc ça reste une mince victoire.
Je me demande si un tel développement pour une site petite amélioration vaut le cout que j'y passe tant de temps.

Pour le sous-domaine effectivement c'est un élement que je vais essayer d'intégrer. Cela dit, ça ne m'empeche pas de, en plus, fusionner mes images pour alléger ce serveur là

Et pourquoi ne pas ajouter un petit javascript pour IE6, qui lui permettrait d'afficher les PNG 24?

J'en avais un sous la main mais ces *** chez Free viennent de me bloquer mon compte sous prétexte que je n'ai pas de site dessus (juste 4 ou 5...). Si tu cherches dans la FAQ ou le tuto qui utilise une PNG24, il y a un lien vers un post du forum qui contient lui-même un lien vers ce fameux script.

SiDi a écrit :
Et pourquoi ne pas ajouter un petit javascript pour IE6, qui lui permettrait d'afficher les PNG 24?

Tymlis a écrit :
Afin de limiter le nombre de requetes HTTP, j'utilise une seule et grande image qui contient l'ensemble des icones, les unes en dessous des autres. Et j'utilise cela couplé à une feuille de style qui joue sur le background-position.

L'astuce du filter: pour afficher les PNG24 sous IE6 est incompatible avec le travail sur le background-position que j'effectue.

SiDi a écrit :
Et pourquoi ne pas ajouter un petit javascript pour IE6, qui lui permettrait d'afficher les PNG 24?

Faire un tour du côté de la FAQ du forum pour comprendre comment fonctionne ce type d'astuce (avec un filtre DirectX AlphaImageLoader), et quelles en sont les limites.

Hello,

Et un fichier gif destiné à IE6 c'est une bétise ?
Je suppose que cela dépend de(s) couleur(s) de fond que tu utilises, mais si le fond est uni, c'est peut-être une solution acceptable non ?

6l20 a écrit :
Et un fichier gif destiné à IE6 c'est une bétise ?
Je suppose que cela dépend de(s) couleur(s) de fond que tu utilises, mais si le fond est uni, c'est peut-être une solution acceptable non ?

Mes icones apparaissent sur plusieurs couleurs de fond différentes (blanc et gris principalement), mais ce n'est pas ça le vrai problème.
Les gif sont limités à une palette de 256 couleurs, or là j'ai environ 83 icones dans mon fichier, ce qui en fait plus que la limite autorisée, donc impossible d'utiliser le gif et de garder une bonne qualité d'icones.

Tymlis a écrit :
Les gif sont limités à une palette de 256 couleurs, or là j'ai environ 83 icones dans mon fichier, ce qui en fait plus que la limite autorisée, donc impossible d'utiliser le gif et de garder une bonne qualité d'icones.

Bah au pire tu fais un fichier PNG-32 (enfin PNG-24 avec couche alpha quoi), et pour IE6 uniquement tu bascules sur du PNG-8 ou du GIF (c'est kif-kif, quoi que le PNG puisse être plus léger si bien compressé). Dégradation gracieuse, tout ça.

Sinon, pas de solution miracle, si tu dois avoir de la transparence graduelle, ou même de la transparence binaire avec une image non indexée, et que tu ne peux pas utiliser de filtre AlphaImageLoader... ben ça ne marche pas, on efface tout et on recommence. Avec des images séparées, ou une dizaine d'images regroupant 6-10 icones par famille de couleurs, par exemple.

Tymlis a écrit :
donc impossible d'utiliser le gif et de garder une bonne qualité d'icones

Lorsque je prends cette image (toutes les icones du thème Silk de FamFamFam, 1,3 1mo) et que je demande à GIMP de me convertir ça en 255 couleurs indexées, j'obtiens un très bon résultat pour 95% des icones. Je crois que le résultat est légèrement meilleur en désactivant le tramage des couleurs, mais je n'en suis pas sûr.
Sur tes 83 icones, quelques unes passeront peut-être mal, d'autres seront ok. Donc si c'est pour faire un fichier pour IE6 uniquement, ça peut être pas mal.

Effectivement
Je vote pour les granules pour les IE6's users !

Florent V. a écrit :
Bah au pire tu fais un fichier PNG-32 (enfin PNG-24 avec couche alpha quoi), et pour IE6 uniquement tu bascules sur du PNG-8 ou du GIF (c'est kif-kif, quoi que le PNG puisse être plus léger si bien compressé). Dégradation gracieuse, tout ça.

C'est exactement ce que j'ai et ce que j'explique dans mon premier message

Au final il n'y a donc pas de solution miracle, je me dois de choisir entre :

1/ Faire à la main sous GIMP/Photoshop un fichier pour IE6 en gif de bonne qualité
2/ Laisser mon script php générer un fichier pour IE6 et obtenir une image granuleuse
3/ Laisser mon script php générer plusieurs fichiers pour IE6 regroupant chacun plusieurs images, en restant pour chaque fichier sous les 256 couleurs.

Les 3 solutions ont leurs défauts.
1/ Je ne peux pas me permettre de créer l'image sous GIMP à chaque fois que j'ajoute une icone à mon set et réecrire les règles de background-position: à la main, c'est beaucoup trop fastidieux.
2/ Les pauvres utilisateurs d'IE6 auront des images moches.
3/ Outre le fait que je vais devoir réecrire un script qui range mes icones par famille de couleur (déjà ça va pas être simple), je perds une partie du bénéfice de regrouper les images en un seul morceau, vu que je les redécoupe en plusieurs petits fichiers.

La solution 2 me parait la "moins pire". Ces icones ne sont utilisées quand dans l'interface d'admin et ne seront pas accessible au public. J'indique déjà aux utilisateurs de cet admin qui sont encore sous IE6 qu'ils feraient mieux d'en changer.

Ce topic était avant pour savoir si une solution miracle m'avait échapée