Quand le PNG est plus fort que le JPEG

12 05 2009

Toujours à la recherche des images les plus légères possibles pour une utilisation sur le Web, vous vous tournez naturellement vers le JPEG. Ce n’est pas toujours la meilleure solution !

Certes il y a le Jpeg2000 qui donne des résultats plus jolis et plus légers que le classique Jpeg. Malheureusement, il n’est pas reconnu partout.

Ce qu’il faut retenir lorsque vous voulez publier des images sur Internet, c’est le type d’image.Pour résumer :

  • Jpeg / Jpeg2000 : photos, images comportant des dégradés,
  • PNG : dessins simples, copies d’écrans sans photos ou dégradés.

Pour vous en convaincre, voici un petit test.

Premier pas

Prenons une copie d’écran :

Copie d’écran originale (35 Kio)

Copie d’écran originale en PNG 24 bits (35 Kio)

Cette image est au format PNG 24 bits (16 millions de couleurs, 3 composantes rouge, vert et bleu, 1 octet par composante) et pèse 35 Kio. La résolution de l’image est de 419×464 pixels. Non compressée, elle occupe 419×464×3 octets, soit 583248 octets. La compression PNG est très efficace sur ce type d’image avec un rapport de 16/1.

Mais il est possible d’améliorer le score !

Améliorer la compressibilité de l’image

Pour améliorer la compressibilité d’un Jpeg, il suffit généralement d’appliquer un flou sélectif sur les zones contenant du bruit.

Avec le PNG, on améliore la compressibilité en réduisant le nombre de couleurs utilisées. Cela va revenir à effectuer manuellement une compression destructrice (grossièrement, le principe du Jpeg consiste à abimer l’image pour améliorer sa compressibilité).

Pour cela, direction The Gimp !

Passage en mode Couleurs indexées

Ouvrez l’image dans The Gimp et allez dans le menu Image → Mode → Couleurs indexées. Voici la fenêtre qui apparaît :

Menu Image → Mode → Couleurs indexées

Menu Image → Mode → Couleurs indexées

Comme sur l’image :

  • Choisir l’option Générer une palette optimisée.
  • Indiquer 24 comme nombre de couleurs (voir note 1).
  • Choir Aucun dans la liste Tramage des couleurs (voir note 2).

Note 1 : Le nombre de couleurs à indiquer dépend de l’image. Plus il y aura de teintes visibles, plus il faudra augmenter le nombre jusqu’à obtenir un résultat satisfaisant. Le maximum étant 256 pour le mode de couleurs indexées.

Note 2 : le tramage des couleurs nuit à la compressibilité de l’image, il faut donc le proscrire. En mode couleurs indexées, il sert à améliorer le rendu des dégradés.

Corriger le blanc et le noir

Sur les images contenant du blanc et du noir purs, il est nécessaire de les rétablir car la conversion leur aura fait perdre leur pureté. C’est particulièrement génant si l’image se retrouve sur un fond blanc.

Pour corriger cela, il faut aller sur la palette de l’image :

Palette de l’image

Palette de l’image

Cliquer sur le carré contenant le blanc et saisir “ffffff” dans le champ Notation HTML suivi d’un appui sur la touche Entrée.

Cliquer sur le carré contenant le noir et saisir “000000” dans le champ Notation HTML suivi d’un appui sur la touche Entrée.

Note : il doit y avoir un bug dans The Gimp car il arrive que l’appui sur le touche Entrée ne soit pas prise en compte lors de ces opérations. Pour vous en assurer, regardez l’historique d’annulation. Si votre modification n’a pas été prise en compte, essayez par le noir puis par le blanc.

Enregistrer le fichier

Pour enregistrer votre image optimisée, allez dans le menu Fichier → Enregistrer sous…. Après avoir indiqué le fichier de destination, la fenêtre suivante apparaît :

Fenêtre Enregistrer en PNG

Fenêtre Enregistrer en PNG

Vous décochez toutes les cases et poussez le niveau de compression au maximum (9).

Voilà ! Vous venez d’optimiser votre image.

Résultat

En appliquant cette procédure, voici le résultat :

Copie d’écran optimisée (10,4 Kio)

Copie d’écran optimisée en PNG 8 bits (10,4 Kio)

On passe de 35,1 Kio à 10,4 Kio. On atteint un rapport d’environ 55/1 ! Sacrée chute surtout pour le peu de perte engendrée.

Comparaison avec le Jpeg et le Jpeg2000

Si on veut obtenir le même rapport avec le Jpeg, cela donne ceci :

Copie d’écran en Jpeg (10,2 Kio)

Copie d’écran en Jpeg (10,2 Kio)

Elle a quand même beaucoup souffert, au point que certaines informations sont quasiment illisibles.

Le Jpeg2000 fait-il mieux ?

Copie d’écran en Jpeg2000 (10,2 Kio, simulation)

Copie d’écran en Jpeg2000 (10,2 Kio, simulation)

Et bien non ! Ce n’est guère plus joli.

Note : Le support du Jpeg2000 étant ce qu’il est sur les navigateur, il s’agit de l’enregistrement en PNG du résultat de la conversion de la copie d’écran originale en Jpeg2000.

Conclusion

Il y a encore de la place pour l’optimisation des sites Web, tout ne peut être automatisé.


Actions

Information

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s




%d blogueurs aiment cette page :