Trasparenza delle immagini

La trasparenza delle immagini permette di vedere attraverso alcune parti dell'immagine grazie a un canale alfa, che stabilisce quali pixel siano del tutto visibili, parzialmente visibili o completamente trasparenti.

Related workflow terms: Formato immagine.

Come funziona la trasparenza

In un'immagine RGB standard, ogni pixel memorizza tre valori: rosso, verde e blu. Questi tre canali si combinano per produrre il colore visibile. La trasparenza aggiunge un quarto canale, quello alfa, che controlla l'opacità di ogni pixel.

Il canale alfa memorizza un valore per ogni pixel, in genere compreso tra 0 (completamente trasparente) e 255 (completamente opaco). Un pixel con valore alfa 128 è trasparente al 50% e lascia intravedere i colori sottostanti a metà intensità. Questo controllo per singolo pixel consente sfumature uniformi dall'opaco al trasparente, ombre morbide che si fondono con qualsiasi sfondo e bordi con antialiasing privi del tipico effetto a scaletta.

Quando un'immagine trasparente viene collocata sopra un'altra immagine o uno sfondo colorato, il motore di rendering compone i livelli: per ogni pixel, miscela il colore in primo piano con quello dello sfondo in base al valore alfa. Questa composizione avviene in tempo reale nei browser, negli strumenti di progettazione e nei visualizzatori di immagini.

Il canale alfa aumenta le dimensioni del file perché memorizza un valore in più per ogni pixel. In un'immagine da 1000x1000 pixel aggiunge circa un milione di byte di dati non compressi. La compressione riduce questo sovraccarico, ma le immagini trasparenti rimangono sempre un po' più grandi delle equivalenti completamente opache.

Formati che supportano la trasparenza

Non tutti i formati gestiscono la trasparenza e quelli compatibili la implementano in modi diversi.

• PNG — trasparenza alfa completa con 256 livelli di opacità per pixel. È la scelta standard per screenshot trasparenti, icone ed elementi dell'interfaccia ed è supportato ovunque.
• WebP — trasparenza alfa completa sia in modalità lossy sia lossless. Nella maggior parte dei casi produce file trasparenti più piccoli del PNG. È ampiamente supportato dai browser.
• GIF — solo trasparenza binaria. Ogni pixel è completamente trasparente o completamente opaco. Non essendoci trasparenza parziale, i bordi risultano frastagliati. È adatto alle animazioni semplici, non ai lavori che richiedono trasparenza di qualità.
• AVIF — trasparenza alfa completa con un'ottima compressione. Produce i file trasparenti più piccoli, ma la codifica è più lenta e il supporto sulle piattaforme è meno esteso.
• SVG — supporta l'opacità a livello di forma tramite CSS e attributi. Poiché è un formato vettoriale, la trasparenza viene definita per elemento e non per pixel.
• JPG — non supporta alcuna trasparenza. Al salvataggio, le aree trasparenti diventano di colore pieno.

La scelta dipende dal flusso di lavoro. Per la massima compatibilità, PNG è l'opzione più sicura. Per l'ottimizzazione web, WebP offre il miglior equilibrio tra dimensioni e supporto.

Trasparenza e screenshot

Gli screenshot standard catturano lo schermo così com'è, sfondi compresi. L'immagine risultante è completamente opaca: non contiene pixel trasparenti, perché lo schermo mostra contenuti pieni.

La trasparenza diventa utile in diversi scenari. Se acquisisci una finestra o un elemento dell'interfaccia da usare in materiali di marketing, documentazione o presentazioni, rimuovere lo sfondo e sostituirlo con la trasparenza consente di collocare l'elemento in modo naturale su qualsiasi superficie.

Alcuni strumenti possono acquisire direttamente singole finestre con lo sfondo trasparente, eliminando lo sfondo del desktop o dell'applicazione al momento della cattura. Altri producono normali immagini opache da elaborare in seguito con strumenti di rimozione dello sfondo, così da isolare il soggetto e aggiungere la trasparenza.

La trasparenza è particolarmente utile negli screenshot di prodotto destinati a schede sugli app store, landing page o presentazioni commerciali. Permette di collocare l'interfaccia su sfondi coordinati con il brand, dentro mockup di dispositivi o accanto ad altri elementi, senza lasciare bordi rettangolari visibili.

Per questo è spesso più utile dopo l'acquisizione che durante. I team isolano una sola volta la finestra o la scheda dell'interfaccia, la salvano con trasparenza e riutilizzano la risorsa in materiali di marketing, documentazione e mockup di dispositivi.

Errori comuni

• Salvare immagini trasparenti come JPG. Il JPG non supporta la trasparenza. Le aree trasparenti vengono riempite con un colore pieno e i dati corrispondenti vanno persi definitivamente. Usa PNG, WebP o AVIF.
• Non controllare il risultato su sfondi diversi. Un'immagine che appare corretta su bianco può mostrare bordi o aloni su uno sfondo scuro. Prima della pubblicazione, prova le immagini trasparenti su più colori di sfondo.
• Confondere la scacchiera con il contenuto reale. Negli editor di immagini, la scacchiera grigia e bianca indica le aree trasparenti e non fa parte dell'immagine. Se appiattisci o esporti correttamente, questo motivo non deve comparire nel file finale.
• Ignorare l'aumento delle dimensioni dovuto al canale alfa. La trasparenza aggiunge dati. Se non serve, salvare senza canale alfa produce un file più piccolo. Alcuni strumenti consentono di rimuovere il canale alfa durante l'esportazione.