CSS-IG.net Use The Ping!

Introduction aux encodages et conversion

Après lecture attentive de l'article « Les images du Web : quels formats ? », qui concerne essentiellement les pratiques d'insertion d'image et de choix de formats, nous allons ici nous intéresser aux méthodes que les formats choisissent pour enregistrer les images.

Outre les types d'encodage -Paletted, GrayScale ou TrueColor- (où je ne m'attarderais pas dans cet article), vous allez comprendre pourquoi les formats GIF (Graphics Interchange Format) et JPEG (Joint Photographic Experts Group) sont dits destructeurs, alors que le format PNG (Portable Network Graphics) conserve lui une intégrité exceptionnelle de toutes les variables.

Le choix du format, et donc quelque part de l'encodage de l'image, va se répercuter sur ses critères de qualité de restitution et de poids. Un mauvais choix engendrant une mauvaise qualité graphique, ou un surpoids évident. Il faut donc que vous puissiez d'ores et déjà distinguer trois grandes catégories d'images :

• Les images décoratives, telles que les puces, les flèches, ou un arrière plan répété par la propriété repeat de CSS ;
• Les images illustratives haute résolution, telles que les photographies, une capture d'écran vidéo, larges bannières, arrière plan complexe non répété à haute résolution, etc. ;
• Les autres images.

A chacune de ces catégories s'harmonisent trois des formats le plus utilisés sur le Web : le format GIF, le JPEG et le PNG. A la lecture de la série de comparatifs des trois formats, peut être vous serez vous empressé de modifier vos captures d'écran déjà existantes en PNG ; manoeuvre qui pourra s'avérer inutile si vous ne disposez pas d'une version « inaltérée » de l'image.

Méthode d'encodage du GIF

Le format GIF se distingue par deux versions, toutes deux basées sur l'algorithme de compression LZW (Lempel-Ziv-Welch). La version 87a, qui supporte l'entrelacement des données, et la 89a, qui apportera la transparence ainsi que l'animation. On décline plusieurs types d'encodeur GIF, selon le logiciel que l'on va utiliser :

• L'encodeur original de Unisys, ainsi que les nouvelles spécifications apportées par la version 89a, permettent d'adopter une phénomène compression sans modifier les entrées de la palette sur des images limitées à 256 couleurs ; cet encodeur est généralement utilisé sur des logiciels payants.
• Les encodeurs intermédiaires, inspiré de Unisys, qui se base sur une méthode de fusion d'entrées pour économiser l'espace poids ; moins puissant en terme de compression, mais disposant d'une technique de filtrage destructrice de couleurs (même lorsque l'image nécessite moins de 256 couleurs). Ces encodeurs n'encodent pas selon le nombre de couleurs de la palette, et elle reste généralement fixée à 8 bits/pixel ;
• Les encodeurs propriétaires, qui adoptent leur propre solutions pour optimiser les images GIF.

Beaucoup d'utilitaires gratuits sous l'environnement Windows utilisent le même encodeur, basé sur le phénomène de fusion d'entrées pour économiser l'espace poids ; celui ci est donc basé sur une méthode de stockage « destructrice de couleurs », qui va fusionner les entrées similaires, disposants de très faible nuance entre elles :

Encodeurs GIF

Image originale en BMP	Encodeur intermédiaire	Encodeur Unisys	Image PNG
Profondeur : 24 bits/pixel	Profondeur : 8 bits/pixel	Profondeur : 3 bits/pixel	Profondeur : 4 bits/pixel
Nombre de couleurs : 5	Nombre de couleurs : 1	Nombre de couleurs : 5	Nombre de couleurs : 5
Image originale	Destruction de couleurs	Conservation des couleurs	Conservation des couleurs
Poids : 45.95 Ko (47 054 octets)	Poids : 0.97 Ko (997 octets)	Poids : 0.85 Ko (868 octets)	Poids : 0.14 Ko (146 octets)

