Petite rectification, car j’aime bien les choses justes !
Le gif peut se reveler bien plus interessant que le PNG.
En effet pour des images ayant très peu de couleur, Gif continue d optimiser la palette alors que PNG ne dessendra jamais en dessous de 16 couleurs par palette.

Faites un test simple, prenez un gif en 4 couleurs et faites le meme images en PNG, observer les resultats. Faites tout les tests possibles et vous verrez que GIF est parfait pour les images inferieurs a 16 couleurs…

Donc comme toujour, avant de mettre un format en avant, et de dire qu il explose tout les autres formats, allez jusqu au bout des choses !

Sinon tout est juste dans ce billet.. Mais je pense que ma petite modulation est important histoire de donner toutes les cléfs pour faire le bon choix dans les bonnes conditions.

*ç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 ».

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.

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.

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.

Bravo pour votre blog très intéressant.

C’est ce que je nomme un exemple non significatif. On parle là de 65 octets de différence.

Ce n’est ni significatif en valeur absolue (en dessous du demi kilo-octet il y a des activités bien plus rentables) ni en proportion :

La requête + la réponse + l’image gif, ça fait 900 octets avec le cookie de session qu’il y a sur le site (mesuré sur mon Firefox). Une augmentation de 65 octets c’est 7%. On est loin du double là.

Bref, sur de très petites images il peut y avoir des différences, mais au final la valeur absolue est négligeable, surtout mis en rapport avec le couple requete/réponse qui fait facilement 1ko à lui tout seul.

Sur les images moyennes il peut aussi y avoir des différences en faveur de GIF mais rarement de plus de quelques dizaines d’octets.

Par contre sur toutes les autres le PNG gagne, et assez souvent avec des valeurs non négligeables que ce soit en valeur absolue ou en proportion du poids total.

http://www.fnordware.com/superpng/

http://www.webdesigner.com.fr/2006/07/23/137-gif-vs-png

Merci pour OptiPNG, je ne connaissais pas, j’utilisai moi aussi PNGOptimizer et, même après un passage de celui-ci, OptiPNG arrive encore à me faire gagner quelques Ko sur certaines images.

Pour le petit débat sur le rôle de l’intégrateur/du graphiste, ça dépend vraiment de la personne avec qui on travail et de comment on s’organise. Il n’est pas toujours évident d’expliquer au graphiste la découpe que l’on souhaite pour chaque image (lui expliquer le système de sprites, etc.) sans compter que ça prend pas mal de temps. J’ai souvent eut de mauvaises surprises et les retours vers le graphiste n’étaient pas rare.

Donc maintenant je lui demande directement les PSD, je fais la découpe moi-même, j’intègre les images au design et le graphiste me donne toutes ses critiques sur mon intégration après (trop forte compression des images, marges « pas tout à fait comme sur la maquette », etc.)

Ce n’est pas parfait, mais je trouve ça plus efficace.

A ajouter à la boite à outils pour une meilleure qualité du web (avec opquast, paris web, openweb,…j’en oublie…)…

D’ailleurs, je me dis qu’il manque des critères dans opquast permettant de vérifier l’optimisation d’un site web (vérification de la compression GZIP des pages html + css, …). Y! slow joue un peu ce rôle mais cela pourrait être une bonne idée de l’intégrer dans la démarche qualité d’opquast.

Merci pour tous ces bons conseils et explications…

PngOptimizer ou les autre logiciels d’optimisation de compression peuvent effectivement être la responsabilité de l’intégrateur. Ou mieux, automatiquement appliqués par le processus de publication.

Par contre je ne te suis pas sur la suite. Globalement tout ce qui peut toucher à la qualité de l’image, comme tout ce qui est artistique, est absolument de la responsabilité du graphiste.

L’intégrateur est responsable de vérifier le poids de l’image et les performances mais si un coup d’optimisateur sans toucher à la qualité du rendu ne suffit pas, alors il te reste à faire revoir sa copie au graphiste. En général ça ne fonctionne que si tu vas à son bureau pour lui expliquer et voir avec lui quelles options il peut activer. Si tu as besoin de toucher à Photoshop, au nombre des couleurs, à la taille de l’image, à l’entrelacement ou aux options du format, c’est à lui de prendre les décisions.

L’intégrateur a un rôle technique. Ce rôle est très large, demande des compétences très pointues mais il s’arrête à la technique. Il a aussi besoin de connaître et comprendre ce qu’il y a autour, par exemple le graphisme, mais dans ces domaines tiers son rôle se borne à faire remonter les problèmes et négocier les compromis.

Si tu déresponsabilise et infantilise ton graphiste il va agir en conséquence (ou partir au conflit et démissionner). Il va finir par ne plus s’occuper que de sa maquette photoshop et te laisser l’ergonomie, la décision sur la qualité graphique, les adaptations dûes au web, l’interaction utilisateur …. sauf que tout ça c’est son métier, pas celui de l’intégrateur. L’intégrateur qui finit par recevoir des éléments graphiques faits en se moquant de la suite part dans un mur à court terme, car ça ne pourra jamais donner une bonne intégration.

À moins que tu aies un ergonome, un expert en interaction utilisateur, un rédacteur et un marketeur dédiés, c’est au graphiste d’assurer ce rôle. Fais lui confiance, donnes lui les billes pour t’aider et il te permettra d’autant mieux de faire ton rôle d’intégrateur, qui est déjà assez complet comme ça. Et pour lui laisser son rôle, surtout ne prend aucune action qui puisses faire des choix de qualité d’image à sa place.

À moins bien sûr qu’un autre intégrateur soit passé avant et que ton graphiste se contente déjà de t’envoyer des grosses images photoshop sans réflexions derrière autre que « c’est joli », mais dans ce cas de toutes façons change de graphiste 😉

Par contre je ne suis pas d’accord sur un point : A mon sens ça ne doit pas être le graphiste qui doit passer du temps à optimiser les images dans Photoshop (ou ImageReady plus précisément), mais l’intégrateur. Un graphiste s’en fout d’optimiser au mieux les images (quand il ne sait tout simplement pas qu’il faut le faire et/ou pourquoi).

J’utilise PngOptimizer pour optimiser encore plus les PNG, une fois que toute les images sont prêtes.

Parfois entrelacer l’image fait gagner quelque octets, mais globalement c’est rare. Dans le cas d’un JPEG on peut opter entre « optimiser » et « progressif », les résultats dépendent de la source.

Il y a deux paramètres, que je ne connais pas : le « Dither » et la palette de couleur (Selective, Perceptual, Adaptative, etc.), en jouant avec on peut optimiser légèrement des GIF ou PNG.