FRDX File Redux

PNG : Portable Network Graphics

Le format PNG est destiné à remplacer GIF et apporte les améliorations suivantes :
- la compression Deflate (plus efficace et libre de droits, contrairement à LZW il y a quelques années)
- un système de filtrage par ligne pour améliorer la compression
- le support des images 24 bits (millions de couleurs) et même 48 bits (milliards de couleurs)
- le support de la transparence (couche alpha complète ou description de couleurs spécifiques)
- des possibilités de gestion colorimétrique (courbe gamma, profil ICC)
- la normalisation ISO 15948:2004

Contrairement à GIF l’animation n’est pas possible… il existe toutefois une extension non officielle (issue de Mozilla) des spécifications PNG appelée APNG (Animated PNG) mais les fichiers de ce type restent peu diffusés. Firefox et Opera sont les seuls grands navigateurs capables d’afficher les APNG de manière animée, les autres interprète un tel fichier comme une unique image PNG.

Petite vidéo de présentation des capacités du format d’image PNG : Description PNG.
Les images analysées avec TweakPNG dans la vidéo sont disponible en téléchargement : Examples_PNG.zip.
J’ai commencé un comparatif plus poussé entre quelques logiciels d’optimisation bien connus : PNG optimization tools compared (en anglais) ainsi que le cheminement suivi pour optimiser le logo de Google avec des outils récents.

Analyser

Contrairement à ce que l’on pourrait croire les logiciels de retouche d’image (qu’ils soient gratuits ou payants) ne portent pas un soin particulier à l’optimisation des fichiers PNG. En enregistrant une image de référence en tant que PNG depuis différents logiciels on constate qu’ils produisent pratiquement tous un fichier différent !

Le fichier de référence fait 9999 octets, l’image est en 24 bits (avec effectivement plus de 256 couleurs).

Logiciel	Taille	∑ IDAT
Photoshop CS5 (enregistrer sous)	11794	9021
Photoshop 7 (enregistrer sous)	11263	11125
Image Ready 7	11206	11096
Photoshop 7 (enregister pour le web)	11205	11095
Aperçu 5.0.3	9952	9862
DeBabelizer 5.0.2	9847	9674
Photoshop CS5 (enregister pour le web)	9769	9675
Photoshop Elements 9.0.2 (enregister pour le web)	9769	9675
Photoshop CS5.1 (enregister pour le web)	9743	9649
Graphic Converter 8.1	9711	9654
ImageMagick 6.6.2-6	9217	9020
Fireworks CS5.1	9171	9024
Fireworks CS5	9169	9024
Photoshop CS5.1 (enregistrer sous)	9143	9024
XnView 1.99	9110	9020
GIMP 2.6.11	9102	9020
Pixelmator 1.6.7	9093	9024
GIMP 2.8.4	9089	9020

Ce classement ne porte que sur un seul exemple, il n’est donc pas nécessairement représentatif de la capacité globale de ces applications à produire des fichiers plus ou moins compacts. En fait, ces logiciels ne peuvent pas effectuer une optimisation en profondeur car cela prendrait trop de temps, si « Enregistrer pour le Web » devait durer plus de 5 min Adobe aurait certainement à faire face au mécontentement de ses utilisateurs… C’est pourquoi il existe depuis de nombreuses années de petits utilitaires ou services en ligne spécialement destinés à réduire la taille des images PNG, voici leurs résultats.

Logiciel	Taille	∑ IDAT
AdvancePNG 1.15	13167	13110
PNGWolf	9435	9378
RIOT 0.4.6	9201	9123
PngOptimizer 2.1	9077	9020
Smush.it	9068	9011
PunyPNG	9026	8969
pngcrush 1.7.30	9026	8969
ImageOptim 1.4.0	9026	8969
PNGOUT (07/2011)	9001	8944
CryoPNG 0.7.3b	8999	8942
OptiPNG 0.71	8993	8936
ScriptPNG (20/03/2013) [6]	8989	8932
ScriptPNG (20/03/2013) [9]	8907	8850
ScriptPNG (20/03/2013) [z]	8887	8830
pngslim	8869	8812
ZopfliPNG	8865	8808
marteau & burin…	8803	8746

En dehors de la contre performance d’AdvancePNG on constate une amélioration globale des résultats. Pour expliquer les importantes disparités de taille entre ces fichiers il faut analyser leur contenu.

Tout d’abord il faut savoir que les spécifications PNG encouragent l’enregistrement de nombreuses données annexes au sein du fichier. Certaines de ces métadonnées n’apportent rien de significatif dans le contexte d’un affichage sur une page web ou dans un courrier électronique, mais elles contribuent dans tous les cas au poids du fichier.
Un petit logiciel très pratique pour consulter et modifier ces métadonnées est TweakPNG (pour Windows à la base mais également utilisable sous Linux et Mac OS X à l’aide de Wine/CrossOver).

Par exemple sur le fichier issu de Fireworks CS5.1

Un rapide passage en revu des chunks présents :
- IHDR (image header) obligatoire, contient les dimensions, le type et la profondeur de l’image.
- sBIT (significant bits) optionnel, contient la profondeur originale des composants RVB (ie. 4,4,4 pour un Amiga ECS).
- pHYs (physical size) optionnel, contient la résolution (en pixels par mètre) de l’image.
- tEXT (text) optionnel, ici la clé Software indique que l’on y trouve le nom du logiciel* ayant produit le fichier.
- IDAT (image data) obligatoire, contient l’image en elle-même (filtres et pixels) sous la forme d’un flux Deflate.
- IDAT (image data) idem, est la suite du précédent, le flux Deflate pouvant être librement réparti sur plusieurs chunks.
- IEND (image end) obligatoire, marque la fin du fichier PNG.
*de ce fait les fichiers produits par Fireworks CS5.1 font systématiquement deux octets de plus que ceux de Fireworks CS5 !

