Ouvrir la navigation secondaire

Ce billet a plus de deux ans. S'il contient des informations techniques elles sont peut être obsolètes.

Précédent Obtenir des colonnes de hauteur identique via JavaScript
Suivant Compléments pour iTunes, le mp3 à son meilleur

PNG, transparence et optimisation avec pngnq sous OS X

Photoshop propose deux choix pour enregistrer des images PNG via sa fonction d'optimisation d'images pour le web : PNG-8 (permet d'obtenir des images en 256 couleurs) et PNG-24 (permet d'obtenir des images en milliers de couleurs et d'avoir de la transparence alpha). Ici vous trouverez plus d'informations sur les formats PNG en Photoshop, et là encore des explications sur la différence entre PNG-8 et PNG-24.

Depuis quelques temps on sait que le PNG-8, contrairement à des idées reçues, peut aussi gérer la transparence alpha. Voir le post PNG8 The Clear Winner dans lequel l'auteur parle de PNG-32, c'est à dire de PNG-24 avec une couche alpha de 8 bits supplémentaires.

Après avoir lu ces slides sur l'optimisation des images, on sait qu'il existe des outils pour convertir des PNG en milliers de couleurs vers des PNG en 256 couleurs. C'est comme ça que doit faire Flash, je ne sais pas si vous avez déjà vu le poids d'un SWF dans lequel vous avez importé une image transparente PNG-24 générée par Photoshop, c'est assez impressionnant. pngnq est un de ces outils. Il s'agit d'un programme qui s'utilise en ligne de commande. Ceux qui n'aiment pas ça et qui ont Fireworks peuvent lire PNG Alpha Transparency - No Clear Winner.

Malheureusement pngnq n'est pas disponible via MacPorts, mais une version compilée pour Mac OS X est disponible dans les téléchargements. pngnq a besoin de libpng pour fonctionner. libpng est disponible via MacPorts.

Voici un petit mémo pour installer pngnq. Vous aurez besoin de MacPorts et devez d'abord télécharger la version compilée pour Mac de pngnq.

$ sudo port install libpng
$ cd ~/Desktop/pngnq-0.5-macosx-universal
$ sudo cp pngnq /usr/local/bin/
$ sudo ln -s /opt/local/lib/libpng.dylib /usr/local/lib/libpng12.0.dylib

Ensuite vous pouvez installer aussi optipng ou pngcrush via MacPorts et commencer à jouer :

$ pngnq -vf -s1 image.png
$ optipng -o7 -nc image-nq8.png

A titre d'exemple, je passe d'un PNG-24 avec transparence alpha de 188 ko obtenu via Photoshop à un PNG de 56 ko toujours avec transparence après la moulinette pngnq.

D'autres ressources : Optimiser la compression des PNG et Images, PNG et GIF.

#1

Neovov

12.12.08 16:16

Si on est une feignasse comme moi il y a aussi PNGThing qui évite d'avoir à taper de la ligne de commande.

http://www.leveltendesign.com/blog/nickc/pngthing-v11-previously-pngoptimizer

#2

Marco

12.12.08 18:31

Ouais c'est bien aussi les interfaces graphiques :) Mais cette appli et d'autres (http://osx.iusethis.com/tag/png) sont des GUI soit pour optipng, soit pour pngcrush. Sauf erreur de ma part, aucune n'intègre pngnq.