ALLONLINE STORIES · VOL. III · LA TRANSPARENCE EXPLIQUÉE
PNG
La transparence est devenue une information. Comment un format ouvert a transformé alpha, les filtres de scanline et la compression sans perte en une manière fiable de transporter des graphiques numériques.
Faites défiler pour entrer dans les couches
01 · POURQUOI PNG
PNG ne devine pas ce que vous pouvez cesser de voir. Il conserve ce que vous avez exporté.
Né en 1996 comme alternative ouverte pour les graphiques web, PNG a trouvé un rôle précis : interfaces, captures, illustrations et assets dont les contours, la couleur et la transparence doivent rester intacts.
OUVERTPNGsans perte · alpha · couleur
02 · ANATOMIE
Un PNG est une séquence de chunks aux règles très claires.
La signature identifie le fichier. IHDR définit ses propriétés essentielles. Un ou plusieurs IDAT contiennent les données compressées. IEND ferme la structure. Palettes, profils colorimétriques, texte et autres éléments auxiliaires peuvent vivre entre eux.
PNG SIGNATURE
La signature de huit octets permet d’identifier le fichier avant d’interpréter les chunks.
03 · RGBA
La transparence n’est pas un effet. C’est une information par pixel.
En truecolor avec alpha, chaque pixel peut stocker rouge, vert, bleu et un canal alpha indépendant. Les séparer explique pourquoi PNG conserve des contours doux sans peindre un fond dans l’image.
RGBA
4 canaux actifs · couleur complète + transparence
04 · COMPOSITION ALPHA
Le même pixel peut vivre sur n’importe quel fond.
Alpha décrit la couverture ou l’opacité. Le navigateur mélange la couleur du pixel avec ce qui se trouve derrière, pour des contours naturels sur blanc, noir, couleur ou image.
PNG
05 · FILTRES
Avant DEFLATE, PNG tente de rendre chaque scanline plus prévisible.
Chaque ligne peut utiliser None, Sub, Up, Average ou Paeth. Le filtre ne supprime aucune information : il transforme temporairement les valeurs pour faire apparaître des motifs et de petites différences qui se compressent mieux ensuite.
SUBstocke les différences par rapport au pixel précédent de la ligne
06 · DEFLATE
Sans perte signifie reconstruire exactement les mêmes valeurs.
Après le filtrage, PNG utilise DEFLATE : recherche de séquences répétées et codage statistique. Le but est de décrire les mêmes données avec moins de bits, pas de les approximer.
07 · PALETTE VS TRUECOLOR
Parfois, 32 couleurs sont plus intelligentes que des millions.
PNG peut stocker une couleur indexée via une palette ou une couleur directe par pixel. Pour les icônes, le pixel art et les graphismes avec peu de tons, une palette compacte réduit fortement le fichier sans perte.
INDEXEDTrès efficace pour les graphismes à couleurs limitées
08 · ADAM7
Une image entrelacée peut se révéler en sept passes.
Adam7 répartit les pixels sur sept cartes. Les premières passes donnent une structure très clairsemée ; les suivantes remplissent les vides jusqu’à reconstruire l’image complète. Seul l’ordre d’arrivée change.
Passe 1 / 7
09 · APNG
PNG a aussi appris à bouger.
APNG ajoute plusieurs frames, durée, blending et disposal à l’écosystème PNG. Il est utile pour l’animation transparente, mais il faut comparer poids et compatibilité avec WebP et d’autres formats modernes.
FRAME 01 → 04
10 · COULEUR ET MÉTADONNÉES
Un PNG peut transporter plus de contexte que ce que vous voyez.
Des chunks auxiliaires peuvent décrire gamma, chromaticités, profils ICC, intention sRGB et texte. Ces données améliorent parfois la cohérence entre applications, mais ajoutent aussi des octets et de la complexité.
11 · QUAND L’UTILISER
PNG gagne quand chaque pixel compte. Il perd quand chaque octet compte davantage.
Interfaces, logos rasterisés, captures, graphismes avec texte et transparence sont le terrain naturel de PNG. Une grande photographie se compresse généralement bien mieux avec des formats à perte perceptuelle.
Texte, icônes et contours nets restent précis car la compression n’approxime pas les pixels.
Privilégiez les bonnes dimensions et la compression sans perte.12 · WORKFLOW
Optimiser PNG, c’est choisir la structure avant de poursuivre un nombre de Ko.
Ajustez les dimensions, décidez si alpha est nécessaire, réduisez la palette lorsque c’est pertinent, gardez seulement les métadonnées utiles et vérifiez si WebP convient mieux à la destination.
- 01Dimensionnez à la taille réelle d’utilisation.
- 02Décidez si vous avez besoin d’alpha, de truecolor ou d’une palette.
- 03Optimisez filtres, palette et métadonnées.
- 04Comparez avec WebP pour la diffusion web.
De la transparence à l’action
Conservez chaque pixel. Supprimez seulement le superflu.
Compressez PNG, vérifiez alpha, extrayez des palettes ou comparez une sortie WebP. Tous les outils fonctionnent directement dans votre navigateur.
AllOnline Stories · Comprendre la transparence change la façon de l’exporter.