On remarque le choix limité de l'encodeur à 8 bits/pixel. Même si celui ci supprime les entrées de la palette, et remplace les nuances par une seule, il n'effectue pas une réduction de la profondeur de l'image. L'encodeur suivant va conserver l'intégrité de la palette tant qu'il le pourra, et proposera une compression plus effective. Le format PNG propose quant à lui une conservation intégrale des nuances, tout en proposant un fichier 6 fois moins lourd.

Méthode Dithering

Ce même encodeur applique un filtrage Dithering sur l'image, afin de donner l'illusion que celle ci contient une entrée qu'elle ne contient pas ; cette méthode est notamment efficace sur les images nécessitant plus de 256 couleurs. Ce phénomène se manifeste -en principe- lorsque l'image contient un nombre d'entrées important. Il s'avère néanmoins qu'avec un encodeur qui supprime les entrées, cette méthode ne permettra pas d'obtenir un bon compromis poids / qualité.

Comparatif de l'encodage GIF/PNG

Image originale en BMP	Encodeur intermédiaire	Encodeur Unisys	Image PNG
Effet Dithering : Non	Effet Dithering : Oui	Effet Dithering : Non	Effet Dithering : Non
Palette édition : 16 777 216	Palette édition : 256	Palette édition : 128	Palette édition : 16 777 216
Encodage : TrueColor	Encodage : Paletted	Encodage : Paletted	Encodage : TrueColor
Profondeur : 24 bits/pixel	Profondeur : 8 bits/pixel	Profondeur : 7 bits/pixel	Profondeur : 24 bits/pixel
Nombre de couleurs : 96	Nombre de couleurs : 56	Nombre de couleurs : 96	Nombre de couleurs : 96
Image originale	Destruction de couleurs	Conservation des couleurs	Conservation des couleurs
Poids : 76.62 Ko (78 462 octets)	Poids : 5.16 Ko (5284 octets)	Poids : 5.17 Ko (5291 octets)	Poids : 0.49 Ko (502 octets)

L'encodeur utilise ici un effet dithering pour compenser la destructions de couleurs. La méthode se révélerait efficace sur des images disposant de plus de 256 couleurs, mais ici, elle a un effet de surpoids : une image correctement filtrée (56 couleurs pleines) en GIF serait normalement moins volumineuse. L'image GIF encodée sans le filtre Dithering permet de conserver l'intégralité des couleurs (et donc de la qualité de l'image), en proposant environ le même espace poids.

PNG démontre encore une fois, grâce à ses méthodes de filtrage et à son potentiel de compression, qu'il est plus adapté dans ce genre de situation : non seulement le fichier obtenu est 10 fois mois lourd, mais il conserve un potentiel d'édition maximal ; cela signifie qu'un éditeur d'image proposera une palette de plus de 16 millions de couleurs, et que PNG les supportera.

Lorsque GIF dépasse 256 couleurs

Le format GIF peut stocker 256 entrées dans son entête : cela signifie qu'un numéro est attribué à une couleur utilisée, et que ce numéro est fixé sur un ou plusieurs pixels de la matrice. Lorsqu'une image nécessite plus de 256 couleurs pour être restituée, GIF applique une « destruction intelligente » des couleurs, qui consiste à supprimer les couleurs les moins restituées, et à remplacer des nuances par la même valeur similaire :

Dégradations effectuées par GIF sur une image

Image enregistrée en GIF	Image enregistrée en PNG
Palette édition : 256	Palette édition : 16 777 216
Encodage : Paletted	Encodage : TrueColor
Profondeur : 8 bits/pixel	Profondeur : 24 bits/pixel
Nombre de couleurs : 256	Nombre de couleurs : 1396
Destruction de couleurs	Conservation des couleurs
Poids : 8.97 Ko (9188 octets)	Poids : 6.98 Ko (7146 octets)

Dans cet exemple, l'encodeur en GIF a effectué une analyse rapide de l'image pour supprimer les couleurs les moins visibles (dans cet exemple, il a supprimé 1140 couleurs), et remplacé certaines valeurs par d'autres. Cette modification reste significativement visible lorsqu'on effectue un zoom sur l'image ; néanmoins en définition originale, ces dégradations sont généralement moins visibles.

