Optimisation des PNG

Tous ceux qui font le Web doivent le savoir maintenant: il n’y aucune raison de préférer GIF à PNG pour des images fixes. Pour rappel, PNG est plus performant et plus puissant que GIF.

Parmi les possibilités qu’offrent PNG, la transparence Alpha est certainement l’une des plus intéressante mais aussi l’une des plus délicate à utiliser. En effet, le navigateur que tout le monde aime détester, Internet Explorer 6, ne gère pas ce type de transparence et affiche à la place un fond gris disgracieux. Lorsqu’il découvrent ce comportent, certains intégrateurs se réfugient dans GIF, un format qu’ils connaissent bien.

On va voir qu’il n’est pas du tout nécessaire de revenir à GIF et qu’il suffit de pas grand chose pour exploiter la puissance de PNG.

Remplacer le fond gris par une autre couleur.

La première solution, est de remplacer le gris par une couleur définie par le graphiste pour IE6. Les utilisateurs de ce navigateur perdent alors la transparence, mais voient à la place une couleur qu’aura choisi l’auteur du site. Pour cela, il suffit d’ajouter une information supplémentaire dans le fichier qui définit la couleur de fond. Pour les techniciens, il s’agit de préciser une valeur pour le “chunk” bKGD.

  • How to Photoshop
  • How to Gimp
  • How to Tweak PNG

Dégrader la transparence pour IE6

L’autre solution, est de fournir un transparence simple (similaire à ce que fait GIF) pour les utilisateurs d’IE6. L’idée est d’utiliser le profil PNG8 en ajoutant des informations Alpha à la palette. L’avantage de cette solution est reposer uniquement sur les fonctionnalités de PNG, évitant de faire appel à des hacks CSS qui rendent la maintenance difficile dans le temps. L’inconvénient est qu’on ne peut utiliser que 256 couleurs. Mais heureusement, les algorithmes de réduction de couleur (voir http://en.wikipedia.org/wiki/Color_quantization) sont suffisament bons pour donner une résultat proche de PNG24 à l’oeil.

  • How to Fireworks
  • How to Photoshop + PNG Quant
 
optimisationdespng.txt · Dernière modification: 2008/11/24 10:04 par 83.202.86.29
 

Fil RSS | Propulsé par DokuWiki