Vous déposez un logo à fond transparent dans un convertisseur, et vous récupérez une image posée sur un rectangle blanc. L'explication avancée est toujours la même : la transparence coûte du poids, il faut bien la sacrifier quelque part. Nous avons mesuré ce que coûte réellement un canal alpha. Dans trois cas sur cinq, le garder donne un fichier plus léger que de l'aplatir.
Ce qu'est réellement la transparence d'une image
Une image ordinaire stocke trois valeurs par pixel : rouge, vert, bleu. Une image transparente en stocke une quatrième, appelée canal alpha, qui dit à quel point le pixel est opaque. Zéro signifie invisible, 255 signifie parfaitement opaque, et les 254 valeurs intermédiaires produisent les ombres douces, les bords adoucis et les voiles de couleur.
Il faut distinguer deux familles. L'alpha binaire ne prend que deux valeurs : un pixel est là ou il n'y est pas. C'est le cas d'un logo détouré, et c'est tout ce que savait faire le GIF. L'alpha continu utilise toute la plage, et c'est lui qui permet une ombre portée progressive. Le PNG et le WebP gèrent les deux. Cette distinction est la clé de tout ce qui suit, parce que les deux ne coûtent pas du tout le même prix.
Le test : garder l'alpha, ou l'aplatir sur du blanc
Nous avons pris cinq images transparentes de natures différentes, et produit deux versions WebP de chacune, à qualité identique. La première conserve le canal alpha. La seconde applique le traitement que font beaucoup d'outils : composer l'image sur un fond blanc, puis jeter l'alpha devenu inutile.
| Image | Pixels non opaques | Alpha conservé | Aplati sur blanc | Surcoût de l'alpha |
|---|---|---|---|---|
| Logo détouré, alpha binaire | 275 839 | 4,9 Ko | 5,7 Ko | −14 % |
| Palette indexée + transparence | 162 955 | 2,1 Ko | 3,3 Ko | −37 % |
| Niveaux de gris + alpha | 131 317 | 1,6 Ko | 2,2 Ko | −27 % |
| Dégradé d'opacité | 540 000 | 3,5 Ko | 2,8 Ko | +25 % |
| Carte avec ombre portée douce | 492 063 | 5,0 Ko | 1,7 Ko | +198 % |
Encodage WebP qualité 60 dans les deux cas, même image source, même encodeur. L'aplatissement compose l'image sur un fond blanc opaque avant encodage.
Pourquoi garder l'alpha peut alléger le fichier
Le résultat paraît absurde : ajouter un quatrième canal de données devrait toujours coûter. Il y a deux raisons pour lesquelles ce n'est pas le cas.
D'abord, un canal alpha de logo détouré est presque entièrement constant : du zéro partout, du 255 à l'intérieur de la forme. Une donnée constante se compresse à presque rien. Le canal alpha de notre logo pèse quelques centaines d'octets, pas des kilo-octets.
Ensuite, et c'est le point que l'on oublie, les pixels situés sous une zone totalement transparente n'ont plus besoin d'être fidèles. Ils sont invisibles. L'encodeur peut y mettre ce qui l'arrange, c'est à dire la donnée la moins chère à coder. Il économise sur les trois quarts de l'image.
L'aplatissement fait exactement l'inverse. Il remplace cette zone libre par du blanc pur qu'il faut bel et bien encoder, et il crée surtout un contour net entre le blanc et la forme. Les transitions franches sont ce qui coûte le plus cher à un codec avec perte. On paie donc un détail dont personne ne profite.
Le cas où l'alpha coûte vraiment : l'ombre portée
La dernière ligne du tableau est la plus instructive. Sur une carte posée sur une ombre douce, conserver la transparence multiplie le poids par trois.
La raison est symétrique de la précédente. Ici l'alpha n'est pas constant : il varie doucement sur la quasi totalité des pixels. Ce n'est plus un masque, c'est une seconde image en niveaux de gris, avec ses dégradés et ses détails, qu'il faut encoder en plus des couleurs. Et comme presque aucun pixel n'est totalement invisible, l'encodeur ne peut plus économiser nulle part.
C'est très probablement ce cas de figure qui explique la croyance générale. Un développeur mesure l'ombre portée, voit le poids tripler, et en conclut que la transparence est un luxe qu'il faut supprimer par défaut. Il généralise un cas particulier à toutes les images, y compris celles où sa décision alourdit le résultat.
Ce que notre convertisseur en fait, vérifié
Nous avons repassé les cinq mêmes fichiers par l'outil de production, puis compté les pixels non opaques dans le fichier rendu.
| Image | Mode du fichier rendu | Pixels non opaques, avant | Après | Résultat |
|---|---|---|---|---|
| Logo détouré | RGBA | 275 839 | 275 839 | conservée |
| Dégradé d'opacité | RGBA | 540 000 | 540 000 | conservée |
| Carte avec ombre portée | RGBA | 492 063 | 492 063 | conservée |
| Palette indexée | RGBA | 162 955 | 162 955 | conservée |
| Niveaux de gris + alpha | RGBA | 131 317 | 131 317 | conservée |
Les cinq cas ressortent au pixel près, et la conversion inverse, de WebP vers PNG, donne le même résultat. Le cas de la palette indexée mérite un mot : dans ce format, la transparence n'est pas un canal mais une couleur de la palette déclarée invisible. C'est un mécanisme différent, qu'un convertisseur doit traduire explicitement en canal alpha, faute de quoi la zone transparente ressort dans la couleur brute de la palette, souvent du noir.
Pourquoi l'aplatissement sur blanc est le mauvais choix par défaut
Le poids n'est que la moitié du problème. L'autre moitié est qu'un aplatissement est irréversible. Une fois le blanc écrit dans les pixels, aucun outil ne peut deviner ce qui était transparent. Et le blanc n'est presque jamais le bon fond :
- Un logo aplati sur blanc, posé sur un site à fond sombre, affiche un rectangle blanc autour de lui.
- Un pictogramme aplati perd la possibilité d'être recoloré ou posé sur une photo.
- Une image destinée à une impression sur papier de couleur ressort avec un cadre.
Et comme le tableau le montre, pour le cas le plus fréquent, le logo détouré, cette destruction ne fait même pas gagner de poids. Elle en fait perdre.
Quand l'aplatissement est au contraire le bon choix
Il reste légitime dans une situation précise : vous savez avec certitude sur quel fond uni l'image sera affichée, et l'image porte une ombre douce ou un dégradé d'opacité. Dans ce cas, aplatir sur la couleur exacte de ce fond, et non sur du blanc par réflexe, évite les 198 % de surcoût mesurés plus haut. C'est une optimisation volontaire, prise en connaissance du contexte d'affichage. Ce n'est pas un comportement par défaut acceptable pour un convertisseur, qui ne connaît justement pas ce contexte.
Comment vérifier qu'un fichier a gardé sa transparence
Le test le plus simple ne demande aucun outil : ouvrez le fichier et posez le sur un fond sombre. Glissez le dans une fenêtre de navigateur en mode sombre, ou dans une diapositive à fond noir. Si un rectangle clair apparaît autour du sujet, la transparence a été remplacée. Le second réflexe est de se méfier d'un fichier dont le poids a spectaculairement chuté sur une image à ombre portée : d'après nos mesures, une division par trois sur ce type d'image est le signe d'un alpha supprimé.
Ce qu'il faut retenir
- Le WebP gère la transparence aussi bien que le PNG, en alpha binaire comme en alpha continu, dans les deux sens de conversion.
- Sur un logo détouré, conserver la transparence donne un fichier 14 % plus léger que de l'aplatir sur du blanc, et jusqu'à 37 % sur une image à palette indexée.
- Sur une ombre portée douce, elle coûte en revanche 198 % de poids en plus, parce que le canal alpha devient une seconde image à part entière.
- L'aplatissement est irréversible et le blanc est rarement le bon fond : ce n'est pas un comportement par défaut défendable, seulement une optimisation à décider au cas par cas.
- Pour vérifier, posez simplement votre fichier sur un fond sombre.