Le format PNG lui adopte l'encodage TrueColor, et applique ses filtres et compression pour obtenir une image moins lourde, tout en conservant l'intégralité des couleurs -qualité de l'image-, ainsi qu'un potentiel d'édition maximal de plus de 16 millions de couleurs ; on peut aisément modifier l'image, rajouter, modifier des couleurs, etc.

Efficacité du filtrage Dithering

Puisque l'image semble dégradée, et présenter des effets escaliers, il peut être intéressant d'appliquer un filtrage dithering avant d'enregistrer l'image (filtrage qui n'est pas propriétaire à GIF : le PNG, ou d'autres formats le supportent aussi très bien). Sur le même exemple, voici le résultat :

Dégradations effectuées avec filtrage Dithering

Image enregistrée en GIF	Image PNG Paletted
Palette édition : 256	Palette édition : 256
Encodage : Paletted	Encodage : Paletted
Profondeur : 8 bits/pixel	Profondeur : 8 bits/pixel
Nombre de couleurs : 256	Nombre de couleurs : 256
Destruction de couleurs	Destruction de couleurs
Poids : 9.33 Ko (9558 octets)	Poids : 4.52 Ko (4624 octets)

Le filtrage Dithering permet ici de restituer la même image d'origine, mais en conservant une qualité de restitution supérieure aux phénomènes de dégradations de l'encodage GIF constatés sur l'exemple précédent. Il nécessite cependant un espace poids généralement légèrement supérieur, et est également applicable sur les images PNG Paletted. L'image au format PNG Paletted a effectué une « dégradation douce », et économise quelques kilooctets sur le format TrueColor :

Dégradations effectuées avec filtrage Dithering

GIF - Méthode Dithering	PNG Paletted - Méthode Dithering	PNG TrueColor
Destruction de couleurs	Destruction de couleurs	Conservation des couleurs
Poids : 9.33 Ko (9558 octets)	Poids : 4.52 Ko (4624 octets)	Poids : 6.98 Ko (7146 octets)

Et la conversion d'un GIF en PNG ?