Il est possible d’utiliser TweakPNG pour réduire la taille de ce fichier, ce n’est pas la manière habituelle de procéder, mais cela montre que l’on peut agir sur les chunks sans toucher au cœur des données.

Supprimer les trois chunks optionnels (sBIT, pHYs et tEXt) est la première modification envisageable.


Combiner l’ensemble des chunks IDAT en un seul est également possible (on gagne 12 octets par IDAT).


Le fichier ne fait désormais plus que 9081 octets (un gain de 90 octets).


Pour autant il reste plus gros que le meilleur résultat obtenu.


La différence provient donc du contenu du chunk IDAT. Les facteurs principaux qui influent sur celui-ci :
- l’utilisation ou non de l’entrelacement (pour afficher l’image avec progressivement plus de détails)
- le type de transformation appliquée à chaque ligne de l’image (à choisir parmi cinq filtres différents)
- l’organisation des couleurs au sein de la palette (pour les images avec moins de 256 couleurs)
- la qualité de la compression Deflate de l’image résultante (paramètres zlib, qualité du découpage du flux en blocks, optimisation des tables de Huffman…)

Dans le cas présent l’entrelacement (basé sur algorithme Adam7) n’est pas utilisé. L’entrelacement a très souvent, mais pas toujours, un effet négatif sur la compression des images PNG, il est donc globalement déconseillé de l’utiliser.

L’image de référence n’étant pas basée sur une palette, il ne reste que le choix des filtres et la qualité de la compression Deflate pour distinguer les deux fichiers.

Certains logiciels, comme GraphicConverter ci-dessus, donnent accès au choix des filtres.
Pour déterminer avec précision quel filtre a été appliqué sur les différentes lignes qui constituent l’image pngcheck avec l’option « -vv » est l’outil tout indiqué.

pngcheck -vv ref-fw-cs51.png
File: ref-fw-cs51.png (9081 bytes)
  chunk IHDR at offset 0x0000c, length 13
    72 x 72 image, 24-bit RGB, non-interlaced
  chunk IDAT at offset 0x00025, length 9024
    zlib: deflated, 16K window, default compression
    row filters (0 none, 1 sub, 2 up, 3 avg, 4 paeth):
      1 2 2 2 2 2 2 2 2 2 2 2 2 2 4 3 4 4 4 4 3 4 1 4 4
      4 4 4 1 1 1 1 4 1 4 3 3 2 3 3 3 3 3 3 3 4 4 4 4 1
      1 1 1 2 2 2 4 1 1 3 1 1 1 4 1 3 3 2 2 2 3 2 (72 out of 72)
  chunk IEND at offset 0x02371, length 0
No errors detected in ref-fw-cs51.png (3 chunks, 41.6% compression).

pngcheck -vv ref-ultime.png
File: ref-ultime.png (8803 bytes)
  chunk IHDR at offset 0x0000c, length 13
    72 x 72 image, 24-bit RGB, non-interlaced
  chunk IDAT at offset 0x00025, length 8746
    zlib: deflated, 32K window, fast compression
    row filters (0 none, 1 sub, 2 up, 3 avg, 4 paeth):
      1 2 3 2 2 3 3 3 3 3 3 3 3 3 3 3 3 3 3 1 1 4 4 4 4
      4 4 1 1 1 1 1 4 1 1 3 3 3 3 3 3 3 3 3 3 1 3 3 4 1
      1 2 1 2 2 2 2 1 1 3 3 1 1 1 1 3 3 3 3 3 3 2 (72 out of 72)
  chunk IEND at offset 0x0225b, length 0
No errors detected in ref-ultime.png (3 chunks, 43.4% compression).

On remarque, de manière évidente, que ce n’est pas un seul et même filtre qui a été utilisé pour toutes les lignes (cette méthode triviale est souvent expérimentée). Dans les deux cas le filtrage employé est donc de type mixte. Bien qu’ils présentent certaines similitudes les filtres retenus diffèrent tout de même assez souvent. Comme beaucoup de logiciels Fireworks a utilisé l’heuristique décrite dans les spécifications du format PNG « smallest sum of absolute values » pour déterminer quels filtres utiliser, le fichier le plus petit ayant été produit par pngout la méthode utilisée est inconnue mais semble assez pertinante vu les résultats généralement obtenus avec ce logiciel.


Si l’on compare l’efficacité de la compression au niveau de chaque pixel (ces représentations proviennent de pngthermal), on constate que le fichier le plus petit (à droite) présente des bandes horizontales plus vertes ou plus bleues et les zones rouges semblent moins prononcées. Cela s’explique en partie par le fait qu’au sein du fichier le plus petit les données compressées sont réparties dans cinq blocks Deflate distincts comme l’indique defdb, ce découpage force quelque peu la compression à s’adapter aux variations des données.

defdb ref-fw-cs51.png
T Boundary Tokens h.size b.size
2 0 14565 992 72138
72138 bits long (1 block)

defdb ref-ultime.png
T Boundary Tokens h.size b.size
2 0 4046 283 13704
2 fce 2229 791 15969
2 1a8a 3687 295 15677
2 28f1 1914 837 16017
2 3492 2166 236 8551
69918 bits long (5 blocks)

La suite prochainement…

Par ailleurs les logiciels d’édition ont une tendance certaine à sous-exploiter le format : les vrais niveaux de gris, la désignation d’une unique couleur transparente pour les images en millions de couleurs ou de plusieurs niveaux de transparences différents pour les images avec une palette sont souvent inaccessibles.