CSS-IG Optimisation Web, format PNG

PNG (Portable Network Graphics)

L'abréviation PNG signifie Portable Network Graphics, et se prononce ping. Le format PNG dispose de cinq types de formats distincts couramment utilisés :

Les différents format de PNG
Nom logicielEncodageProfondeurUsage
PNG-8Paletted1, 2, 4, 8 bitsCapture d'écran, logos, icônes, certains arrière-plan, transparence similaire à GIF
Niv. de grisGrayScale1, 2, 4, 8 bitsImages en noir et blanc ou certaines en niveaux de gris
Niv. de grisGrayScale+alpha16 bitsPNG GrayScale avec canal alpha (transparence, translucidité, anti-aliasing)
PNG-24TrueColor24 bitsImages avec couleurs successives (facilité de filtrage)
PNG-32TrueColor+alpha32 bitsImage de haute qualité (transparence, translucidité, anti-aliasing)

PNG Paletted (PNG-8)

Le PNG Paletted, plus couramment notifié PNG-8 (ou indexed-color, pseudocolor, colormapped, palette-based) utilise l'encodage Paletted pour stocker les données. Il utilise un encodage par paliers, selon le nombre de couleurs qui sont indexées dans la palette de couleur.

Encodage et correspondance de couleurs
Nombre de couleursProfondeurNom logiciel
1 à 21 bit / pixelPNG-1
3 à 42 bits / pixelPNG-2
5 à 164 bits / pixelPNG-4
17 à 2568 bits / pixelPNG-8

Transparence (Paletted)

Chaque pixel dispose d'une valeur RVB, et peut être suivi d'une valeur d'opacité pouvant varier de 0 (totalement transparence) à 255 (aucune opacité). Seules les valeurs 0 et 255 sont supportées par le navigateur Internet Explorer (v4.0 à v6.0).

Transparence Paletted
Pas de transparenceTransparence binaireTransparence à opacités
Carré bleu et noirCarré bleu, certains couleurs transparentesCarré bleu et noir avec bleus opaques
10 couleurs bleues différentes5 bleus opacité à 0Opacités différentes pour chaque bleu
Support depuis IE 4.0Support depuis IE 4.0Non supporté jusqu'à IE 7.0

Note : les images restituées ci-dessus ne pourront être affichées correctement sur certaines versions (1.0 à 6.0) de Internet Explorer, ainsi que sur les navigateurs utilisant son environnement.

Quantification

Le PNG Paletted peut utiliser une méthode de quantification ou la méthode dithering pour atténuer la dégradation physique de l'image. Elle consiste à simuler la présence de plus de couleurs que l'image n'en contient.

Quantification
Dégradé de rouge non quantifiéDégradé de rouge quantifié
32 couleurs (Paletted)32 couleurs (Paletted)

PNG GrayScale

Le PNG GrayScale a été conçu pour stocker des images ayant un nombre limité de couleurs, tout comme PNG Paletted : lui aussi est limité à 256 couleurs au maximum, utilisant les mêmes paliers pour la profondeur. Sa raison d'être est le stockage des images en niveaux de gris ou en noir et blanc. Sa méthode de stockage lui permet d'obtenir un meilleur résultat que PNG Paletted lorsque l'image n'a pas été altérée.

PNG GrayScale
PNG Paletted Bonhomme gris logoPNG GrayScale Bonhomme gris logo
PalettedGrayScale
8282
2011 octets1255 octets

PNG GrayScale+alpha

Le PNG GrayScale+alpha bénéficie du canal alpha du PNG, lui permettant un filtre anti-aliasing, une transparence et une translucidité variable. Il est utilisé au même titre que GrayScale, pour des images en niveaux de gris ou en noir et blanc.

Le canal alpha n'est pas supporté par certains navigateurs, dont Internet Explorer 6.0 : les utilisateurs d'Internet Explorer 6.0 ne devraient pas voir une restitution correcte des images.

Anti-aliasing avec le canal alpha
CSS-IG Paletted TransparenceCSS-IG GrayScale Anti-aliasing
PalettedPNG GrayScale+alpha
Transparence PalettedTransparence canal alpha et anti-aliasing

L'anti-aliasing, ou effet anti-escalier permet d'épurer le contour de l'image afin de l'insérer dans de meilleures conditions ; cela améliore généralement la qualité au détriment de l'incompatibilité, et du poids.

Translucidité avec le canal alpha
GrayScale+alpha avec anti-aliasingGrayScale+alpha avec anti-aliasing et translucidité
PNG GrayScale+alphaPNG GrayScale+alpha
Transparence et anti-aliasingTransparence, anti-aliasing, translucidité

PNG TrueColor

A la différence du format JPEG, le PNG TrueColor est toujours sans pertes, ce qui engendre bien souvent un poids excessif sur certaines images qui n'ont pas été pré-optimisées. Le PNG TrueColor peut se montrer à l'inverse très impressionnant sur des images disposant de valeurs faciles à filtrer : c'est le cas des dégradés par exemple, ou les variables de couleurs sont continues.

Les filtres du PNG TrueColor
JPEG TrueColorPNG TrueColor filtré et compressé
JPEGPNG
51950 couleurs68850 couleurs
22346 octets746 octets

Le PNG TrueColor dispose de filtres qui lui permettent de pré-optimiser l'image (analyse des données continues) avant d'en effectuer la compression. Cela donne des résultats souvent peu compréhensibles pour l'utilisateur débutant, qui constate alors une image d'un poids extrêmement faible comparé à la quantité impressionnante de couleurs.

PNG TrueColor+alpha (PNG-32)

Le PNG TrueColor+alpha ajoute un canal alpha au PNG-24 afin d'obtenir un effet anti-aliasing et de translucidité sur l'image. Ce type de PNG n'est pas correctement pris en charge par Internet Explorer 4 à 6.

PNG-32 : Transparence Anti-aliasing et translucidité
PNG TrueColor+alpha anti-aliasingPNG TrueColor+alpha anti-aliasing et transclucidité
Transparence et anti-aliasingTranslucidité

css-ig.net - Contacter l'auteur