Optimisation des fichiers PNG

powered by WordPress Multibox Plugin v1.3.5

Je vous parlais dans mon billet précédent de l’optimisation des fichiers PNG qui est une format très utile dans la création d’interface graphique pour le Web grâce à leur gestion des transparences bien plus évoluée que celle des fichiers GIF (pour les PNG24 car les PNG8 ont un comportement identique au GIF quand à l’utilisation du canal Alpha pour la transparence mais garde l’avantage du poids). Mais voilà ils ont comme les GIF le problème d’avoir un poids sensiblement supérieur à celui d’un JPEG à définition égale.

Alors que faire laisser tomber le PNG et ces avantages pour n’utiliser que des formats plus économes en octets pour construire nos sites afin de gagner quelques millisecondes de plus lors du chargement de nos pages ?

Pas forcement car il existe une technique simple à mettre en œuvre afin que mettre au régime nos fichiers PNG.

Un bouton, un logo ou une puce en PNG c’est bien mais voila moi quand je bosse sur une interface de site je travaille en 24 ou 32 bits. Des boutons en 24bits c’est pas forcement la meilleur des solutions pour limiter la tailles fichiers qui seront utilisés sur le site. Passons en PNG8 et limitons la palette à 256 couleurs me direz vous ! Oui mais non car les PNG8 gère à la truelle la transparence sur un seul canal alpha donc comme un bon vieux GIF donc un peu trop limité à mon goût.

Que faire ?

Il existe deux petits outils pour diminuer la palette de nos PNG24 tout en conservant leurs gestion des transparences.

Pngnq: optimise la taille de la palette.

Optipng: compresse le PNG en testant plusieurs méthodes de compression afin de définir la plus optimal et vire au passage les données inutiles du fichier (exif, commentaires).

Installation sous Debian et Ubuntu

sudo apt-get install pngnq optipng (compliqué ?)

Utilisation

Toujours dans un terminal, placez vous dans le répertoire ou se trouve vos fichiers à optimiser et lancez :

pngnq -vf -s1 nom_de_l'image.png

optipng -o7 nom_de_l'image-nq8.png

Pourquoi « nom_de_l’image-nq8.png »? car pngnq nomme ainsi la version optimisée de votre image.

Oui mais moi j’ai plein de fichier à optimiser. Et bien on va faire un petit script pour aller plus vite.

#!/bin/bash
pngnq -vf -s1 $1.png
optipng -o7 $1-nq8.png
echo "Optimisation Terminée !"

Résultat

powered by WordPress Multibox Plugin v1.3.5

Image originale - 350x205px en PNG24 compression niveau 9 sous The Gimp 137,2 Ko. Dodu notre fichier !

powered by WordPress Multibox Plugin v1.3.5

Image optimisée, même taille, 41,9ko

J’ai délibérément choisi une photo ayant une palette de couleur très large afin de mettre en évidence les limitations de l’optimisation des PNG24. On peut remarquer que notre image optimisée souffre d’une légère dégradation de qualité des dégradés de couleurs surtout celui de la peau. Mais cela reste tout a fait raisonnable au vu de la diminution impressionnante du poids de notre fichier (divisé par presque 3,3).

Que dire ? L’algorithme de réduction du nombre de couleurs utilisé par pngnq est très efficace et que ce genre d’images n’a pas vocation à être traité en PNG mais plutôt en JPEG.

Par contre dés que l’on traite un élément constituant l’interface graphique d’un site qui dispose d’une palette qui peut être facilement être réduite à 256 couleurs c’est très utile comme pour cette bulle.

powered by WordPress Multibox Plugin v1.3.5

3,5 ko

powered by WordPress Multibox Plugin v1.3.5

2,8 ko

La réduction de poids est moins impressionnant mais bien là et sans perte de qualité et quelques centaines d’octets économisés c’est déjà ça surtout si l’on applique la même optimisation à une vingtaine de fichiers.
Après plusieurs tests sur différents fichiers j’ai obtenu une réduction de poids de 20 à 75% avec une moyenne de 55%.

Ma mascotte a pu perdre 22 ko avant de prendre place sur son site.

Voila encore une bonne méthode pour alléger un peu plus votre site internet sans trop de sueur.

PS: Ces deux outils existent sous Windows.

Laisser un commentaire