La qualité de conversion entre un format GIF et un format PNG dépend essentiellement de la structure du format GIF ; lorsque celui est fortement affecté par le phénomène dithering, PNG ne proposera qu'un faible gain d'espace poids (mais proposera tout de même, dans une grande majorité d'images, un gain quelconque) :

Comparatif des conversion GIF > PNG et BMP > PNG

Conversion BMP > GIF (Méthode Dithering forte)	Conversion GIF > PNG	Conversion BMP > PNG
Effet Dithering : Oui	Effet Dithering : Oui	Effet Dithering : Non
Encodage : Paletted	Encodage : Paletted	Encodage : TrueColor
Profondeur : 8 bits/pixel	Profondeur : 8 bits/pixel	Profondeur : 24 bits/pixel
Nombre de couleurs : 256	Nombre de couleurs : 256	Nombre de couleurs : 2810
Destruction de couleurs	Conservation des couleurs	Conservation des couleurs
Poids : 28.52 Ko (29 204 octets)	Poids : 18.89 Ko (19 346 octets)	Poids : 11.74 Ko (12 021 octets)

Le format PNG démontre ici deux très bons potentiels :

• Compression pure : En appliquant ses capacités de filtrage et de compression, il a réduit de moitié le poids du fichier GIF, tout en conservant l'intégrité des couleurs que le GIF proposait.
• Compression et filtrage : PNG ne détériore par l'image originale, et conserve l'intégralité des couleurs (2810) ; le filtrage, et son fort potentiel de compression, lui permettent d'avoir un très séduisant rapport qualité/poids.

Dégradation plus ou moins visible

Sur certaines images, il peut être très intéressant de jouer sur le nombre de couleurs (cela fera l'objet d'un article dédié ; ici, je n'annonce que la théorie). En reprenant l'exemple ci dessus, l'image dispose de 2810 couleurs. Elle sera enregistrée selon une méthode de dégradation normale :

Comparatif d'une image 2810 couleurs en 256 couleurs

Conversion BMP > GIF Paletted	Conversion BMP > PNG Paletted
Encodage : Paletted	Encodage : Paletted
Profondeur : 8 bits/pixel	Profondeur : 8 bits/pixel
Nombre de couleurs : 256	Nombre de couleurs : 256
Destruction de couleurs	Destruction de couleurs
Poids : 17.73 Ko (18 160 octets)	Poids : 4.36 Ko (4469 octets)

La plupart des encodeurs GIF proposent néanmoins une solution mieux adaptée, comme décrite dans le tableau ci-dessus ; elle consiste à supprimer les couleurs les moins utilisées qui ne rentrent pas dans la palette, et de les remplacer par une variable similaire déjà présente. L'image est, dans cet exemple, ainsi moins dégradée qu'elle ne l'est avec le filtre Dithering. PNG conserve son avance sur son rapport qualité/poids, qui dépasse de 4 fois celle du GIF.

Méthode d'encodage du JPEG

Le format JPEG utilise une méthode structuration par blocs de 64 pixels (8x8), ou de 128 pixels (16x16). Il opère une dégradation visuelle sur l'image, engendrée par le principe de son encodeur (représenté en pourcentage de qualité, ou sous-échantillonnage dans une majorité de logiciels). Lorsqu'une image est encodée, elle voit inévitablement son nombre de couleurs multiplier, ainsi que sa matrice irrémédiablement modifiée. Il devient ainsi très difficile de retrouver la saveur originale de l'image.

Hormis le pourcentage de qualité, un logiciel peut proposer un sous-échantillonnage présenté sous la forme 4 :4 :4, 4 :2 :4 ou 4 :2 :0 ; cela signifie que les données de l'image seront plus ou moins modifiées horizontalement et verticalement, afin que l'algorithme JPEG puisse y appliquer une compression effective, au détriment de la qualité de l'image :

Encodage JPEG sur une image originale de 5 couleurs

JPEG 4:4:4 (100 %)	JPEG 4:2:4 (100 %)	JPEG 4:2:0 (100 %)	PNG
Nombre de couleurs : 26	Nombre de couleurs : 67	Nombre de couleurs : 173	Nombre de couleurs : 5
Destruction de couleurs	Destruction de couleurs	Destruction de couleurs	Conservation des couleurs
Poids : 7.16 Ko (7327 octets)	Poids : 5.75 Ko (5893 octets)	Poids : 4.61 Ko (4723 octets)	Poids : 0.17 Ko (178 octets)

Matrice particulièrement modifiée

Si GIF admet un effet dithering sur certaines images, JPEG applique une méthode qui visuellement, restitue à peu près le même effet. La matrice de l'image se trouve alors fortement modifiée, de manière quasi-irréversible. Veillez donc à bien choisir le format qui convient avant d'enregistrer dans ce format. JPEG n'admets pas une édition et enregistrement rapide ; chaque enregistrement, même sans modifications apportées à l'image, apportent des dégradations irréversibles supplémentaires :

Enregistrement et ré-enregistrement

JPEG 4:2:0 (100 %) 1 enregistrement	JPEG 4:2:0 (100 %) 6 ré-enregistrements	PNG Paletted 6 ré-enregistrements
Nombre de couleurs : 173	Nombre de couleurs : 641	Nombre de couleurs : 5
Destruction de couleurs	Destruction de couleurs	Conservation des couleurs
Poids : 4.61 Ko (4723 octets)	Poids : 5.58 Ko (5718 octets)	Poids : 0.17 Ko (178 octets)

Dans le tableau ci-dessus, un enregistrement sur la même matrice est effectué à chaque insertion des 6 éléments qui composent visuellement l'image ; JPEG va se montrer ici particulièrement inefficace, en dégradant de plus en plus les éléments qui sont insérés, mais également ceux qui ont déjà été insérés : l'encodage, mal filtré, va détériorer l'image proportionnellement au nombre d'enregistrement, tandis que PNG conserve l'intégralité des données et de son potentiel de compression, indépendamment du nombre d'enregistrement.

Inadapté pour les captures d'écran !

Le format JPEG est particulièrement inadapté pour les captures d'écran, qui représente des textes, ou des éléments simples dans une fenêtre : les boutons, onglets, champ de texte, etc. L'effet de compression sur une capture d'écran est particulièrement visible, et le poids de l'image est généralement bien plus lourd :

Capture de en JPEG

JPEG 4:2:0 (100 %)	JPEG 4:2:0 (21 %)	PNG TrueColor
Nombre de couleurs : 6075	Nombre de couleurs : 10 713	Nombre de couleurs : 1396
Destruction de couleurs	Destruction de couleurs	Conservation des couleurs
Poids : 33.41 Ko (34 208 octets)	Poids : 7.05 Ko (7223 octets)	Poids : 6.98 Ko (7146 octets)

Pour obtenir un poids avoisinant celui de PNG, il faut augmenter très fortement le taux de compression de JPEG, ce qui détériore également significativement l'image. En qualité maximale dans ce sous-échantillonnage, la dégradation est peu perceptible sans effectuer un zoom, mais on obtient un JPEG trop volumineux ; PNG est ici presque 5 fois moins lourd.

Conversion JPEG en PNG : la plus mauvaise !

La conversion d'une image au format JPEG vers le format PNG est sans nul doute la pire manoeuvre à exécuter : l'image obtenue va conserver l'intégralité des couleurs générées par la compression JPEG d'origine, et le PNG va exprimer un potentiel médiocre : beaucoup de couleurs, aucun filtrage efficace applicable (trop de pixels variables) ; résultat inévitable, le PNG va occuper un espace poids conséquent. Prenons exemple avec une image disposant à l'origine, de 256 couleurs :

Convertir du JPEG en PNG

JPEG 4:2:0 (75 %)	Conversion JPEG > PNG	Conversion BMP > PNG
Nombre de couleurs : 44 269	Nombre de couleurs : 28 081	Nombre de couleurs : 256
Destruction de couleurs	Destruction de couleurs	Conservation des couleurs
Poids : 16.97 Ko (17374 octets)	Poids : 77.56 Ko (79419 octets)	Poids : 1.74 Ko (1783 octets)

Veillez donc bien à ne pas convertir aveuglément vos images : le format PNG n'est pas un format magique, qui exprime tout son potentiel par une simple conversion ! Ce n'est pas non plus parce que l'image est au format PNG que le potentiel du format est exploité entièrement. Quant à JPEG, estimez un choix de formats avant d'enregistrer l'image dans ce format : il conviendra pour les photographies, mais certainement pas pour les captures, logos simples, etc.

Méthode d'encodage du PNG

A l'inverse des formats GIF et JPEG, un éditeur -classique- qui enregistre en PNG va choisir d'encoder l'image selon l'image : il n'applique pas une méthode stricte et définitive qui peut endommager l'image, mais choisit le meilleur compromis parmi les trois formats d'encodage dont il dispose (Paletted, GrayScale ou TrueColor). A cette notion s'ajoute les filtres dont PNG dispose pour modifier les données brutes de l'image, en vue d'optimiser la compression, ainsi qu'un algorithme de compression.

Le format d'encodage

Un éditeur d'image PNG va choisir d'encoder l'image selon ses caractéristiques (pour plus de détails concernant les formats disponibles, consultez l'article Présentation du format PNG).

PNG Paletted

Le PNG Paletted est choisi lorsque l'image dispose de 256 couleurs, ou moins, et lorsque l'image dispose de nombreux pixels aux valeurs identiques (c'est le cas des captures d'écran, comme le montre l'exemple ci-contre). L'encodeur peut choisir des paliers de profondeur de l'image, afin de diminuer considérablement le poids du fichier ; cette méthode diminue également son potentiel d'édition, qui sera limité selon la valeur du palier : 1, 2, 4 ou 8 bits/pixels (2, 4, 16 ou 256 couleurs).

Lorsque l'image PNG était un TrueColor+alpha (avec un canal alpha donc) ou en cours d'édition dans une matrice TrueColor+alpha, l'encodeur a la possibilité de le convertir en PNG Paletted avec valeur alpha pour obtenir la même restitution, tout en diminuant significativement le poids du fichier. Le PNG Paletted peut être utilisé également pour les images en niveaux de gris à la place de GrayScale, où l'on constate quelques fois un gain d'espace poids.

Dans le cas de notre exemple, l'utilitaire a choisi d'encoder l'image en Paletted : l'entête du PNG référence quelques entrées seulement, et beaucoup de pixels ont la même valeur plusieurs fois à la suite ; cela va être très simple de stocker cette image (rapide donc), et le poids du fichier sera également faible, au détriment d'un potentiel d'édition propre réduit à 2 bits/pixels (4 couleurs).

PNG GrayScale

Le PNG GrayScale est choisi lorsque l'image dispose de deux couleurs : noir rgb(0,0,0), et blanc rgb(255,255,255). En niveaux de gris, un utilitaire choisira probablement le PNG Paletted, lorsque l'image n'est pas munie d'un canal alpha. Lorsque c'est le cas, le PNG est généralement conservé en PNG GrayScale+alpha ; il s'avère toutefois que lorsque l'image contient beaucoup de dégradés, celle ci est encodée en TrueColor+alpha, toujours dans un soucis de gain d'espace poids.

PNG TrueColor

Le PNG TrueColor est utilisé lorsque l'image dispose de plus de 256 couleurs. Lorsque l'image dispose moins de 256 couleurs mais qu'elle présente des dégradés, il est probable que le TrueColor soit sollicité par rapport au Paletted, car il permet de stocker l'information de manière plus efficace, sans créer des entrées dans l'entête. Lorsque l'image est munie d'un canal alpha, le TrueColor est généralement utilisé, sauf dans le cas décrit ci-dessus.

PNG Paletted / PNG TrueColor sur une image de moins de 256 couleurs avec dégradés

PNG Paletted	PNG TrueColor
Compression : Forte et filtrée	Compression : Forte et filtrée
Nombre de couleurs : 255	Nombre de couleurs : 255
Conservation des couleurs	Conservation des couleurs
Poids : 1.38 Ko (1412 octets)	Poids : 0.95 Ko (972 octets)

Filtrage et compression

L'encodeur PNG peut disposer de cinq types de filtrage à appliquer sur une image PNG ; chacun de ces filtres peut être utilisé pour chaque ligne de l'image ; dans l'exemple ci-contre, les pixels sont représentés par des carrés séparés (ce qui n'est pas le cas dans la réalité) pour bien les distinguer, et représenter les lignes et les colonnes.

Dans cet exemple, l'image comporterait 15 lignes ; lorsque l'encodeur va enregistrer l'image, il va choisir un filtre à appliquer pour chacune d'entre elles, afin de préparer l'image à la compression.

En représentant de manière vulgarisée l'opération d'un filtre, puis d'une compression après filtrage, sur les 4 premières lignes sur l'exemple de cette image, on obtiendrait :

#Filtrage :
ligne1: 0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0 -- 27x0
ligne2: 0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0 -- 27x0
ligne3: 0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0 -- 27x0
ligne4: 0-0-1-1-1-1-1-1-0-0-1-1-0-0-0-1-1-0-0-0-1-1-1-1-0-0-0 -- 2x0 + 6x1 + 2x0 + 2x1 + 3x0 + 2x1 (...) 

L'opération de compression, appliquée après le filtrage (les lettres représentent l'ordre de passage dans mon exemple ) :

#Compression :
ligne1-3: 3x27x0
ligne4: AC2x0 + B6x1 + DFHI2x1 + EGJ3x0

Synthèse de l'article

Si vous avez une remarque, une critique constructive, un quelconque point à éclaircir ou enrichir, que vous avez trouvé une erreur, une faute, vous pouvez me contacter à cette adresse.