Il canale alfa è il quarto valore memorizzato in un pixel che controlla quanto è trasparente, seduto accanto ai valori rosso, verde e blu che ne determinano il colore. Alpha copre una gamma che va dal completamente invisibile al completamente solido, con ogni livello di trasparenza parziale nel mezzo. È l'unico motivo per cui un logo PNG può fluttuare in modo pulito su qualsiasi sfondo mentre un JPG no, perché JPG non ha alcun canale alfa. La trasparenza non è uno scherzo dell'occhio o una proprietà dell'intera immagine; si tratta di dati allegati a ogni singolo pixel. Questa guida spiega cos'è il canale alfa, come memorizza centinaia di livelli di trasparenza, i calcoli di composizione che fondono insieme i livelli trasparenti, quali formati lo supportano e cosa succede quando converti un'immagine da un formato a un altro.

Cos'è in realtà il canale alfa

Ogni immagine digitale è una griglia di pixel e ogni pixel memorizza numeri che la descrivono. In un'immagine a colori standard, ogni pixel contiene tre numeri per rosso, verde e blu. Il canale alfa aggiunge un quarto numero che risponde a una domanda diversa: non di che colore è questo pixel, ma quanto dovresti vederne?. Un pixel può essere rosso brillante e completamente solido, rosso brillante e semitrasparente oppure rosso brillante e completamente invisibile. Il colore rimane lo stesso in tutti e tre i casi; cambia solo l'alfa. Questa separazione del colore dall'opacità è ciò che rende possibile la trasparenza flessibile.

Il termine deriva dal lavoro di alpha compositing pubblicato da Thomas Porter e Tom Duff nel 1984, che formalizzava come combinare le immagini con la trasparenza. Il loro modello è ancora il fondamento di ogni moderno programma di grafica, browser web e motore di gioco. Quindi il canale alfa non è una comodità recente inserita nei formati di immagine; è un'idea vecchia di decenni che alimenta silenziosamente quasi tutto ciò che vedi stratificato su uno schermo.

RGBA: il quarto valore in ogni pixel trasparente

Quando un pixel porta trasparenza, viene descritto con quattro valori invece di tre, scritti come RGBA: rosso, verde, blu e alfa. Vedi questa notazione ovunque nel design e nel lavoro sul web. Nei CSS, un colore come rgba(255, 0, 0, 0.5) significa rosso puro con un'opacità del 50%. In un editor di immagini, la stessa idea appare come un cursore di opacità su un livello. La A è sempre il valore di opacità, sovrapposto al colore anziché mescolato al suo interno.

Mantenere l'alfa separato dal colore è importante. Se la trasparenza fosse integrata nei valori del colore, un rosso semitrasparente dovrebbe essere memorizzato come un rosa più chiaro e non si potrebbe mai recuperare il rosso originale o posizionarlo in modo pulito su uno sfondo scuro. Memorizzando l'opacità come canale proprio, il formato mantiene intatto il colore reale e consente al software di decidere come fonderlo con ciò che si trova dietro di esso. Questa flessibilità è esattamente il motivo per cui i designer esportano le risorse con un canale alfa anziché pre-miscelarle su uno sfondo.

Come alfa memorizza i livelli di trasparenza

Il canale alfa non si limita a memorizzare o disattivare. In un'immagine standard a 8 bit, vale l'alfa 256 livelli distinti, da 0 a 255. Un valore pari a 0 significa che il pixel è completamente trasparente e invisibile, 255 significa che è completamente solido e opaco e ogni numero intermedio produce una trasparenza parziale. Un valore di 128 rende il pixel trasparente per circa la metà, lasciando trasparire lo sfondo con una forza del 50%.

Questi 256 livelli sono ciò che rende la trasparenza liscia piuttosto che dura. Un'ombra esterna sfuma gradualmente perché i suoi pixel portano valori alfa decrescenti verso il bordo. Un effetto vetro o fumo funziona perché pixel diversi sono trasparenti in quantità diverse. I formati di fascia alta si spingono oltre: offrono canali alfa a 16 bit 65.536 livelli per il compositing professionale, anche se 8 bit è lo standard per le immagini web e copre tutto ciò di cui l'occhio ha bisogno.

Alpha compositing: la matematica che fonde gli strati

Quando un pixel trasparente si trova su uno sfondo, il software deve elaborare il colore finale che vedi. Lo fa con una semplice formula di miscelazione. Il risultato visibile è uguale a il colore di primo piano moltiplica il suo alfa, più il colore di sfondo moltiplica uno meno quell'alfa. In parole povere, un pixel opaco al 70% contribuisce per il 70% al proprio colore e lascia passare il 30% dello sfondo.

Esegui questo calcolo su ogni pixel e otterrai un risultato pulito: un logo fuso su una foto, una didascalia sfumata su un video, un menu disegnato su una pagina web. Questo accade costantemente. Ogni volta che un browser disegna un elemento semitrasparente o un gioco esegue il rendering di uno sbuffo di fumo, esegue la composizione alfa milioni di volte al secondo. Il canale alfa fornisce il valore di opacità necessario alla formula per ciascun pixel.

Anti-aliasing: perché l'alfa rende i bordi lisci

Uno dei lavori più importanti del canale alfa è la produzione bordi puliti e con anti-aliasing. Considera il bordo curvo di un logo circolare. Senza trasparenza, la curva dovrebbe essere costruita con pixel quadrati duri, conferendole un aspetto frastagliato e a gradini. Con un canale alfa, i pixel lungo il bordo vengono impostati su trasparenza parziale, fondendo gradualmente la forma con ciò che si trova dietro di essa.

Questo è il motivo per cui un logo PNG ben realizzato appare nitido su una pagina bianca, su una pagina scura o su una foto. I pixel del bordo non sono dipinti di bianco o di un unico colore; sono parzialmente trasparenti, quindi si fondono correttamente con ogni sfondo. Appiattisci il logo sul bianco e gli stessi pixel del bordo diventeranno parzialmente bianchi. Posiziona la versione appiattita su uno sfondo scuro e vedrai un brutto alone pallido, perché la fusione uniforme era bloccata sul colore sbagliato. Il canale alfa è ciò che mantiene il bordo adattabile.

Alfa semplice e alfa premoltiplicato

Esistono due modi per memorizzare insieme colore e alfa e conoscere la differenza previene una serie di bug frustranti. Dentro alfa dritto, i valori dei colori rimangono intatti e l'alfa viene mantenuto completamente separato, ed è così che PNG memorizza la trasparenza. Dentro alfa premoltiplicato, i valori del colore vengono moltiplicati per l'alfa in anticipo, quindi un rosso trasparente al 50% viene già memorizzato come rosso più scuro.

L'alfa premoltiplicato è comune nei video, nella composizione di film e nel rendering in tempo reale perché rende più veloci alcune operazioni di fusione ed evita le frange scure ai bordi. L'alfa diretto è più comune per le immagini fisse e le risorse Web perché mantiene recuperabile il colore originale. I problemi compaiono quando il software ne aspetta uno e riceve l'altro, producendo bordi che sembrano troppo scuri o stranamente luminosi. Per il lavoro quotidiano sulle immagini con PNG e grafica web, hai a che fare con l'alfa diretto e il software lo gestisce per te.

Quali formati di immagine supportano un canale alfa

Non tutti i formati possono garantire la trasparenza, e questo è il dettaglio pratico che fa inciampare le persone durante la conversione:

PNG: un canale alfa completo a 8 bit con 256 livelli, lo standard per la grafica web trasparente.
WebP: un canale alfa completo sia nella modalità lossless che lossy, producendo file più piccoli di PNG.
AVIF: un formato moderno con supporto alfa e forte compressione, in crescita nel supporto del browser.
GIF: solo la semplice trasparenza attivata o disattivata, senza livelli parziali, quindi i bordi appaiono ruvidi.
TIFF e SVG: entrambi supportano la trasparenza, utilizzata rispettivamente nella stampa e nel lavoro vettoriale.
JPG e BMP: nessun canale alfa, quindi non possono memorizzare alcuna trasparenza.

Il punto è che PNG e WebP sono le tue scelte affidabili quando la trasparenza deve sopravvivere, GIF funziona solo per ritagli dai bordi netti e JPG è fuori dal tavolo per qualsiasi cosa trasparente.

Il canale alfa sul web e nei CSS

Sul Web, il canale alfa appare in due posti: all'interno dei file di immagine e all'interno dei valori di colore CSS. Un PNG o WebP trasparente porta il suo alfa nel file stesso, quindi si sovrappone a qualsiasi sfondo della pagina. I CSS aggiungono quindi un secondo livello di controllo con i colori rgba() e hsla() e la proprietà di opacità, consentendoti di sfumare elementi, colorare sovrapposizioni e creare effetti di vetro senza modificare affatto le immagini.

Questa combinazione è il motivo per cui le interfacce moderne sembrano stratificate e morbide. Una sezione eroe potrebbe sovrapporre una sovrapposizione scura semitrasparente su una foto per rendere leggibile il testo bianco, utilizzando CSS alfa, mentre il logo in alto utilizza l'immagine alfa per adattarsi in modo pulito su entrambi. Entrambi si basano sulla stessa idea di fondo: ogni pixel ha la propria opacità e il browser compone tutto insieme in tempo reale.

Cosa succede ad alfa quando converti in JPG

Poiché JPG non ha un canale alfa, la conversione di un'immagine trasparente in JPG impone una decisione: la trasparenza deve essere sostituita con qualcosa di solido. Il convertitore appiattisce l'alfa, riempiendo ogni pixel trasparente o semitrasparente con un colore di sfondo, molto spesso bianco. Le aree trasparenti diventano solide e i bordi smussati che si basavano sull'alfa parziale vengono bloccati su quel colore di riempimento.

Questo è esattamente il motivo per cui un logo può finire in una scatola bianca o nera dopo la conversione o mostrare un debole alone attorno ai bordi. Le informazioni necessarie per fonderle con un nuovo sfondo sono scomparse, perché JPG non aveva un posto dove archiviarle. Se hai bisogno della trasparenza per sopravvivere, la risposta è mantenere il PNG o convertirlo invece in WebP. Quando desideri veramente un'immagine piatta, la scelta del giusto colore di riempimento è importante. Il nostro convertitore ti consente di scegliere il bianco, il nero o un colore personalizzato per il riempimento o di esportare WebP per mantenere interamente il canale alfa, che guida con sfondo trasparente cammina attraverso.

Problemi comuni di trasparenza e come evitarli

La maggior parte dei problemi legati alla trasparenza sono dovuti all'appiattimento del canale alfa rispetto al colore sbagliato, un processo chiamato opacizzazione. Ecco i soliti colpevoli:

Scatola bianca o nera: un PNG trasparente convertito in JPG riempie lo sfondo con un colore a tinta unita. Abbina il riempimento alla destinazione o mantieni la trasparenza.
Alone o frangia sul bordo: un logo appiccicato su bianco e poi posizionato su uno sfondo scuro mostra un contorno chiaro. Riesportare dal file trasparente originale opaco al colore corretto o mantenerlo trasparente.
Frange scure: spesso una mancata corrispondenza dell'alfa diretto rispetto a quello premoltiplicato. La riesportazione con il tipo alfa corretto risolve il problema.
Trasparenza persa dopo la modifica: l'appiattimento dei livelli o il salvataggio come JPG scarta l'alfa. Mantieni un master a livelli o PNG.

La regola che impedisce quasi tutto ciò: decidere lo sfondo prima di appiattirlo e conservare un file originale che abbia ancora il canale alfa in modo da poterlo riesportare in modo pulito.

Domande frequenti

Cos'è un canale alfa?

Il canale alfa è un valore per pixel che controlla la trasparenza, da completamente invisibile a completamente solido, memorizzato insieme al rosso, al verde e al blu che impostano il colore di un pixel.

Cosa significa RGBA?

RGBA sta per rosso, verde, blu e alfa. Il valore alfa imposta l'opacità del pixel rispetto al suo colore, quindi rgba(255, 0, 0, 0.5) è rosso al 50%.

Perché PNG ha trasparenza ma JPG no?

Perché PNG include un canale alfa e JPG no. Senza uno spazio in cui archiviare l'opacità per pixel, JPG non può mantenere alcuna trasparenza.

Quanti livelli di trasparenza può memorizzare un canale alfa?

256 livelli in un'immagine standard a 8 bit, da 0 per invisibile a 255 per solido. L'alfa professionale a 16 bit offre 65.536 livelli per un compositing accurato.

Cosa succede al canale alfa quando converto in JPG?

È appiattito. Le aree trasparenti si riempiono di un colore solido, solitamente bianco, perché JPG non ha modo di memorizzare i dati di opacità.

Quali formati di immagine supportano un canale alfa?

PNG, WebP, AVIF, TIFF e SVG supporta alfa, con PNG e WebP che offrono una trasparenza parziale uniforme. GIF ha solo trasparenza attivata o disattivata e JPG non ne ha alcuna.

È meglio l'alfa semplice o l'alfa premoltiplicato?

Nessuno dei due è universalmente migliore; si adattano a diversi lavori. L'alfa diretta mantiene i colori recuperabili e si adatta alle immagini fisse, mentre l'alfa premoltiplicato accelera la fusione nel video e nel rendering in tempo reale.

Come posso mantenere la trasparenza quando riduco le dimensioni del file?

Converti in WebP invece di JPG. WebP mantiene il canale alfa riducendo le dimensioni del 25-35%, in modo che lo sfondo rimanga trasparente e il file diventi più leggero.