ALLONLINE STORIES · VOL. III · TRASPARENZA SPIEGATA
PNG
La trasparenza è diventata informazione. Come un formato aperto ha trasformato alpha, filtri scanline e compressione lossless in un modo affidabile di trasportare grafica digitale.
Scorri dentro i livelli
01 · PERCHÉ PNG
PNG non indovina cosa puoi smettere di vedere. Conserva ciò che hai esportato.
Nato nel 1996 come alternativa aperta per la grafica web, PNG ha trovato un ruolo preciso: interfacce, screenshot, illustrazioni e asset in cui bordi, colore e trasparenza devono restare intatti.
APERTOPNGlossless · alpha · colore
02 · ANATOMIA
Un PNG è una sequenza di chunk con regole molto chiare.
La firma identifica il file. IHDR definisce le proprietà essenziali. Uno o più IDAT contengono i dati compressi. IEND chiude la struttura. Tra questi possono vivere palette, profili colore, testo e altri elementi ausiliari.
PNG SIGNATURE
La firma di otto byte identifica il file prima di interpretare qualsiasi chunk.
03 · RGBA
La trasparenza non è un effetto. È informazione per pixel.
In truecolor con alpha, ogni pixel può memorizzare rosso, verde, blu e un canale alpha indipendente. Separarli spiega perché PNG mantiene bordi morbidi senza dipingere uno sfondo nell’immagine.
RGBA
4 canali attivi · colore completo + trasparenza
04 · ALPHA COMPOSITING
Lo stesso pixel può vivere su qualsiasi sfondo.
Alpha descrive copertura o opacità. Il browser fonde il colore del pixel con ciò che si trova dietro, così un bordo semitrasparente resta naturale su bianco, nero, colore o immagine.
PNG
05 · FILTRI
Prima di DEFLATE, PNG prova a rendere ogni scanline più prevedibile.
Ogni riga può usare None, Sub, Up, Average o Paeth. Il filtro non elimina informazioni: trasforma temporaneamente i valori per far emergere pattern e piccole differenze che poi si comprimono meglio.
SUBmemorizza le differenze rispetto al pixel precedente della riga
06 · DEFLATE
Lossless significa ricostruire esattamente gli stessi valori.
Dopo il filtraggio, PNG usa DEFLATE: ricerca di sequenze ripetute e codifica statistica. L’obiettivo è descrivere gli stessi dati con meno bit, non approssimarli.
07 · PALETTE VS TRUECOLOR
A volte 32 colori sono più intelligenti di milioni.
PNG può memorizzare colore indicizzato tramite palette o colore diretto per pixel. Per icone, pixel art e grafica con pochi toni, una palette compatta può ridurre molto il file senza renderlo lossy.
INDEXEDMolto efficiente per grafica con colore limitato
08 · ADAM7
Un’immagine interlacciata può rivelarsi in sette passaggi.
Adam7 distribuisce i pixel in sette mappe. I primi passaggi danno una struttura sparsa; quelli successivi riempiono i vuoti fino a ricostruire l’immagine completa. Cambia solo l’ordine di arrivo.
Passaggio 1 / 7
09 · APNG
PNG ha imparato anche a muoversi.
APNG aggiunge frame multipli, durata, blending e disposal all’ecosistema PNG. È utile per animazioni trasparenti, ma per il web conviene confrontare peso e supporto con WebP e formati moderni.
FRAME 01 → 04
10 · COLORE E METADATA
Un PNG può trasportare più contesto di quello che vedi.
Chunk ausiliari possono descrivere gamma, cromaticità, profili ICC, intento sRGB e testo. Queste informazioni possono migliorare la coerenza tra applicazioni, ma aggiungono byte e complessità.
11 · QUANDO USARLO
PNG vince quando conta ogni pixel. Perde quando conta di più ogni byte.
Interfacce, loghi rasterizzati, screenshot, grafica con testo e trasparenza sono terreno naturale per PNG. Una foto grande di solito si comprime molto meglio con formati pensati per perdita percettiva.
Testo, icone e bordi netti restano nitidi perché la compressione non approssima i pixel.
Dai priorità alle dimensioni corrette e alla compressione lossless.12 · WORKFLOW
Ottimizzare PNG significa scegliere la struttura prima di inseguire un numero di KB.
Ridimensiona, decidi se serve alpha, riduci la palette quando opportuno, conserva solo i metadata utili e verifica se WebP è più adatto alla destinazione.
- 01Dimensiona alla misura reale di utilizzo.
- 02Decidi se serve alpha, truecolor o palette.
- 03Ottimizza filtri, palette e metadata.
- 04Confronta con WebP per il delivery web.
Dalla trasparenza all’azione
Conserva ogni pixel. Elimina solo ciò che non serve.
Comprimi PNG, controlla alpha, estrai palette o confronta un output WebP. Tutti gli strumenti funzionano direttamente nel browser.
AllOnline Stories · Capire la trasparenza cambia il modo in cui esporti.