[Tech] pngquant – réduire la taille des PNG (proxies, web, applis mobiles…)

Le format d’image PNG est aujourd’hui un des plus pratiques, que ce soit en animation ou sur le web, pour sa compression sans perte et la couche alpha incluse pour la transparence.
Mais justement, en travaillant sur mon court-métrage, avec une post-production et des effets spéciaux assez lourds, je me suis demandé si ça ne serait pas encore mieux d’avoir un équivalent du PNG avec de la compression AVEC perte, pour avoir des images avec transparence de qualité réduite (donc plus légères) à utiliser comme proxies (doublures) dans les différents logiciels, et donc que l’ordi rame un peu moins sur la post-production. Après tout, le but d’un proxy (doublure), c’est bien d’aller plus vite !

Après plusieurs recherches, j’ai retenu une solution toute simple, qui peut servir à tous – y compris à ceux qui font du web et veulent des images avec transparence mais qui fonctionnent de façon standard, et très légères.

Cette solution, c’est pngquant, un logiciel libre qui transforme des PNG standards lourds (sans perte) en des PNG standards légers (avec perte). Pour un usage allégé donc (proxies uniquement, puisque perte de qualité, mais rapide).

 

Mise à jour de l’article : j’ai utilisé la méthode décrite ici dans un script pour créer rapidement et en un clic des doublures (proxies) sous After Effects. Voir ici !

 

Comment un PNG peut-il être plus léger qu’un PNG ?

Il y a deux angles d’attaques assez simple sur le principe (et applicables à la main directement dans Photoshop, l’intérêt résidant dans pngquant étant d’automatiser le truc, et sans utiliser le lourd photoshop juste pour ça.).

  • S’intéresser à ce qui se passe dans la transparence

  • Etant donné que chaque pixel est composé de quatre couches (RVB+Alpha), même 100% transparent (Alpha = 0), il y a peut-être trois autres couches qui contiennent de l’information quand même ; tout en étant transparent, le pixel contient des informations de couleurs, codées sur trois couches.
    Pour faire simple, si cette information change beaucoup entre les différents pixels transparents (on n’est pas sur une couleur unie, ou sur un dégradé simple), toutes ces variations de couleurs vont être enregistrées dans le PNG, alors qu’elles ne se voient pas (puisque 100% transparent). Autrement dit, le fichier sera plus lourd qu’on ne s’y attend. Pour grandement l’alléger, il suffit d’enlever un maximum d’informations des parties 100% transparentes, en les remplissant d’une couleur unie.
  • S’intéresser au nombre de couleurs au total dans l’image

  • Le PNG est un format qui permet d’utiliser ce qu’on appelle une palette indexée.
    En version simple : au lieu d’utiliser les 16 millions de couleurs habituelles des fichiers utilisant 8 bits par couche (256 niveaux par couche R, V, B ou A, 24bits au total, 32bits en comptant la transparence), ou éventuellement 16 bits par couche (plusieurs trillions de couleurs), le PNG va retenir une quantité restreinte de couleur, définie par une palette contenue dans le fichier. Moins de couleurs cette palette aura, plus petit sera le fichier. Au final, un simple filtre de postérisation de l’image, réduisant le nombre total de couleurs (les pixels de couleur proches auront exactement la même couleur, selon un seuil prédéfini) permettra de grandement réduire la taille de l’image obtenue, tout en n’altérant pas son aspect à l’oeil, si le seuil est bien réglé.

Ducati_side_shadow
PNG d’origine 76KB
Ducati_side_shadow-fs8
pgnquant 20KB

Pngquant

pngquant fait donc tout ça automatiquement pour vous sur des PNG existant, et le top du truc, c’est qu’il peut le faire automatiquement sur une séquence d’image ; la méthode est archi simple, et le gain est loin d’être négligeable : mes PNG sont réduits de 3 à 5 fois. Sur une séquence qui sert de proxy dans une vidéo, je peux au moins passer de 100Mo à 30Mo, ça signifie un accès bien plus rapide aux fichiers, donc un logiciel plus rapide, en plus du gain de place non négligeable quand on a besoin de beaucoup de séquences PNG.
La différence à l’oeil est quasiment indécelable, donc pas gênante pour travailler, sauf en cas de retouches colorimétriques et sortie finale (à plus forte raison pour des projets nécessitant plus de 8bpc comme au ciné / nécessitant un étalonnage) où on utilisera des PNG « normaux », voire 16bpc ou des formats à 32bpc (DPX ou EXR en général).

  • Télécharger pngquant (windows, mac ou linux) en version command-line
  • Et via une invite de commande/terminal, la commande (sous windows, enlevez le « .exe » sous Mac ou Linux)
    pngquant.exe --force --speed 10 --ext -r.png 256 *.png
    lancera la conversion de tous les fichiers png du dossier dans lequel elle est entrée.
  • Pour me faciliter la vie sous windows (d’autres méthodes équivalentes existent sous Linux et Mac), j’utilise cette commande dans un fichier « .bat » en y incluant le lien vers le fichier « .exe » ; il suffit de créer un fichier texte contenant cette ligne :
    "C:\chemin vers pngquant\pngquant.exe" --force --speed 10 --ext -r.png 256 *.png
    et d’enregistrer ce fichier en « convertPNG.bat » (par exemple, en prenant juste soin de remplacer « .txt » par « .bat).
    Ensuite, je copie colle ce fichier bat dans le dossier contenant les PNG à convertir et je double-clique dessus. Simple et efficace !
  • Les PNG obtenus sont standards bien que beaucoup plus légers, et donc parfaitement compatible dans tous les logiciels. On peut aussi très simplement utiliser pngquant sur une seule image à la fois, des outils sont fournis pour, et des interfaces visuelles existent aussi (mais je trouve ma manipulation bien plus rapide). Tout est sur le site dédié.

Quelques explications rapides sur la commande :

  • --force oblige pngquant à écraser les fichiers éventuellement déjà existant.
  • --speed 10 définit la vitesse de conversion vs la qualité obtenue. J’utilise 10 pour aller vite, mais la valeur par défaut est 3.
  • --ext -r.png permet de définir un suffixe sur le nom du fichier converti (ici -r).
  • 256 influence le nombre de couleurs contenus dans le fichier converti.
  • *.png est le masque qui permet de travailler sur tous les png trouvés dans le dossier. Ils ne seront pas supprimés, il faut le faire à la main.
Nouveauté : j’ai automatisé cette méthode dans un script pour After Effects, détails ici !

Une pensée sur “[Tech] pngquant – réduire la taille des PNG (proxies, web, applis mobiles…)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *