La transparence du PNG

Ce guide va vous permettre de choisir parmi les différentes méthodes pour rendre une image PNG transparente et d'opter pour la meilleure méthode pour votre site Internet.

Le format PNG propose différentes méthodes pour utiliser la transparence dans une image. Selon le type, la méthode utilisée sera différente. Il y'a toutefois deux méthodes qui peuvent être recommandées pour intégrer les PNG transparents, quelque soit le type de couleurs à l'origine.

Les méthodes de transparence

Les méthodes de transparence pour le PNG est différente selon le type de couleurs du PNG. Le chunk tRNS peut être utilisé pour identifié la couleur -ou les entrées- transparente(s), tandis qu'un canal alpha pourra être utilisé pour les encodages en niveaux de gris ou en couleurs vraies.

Transparence grayscale

L'encodage grayscale peut se voir attribuer un chunk tRNS, qui va spécifier une valeur de transparence. Le chunk tRNS occupe un espace poids de 2 octets utilisateur, et consiste à stocker uniquement une valeur de niveau de gris, comprise entre 0 et 255. L'encodage se fait en 8 bits / pixels.

Transparence grayscale
Image Edition des meta-données
Transparence grayscale Transparence grayscale vue par TweakPNG

Transparence en couleurs vraies

L'encodage en couleurs vraies peut également utiliser un chunk tRNS pour obtenir une couleur transparente. Le fonctionnement est proche de grayscale : une valeur RGB est admise sous la forme x,x,x (soit 6 octets, 2 octets par valeur). L'encodage se fait en 24 bits / pixels.

Transparence true color
Image Edition des meta-données
Transparence TrueColor Transparence TrueColor vue par TweakPNG

Transparence du mode palette

L'encodage en mode palette utilise une palette pour stocker les couleurs utilisées dans l'image. Chaque entrée de la palette contient des valeurs RGB, auxquelles sont associées des valeurs alpha peuvent varier de 0 (transparence totale) à 255 (transparence nulle).

Transparence totale

La transparence totale d'une couleur peut être possible en attribuant la valeur alpha 0 à la couleur correspondante. La transparence est dite « binaire » car la valeur est soit 0, soit 255 (qui signifie totalement visible). C'est un mode de transparence très similaire à GIF.

Transparence du mode palette « binaire »
Transparence Paletted binaire
Transparence Paletted binaire

Il est à noter que ce mode de transparence est supporté depuis Internet Explorer 4. Lorsque plusieurs couleurs sont transparentes totalement, il est possible de fusionner les entrées dans la palette pour n'obtenir qu'une seule couleur non restituée. L'encodage se fait en 8 bits / pixels.

Transparence du mode palette « alpha »

Bien qu'il s'agisse exactement de la même méthode de transparence (une valeur alpha dans l'entrée), ce type de transparence n'a pas été pris en charge directement par certains navigateur, dont Internet Explorer 6. C'est pourtant cette méthode qui permet d'obtenir des intégrations de qualité avec des PNG plus légers.

Transparence du mode palette « alpha »
Transparence du mode palette multiples, à niveaux
Transparence Paletted binaire

Cette méthode de transparence peut être utilisée pour simuler la présence d'un canal alpha en attribuant astucieusement des valeurs alpha aux couleurs souhaitées. Il est ainsi possible d'obtenir un rapport qualité / poids bien plus optimal qu'avec un PNG en couleurs vraies:

Conversion en mode palette

La transparence du mode palette avec pertes
Couleurs vraiesMode palette
Icône oiseau bleu - PNG truecolor Icône oiseau bleu - PNG palette
37,9 Ko 11,7 Ko

Cette conversion peut être réalisée automatiquement, mais pas avec n'importe quels outils. Le plus simple est d'utiliser les outils pngquant, Color Quantizer (Windows), ou ImageAlpha (Mac).

Transparence grayscale + alpha

L'encodage grayscale + alpha est composé de la même manière qu'une image grayscale, auquel un canal alpha est ajouté ; la profondeur de grayscale étant 8 bits, auquel s'ajoute 8 bits du canal alpha, une image en grayscale+alpha se code donc avec une profondeur de 16 bits/pixels.

Transparence grayscale + alpha
Image Edition des meta-données
Transparence grayscale Transparence grayscale vue par TweakPNG

Transparence couleurs vraies + alpha

L'encodage couleurs vraies + alpha est une image de 24 bits à laquelle on ajoute un canal alpha pour la gestion de la transparence et de la translucidité. Ce type d'image, qui est aussi un des plus répandue sur le Web, s'encode donc avec une profondeur de 32 bits/pixels.

Transparence truecolor+alpha
Image Edition des meta-données
Transparence truecolor Transparence truecolor vue par TweakPNG

Il existe différentes méthodes pour optimiser ce type d'image, avec ou sans pertes. Pour un usage Web, une solution très efficace est d'utiliser la méthode de filtrage avec pertes. Il permet généralement d'obtenir une image de meilleure qualité que le mode palette, tout en réduisant le poids du fichier.

Optimisation par filtrage avec pertes

La transparence du canal alpha (filtrage avec pertes)
Couleurs vraiesFiltrage avec pertes
Icône oiseau bleu - PNG truecolor Icône oiseau bleu - Filtrage avec pertes
37,9 Ko 21,2 Ko

Cette conversion peut s'effectuer automatiquement, mais nécessite un outil adapté. TruePNG, ImageAlpha (Mac), ou Median Cut Posterizer peuvent également être utilisés.

Optimisation de la transparence

La transparence d'un PNG peut être optimisée de diverses manières, incluant l'amélioration de l'intégration ou la diminution du poids du fichier. La première méthode, qui est également automatisée par certains outils, est d'effectuer une modification des valeurs RGB non restituées.

Modifications des valeurs RGB

Pour les PNG qui disposent d'un canal alpha, il est possible d'effectuer une transformation des valeurs RGB lorsque la valeur alpha correspondante est 0, car la couleur n'est de toute manière pas affichée dans un navigateur Web. Cette transformation consiste à remplacer la valeur RGB par une autre couleur.

Exemples de remplacement des couleurs
Original Par du noir, 0,0,0 Par du blanc, 255,255,255
Données RGB étirées vers la gauche Données RGB en 0,0,0 Données RGB en 255,255,255
Etirement vers le haut Etirement vers la droite Etirement vers le coin droit
Données RGB étirées vers le haut Données RGB étirées vers la droite Données RGB étirées vers la droite
Etirement vers le bas Etirement vers la gauche Etirement filtre paeth
Données RGB étirées vers le bas Données RGB étirées vers la gauche Données RGB étirées vers le bas

Ces transformations sont celles qui permettent d'obtenir les PNG les plus légers sur les plus nombreux benchmarks. Ces opérations peuvent s'effectuer plus ou moins automatiquement mais nécessitent aussi plus de temps de traitement, car il faut tester individuellement chaque transformation:

Outils qui remplacent les valeurs RGB
Outil Description
cryopng cryopng peut créer ou tester les transformations selon le filtre sélectionné.
cryopng -f0-4 -zc9 -zm9 -zs0,1 image.png -out resultat.png 
TruePNG TruePNG teste différentes modifications décrites dans le TruePNG tutorial.
truepng -o1 -a1 image.png -out resultat.png 
ZopfliPNG ZopfliPNG modifié par Frédéric Kayser - l'auteur de cryopng (télécharger pour Windows).
zopflipng -m --alpha_cleaner=0124 image.png resultat.png 

Il est également possible d'obtenir de très bons résultats avec pngslim: il a été étudié pour obtenir un rapport poids / temps de traitement ajusté, et permet généralement d'obtenir la meilleure solution.

Le type de couleur

L'image peut être testée pour être mieux encodée sous différents types de couleur du PNG. Cette étape devrait intervenir après l'opération qui consiste à modifier les valeurs RGB: en convertissant ces données, il est possible que l'outil puisse encoder avec un nouveau type de couleur jusqu'alors indisponible:

Modifications des données RGB, et encodage avec le bon type de couleur
OriginalEtape 1/2Etape 2/2
Icône oiseau gris - PNG truecolor Icône oiseau gris - PNG truecolor Icône oiseau gris - PNG truecolor
36,1 Ko 25,1 Ko 18,6 Ko
  • Etape 1/2: elle consiste à modifier les valeurs RGB non restituées. Dans cet exemple, la solution choisie est de diffuser la couleur 255,255,255 (blanc) sur toute l'image.
  • Etape 2/2: une fois les données RGB modifiées, il est désormais possible de choisir un nouveau type de couleur. L'image est en niveaux de gris, il est possible de choisir grayscale.

Le chunk tRNS

Il peut être utilisé à la place du canal alpha sous certaines conditions selon le type de couleur. Dans la plupart des cas, il va avantageusement le remplacer, car il occupe un poids nettement inférieur. Pour réussir cette réduction sans pertes visuelles, il y'a des restrictions pour chaque type de couleur:

Conditions de suppression du canal alpha
Réduction Description
grayscale L'image doit être en niveaux de gris, une seule couleur transparente.
truecolor L'image doit avoir une seule couleur transparente.
paletted L'image doit contenir maximum 256 couleurs.
Réduction sans pertes visuelles de grayscale+alpha vers grayscale tRNS
grayscale+alphagrayscale tRNS
Icône oiseau gris - PNG grayscale+alpha Icône oiseau gris - grayscale tRNS
13,9 Ko 11,5 Ko
Réduction sans pertes visuelles de truecolor+alpha vers truecolor tRNS
truecolor+alphatruecolor tRNS
Icône oiseau bleu - PNG truecolor+alpha Icône oiseau bleu - PNG truecolor+tRNS
29,6 Ko 16,3 Ko
Réduction sans pertes visuelles de truecolor+alpha vers paletted tRNS
truecolor+alphapaletted tRNS
Icône oiseau bleu - PNG truecolor+alpha Icône oiseau bleu - PNG truecolor+tRNS
26,7 Ko 11,7 Ko

Optimiser le chunk tRNS

En mode palette, le chunk tRNS contient les valeurs de transparence de chaque entrée. Ces valeurs varient entre 0 (transparence totale) et 255 (pas de transparence). Il est possible d'optimiser l'organisation des couleurs, afin de mieux positionner les valeurs transparentes.

13,4 Ko - 253 valeurs tRNS, classement des couleurs par popularité
imagepalette
Icône oiseau bleu - 253 tRNS non classés Icône oiseau bleu - 253 tRNS non classés - palette

Dans l'exemple, ci-dessus seule une couleur est transparente: il s'agit de l'entrée 1, dont les valeurs RGB sont 0,0,0 (noir). Toutes les autres valeurs de transparences sont à 255, indiquant que la couleur doit être pleinement restituée: ces valeurs sont inutiles et peuvent être supprimées.

13,1 Ko - 1 valeurs tRNS, classement des couleurs par popularité
imagepalette
Icône oiseau bleu - 1 tRNS non classée Icône oiseau bleu - 1 tRNS non classée - palette

Lorsque les valeurs sont supprimées, seule l'entrée 1 est totalement transparente. Les autres entrées se voient destituées d'une quelconque valeur, définissant par défaut que la couleur est pleinement restituée. Le poids du fichier a légèrement diminué (de 1 octet par valeur inutile).

Toujours placer la valeur tRNS au début?

La plupart du temps, lorsque le PNG ne dispose que d'une seule entrée transparente, il est souvent plus judicieux de placer cette valeur au début de la palette. Toutefois, lorsqu'il dispose de plusieurs entrées transparentes, le classement des couleurs peut avoir un poids plus important.

12,7 Ko - 253 valeurs tRNS, classement des couleurs par similarité dans L*a*b*
imagepalette
Icône oiseau bleu - 253 tRNS classées Icône oiseau bleu - 253 tRNS classées - palette

Dans cet exemple, l'entrée transparente est placée à la fin de la palette, générant des valeurs de transparences inutiles pour les autres couleurs. Malgré le poids de ces valeurs, le poids du fichier a diminué, sous l'influence du classement des couleurs.

12,3 Ko - 1 valeurs tRNS, classement des couleurs par similarité dans L*a*b*
imagepalette
Icône oiseau bleu - 1 tRNS classées Icône oiseau bleu - 1 tRNS classées - palette

Ce résultat (qui n'est pas forcément le meilleur) est simplement le même classement que précédemment, mais en plaçant cette fois la valeur transparente au début de la palette: le PNG se voit alors délesté de toutes les valeurs transparentes inutiles.

Avec des valeurs multiples

L'exercice est ici d'une toute autre complexité, puisqu'il faut mixer des résultats de combinaisons entre le classement des couleurs et celui des valeurs transparentes. Cela peut générer un nombre de classement très important, bien que certains se détachent du lot dans certains cas.

Différentes organisations des valeurs tRNS
102 tRNS (Popularité)256 tRNS (similarité)102 tRNS (similarité)
Icône oiseau bleu - 102 tRNS popularité Icône oiseau bleu - 256 tRNS similarité Icône oiseau bleu - 102 tRNS similarité
Icône oiseau bleu - 102 tRNS popularité - palette Icône oiseau bleu - 256 tRNS popularité - palette Icône oiseau bleu - 102 tRNS popularité - palette
12,1 Ko 11,7 Ko 11,8 Ko
  • 102 tRNS (Popularité): ce PNG dispose d'un classement de couleurs par popularité, avec les valeurs transparentes (102) classées au début de la palette.
  • 256 tRNS (Similarité): ce PNG dispose ignore les valeurs transparentes, et classe le PNG selon les couleurs seulement: il génère donc des valeurs tRNS inutiles (154 dans cet exemple).
  • 102 tRNS (Similarité): ce PNG bénéficie du classement précédent, mais en plaçant les valeurs transparentes au début de la palette.

Le PNG qui contient des valeurs tRNS inutiles est aussi celui qui est le plus léger dans cet exemple. Il est toutefois possible d'obtenir d'autres résultats avec de plus grands efforts sur le filtrage ou la compression, ou avec d'autres méthodes de classement.

Modifier la couleur transparente

Il est possible de modifier une valeur totalement transparente afin de favoriser le classement des couleurs. Dans cet exemple, la couleur est modifiée par 255,255,255, ce qui permet à l'algorithme de proposer un autre classement plus léger.

Modifier la valeur transparente pour favoriser le classement
original couleur 0,0,0 couleur 255,255,255
Green Lemon - one tRNS by popularity Green Lemon - one tRNS with a0 Green Lemon - one tRNS with a1
Couleurs vertes avec transparence par popularité Couleurs vertes avec transparence par similarité Couleurs vertes avec transparence par popularité avec blanc
22,4 Ko 19,4 Ko 18,9 Ko

Outils automatiques pour optimiser la transparence

Le plus simple pour les utilisateurs Windows est d'utiliser pingo qui testera la plupart des combinaisons intéressantes (transparence RGBA ou palette).

Etudier la transparence

La suite d'utilitaire d'ImageMagick vont vous permettre de modifier, d'extraire, de convertir ou d'optimiser vos images PNG transparents en couleurs vraies. Voici quelques commandes utiles:

:: Supprime la transparence en intégrant un arrière-plan d'une couleur personnalisée
convert image.png -background #ffffff -layers merge notrans.png
:: Modifier les données RGB non restituées en les remplaçant par une couleur personnalisée
convert image.png -background #000000 -alpha Background web.png
:: Extraire le canal alpha de l'image
convert image.png -set colorspace RGB -alpha extract alpha.png
:: Extraire les données RGB de l'image
convert image.png -alpha off rgb.png
:: Fusionne les données RGB et alpha pour créer un PNG RGBA
convert rgb.png alpha.png -compose copy_opacity -composite rgbalpha.png