Come salvare PNG trasparenti senza bordi bianchi

Cosa memorizza realmente un canale alfa

Un pixel PNG contiene quattro numeri: rosso, verde, blu e alfa. Alfa indica l’opacità, da 0 (invisibile) a 255 (completamente opaco). Il dettaglio fondamentale è che un pixel conserva i propri valori RGB anche quando l’alfa è basso. Un pixel può essere bianco puro e trasparente al 90 percento. Lo noterai appena, finché non viene composto su qualcosa di scuro: a quel punto quel bianco tenue diventa visibile.

Ogni problema di bordo bianco è una variante dello stesso fenomeno: pixel dei bordi parzialmente trasparenti che contengono il colore sbagliato sotto.

Causa 1: bordi antialias mescolati con il bianco

Le immagini digitali hanno pixel quadrati; gli oggetti reali hanno bordi curvi. L’antialiasing colma la distanza rendendo i pixel lungo un bordo una miscela dell’oggetto e di ciò che sta dietro. Un pixel coperto al 40 percento da un logo rosso su una pagina bianca viene memorizzato come rosa chiaro: 40 percento rosso mescolato con 60 percento bianco.

Ora rimuovi lo sfondo. Uno strumento tipico elimina i pixel molto simili al colore di sfondo e lascia gli altri. Il pixel rosa chiaro non è abbastanza vicino al bianco puro, quindi sopravvive a piena opacità, ancora rosa. Moltiplicalo per ogni pixel del contorno e ottieni un bordo chiaro di un pixel lungo tutta la forma.

Gli strumenti migliori fanno qualcosa di più intelligente: anziché una scelta binaria tra conservare ed eliminare, impostano quel pixel al 40 percento di alfa e tentano di recuperare il rosso sottostante. Ma recuperare il vero colore da una miscela significa stimarlo, e la quantità di bianco che riescono a eliminare determina quanto pulito appare il bordo.

Causa 2: il formato ha eliminato il canale alfa

JPEG non ha canale alfa. Nessuno. È un formato a tre canali progettato per fotografie e nel file non c’è spazio per la trasparenza. Quando salvi un’immagine trasparente come JPG, il codificatore la appiattisce su uno sfondo, quasi sempre bianco, e la trasparenza viene persa permanentemente.

È qui che si verifica il classico disastro. Esporti un PNG pulito, poi lungo il percorso qualcosa lo converte in JPG: un CMS che ridimensiona i caricamenti, un’app di chat che comprime gli allegati, uno strumento di design che esporta un’anteprima, un client email. Lo sfondo trasparente diventa un rettangolo bianco uniforme e, se rimuovi nuovamente il bianco, lavori su bordi compressi in JPEG, molto più irregolari degli originali.

Nota la riga GIF. Trasparenza a un bit significa pixel completamente visibili o invisibili: nessuna copertura parziale, quindi antialiasing impossibile e bordi seghettati. Convertire un PNG uniforme in GIF scambia un alone morbido con una scalinatura.

Causa 3: contaminazione cromatica dei bordi

Alcuni editor memorizzano immagini trasparenti con un colore di contaminazione: RGB dei pixel completamente trasparenti viene impostato a un colore, solitamente bianco, perché alfa zero dovrebbe renderlo irrilevante. Di solito lo è. Ma alcuni renderer e molte operazioni di ridimensionamento mediano pixel vicini compreso i loro valori RGB, ponderati o meno per l’alfa. Un ridimensionamento ingenuo preleva quel bianco dai pixel invisibili e lo spalma sul bordo visibile.

Ecco perché un’immagine può sembrare perfetta a dimensioni originali e sviluppare un alone dopo essere stata ridotta a miniatura. La tecnica corretta è l’alfa premoltiplicato, in cui i valori RGB vengono memorizzati già moltiplicati per l’alfa affinché la media si comporti correttamente. La maggior parte dei browser e motori moderni lo gestisce bene; le vecchie procedure e alcuni codici personalizzati no.

Correzioni, in ordine di preferenza

1. Non introdurre il problema

Se controlli la sorgente, questa è di gran lunga la scelta migliore. Esporta la grafica dallo strumento in cui è stata creata con sfondo trasparente fin dall’inizio, anziché appiattirla sul bianco e poi rimuoverlo. Strumenti vettoriali, renderer 3D e app di design supportano tutti l’esportazione alfa. Ogni passaggio di rimozione è un passaggio che può andare storto.

Se generi immagini con un modello IA, chiedi esplicitamente uno sfondo trasparente oppure un colore di sfondo assente dal soggetto. Il magenta acceso è la scelta tradizionale: nulla di naturale ha quel colore, quindi la separazione è inequivocabile.

2. Rimuovi lo sfondo su un colore contrastante

L’alone bianco esiste perché lo sfondo era bianco. Se il soggetto si trova invece sul magenta o sul verde fluorescente, i pixel residui del bordo sono magenta o verdi: un effetto probabilmente peggiore, ma molto più facile da rilevare e correggere per uno strumento, proprio perché quei colori sono così lontani da qualsiasi colore del soggetto.

Il nostro Rimozione dello sfondo funziona campionando i pixel degli angoli per identificare il colore dello sfondo ed eliminando i pixel corrispondenti, poi esportando un PNG trasparente. Gestisce bene sfondi uniformi e a tinta unita: foto di prodotti sul bianco, loghi su un unico colore, grafica esportata da uno strumento. Non è progettato per foto con sfondi affollati o sfumati, dove è invece adatto un metodo di segmentazione del soggetto.

3. Contrai il canale alfa di un pixel

Se un alone è già incorporato, la correzione più semplice e affidabile è ridurre leggermente l’area visibile affinché l’anello contaminato ne resti fuori. In un editor: carica il canale alfa come selezione, contraila di un pixel, inverti ed elimina. In Photoshop corrisponde a Layer → Matting → Defringe, che esegue all’incirca questo automaticamente; GIMP offre Layer → Transparency → Threshold Alpha e le opzioni Script-Fu di rimozione dell’antialiasing.

Il compromesso è reale: stai eliminando un pixel di dettaglio autentico del bordo. Su un logo da 2000 pixel non se ne accorgerà nessuno. Su un’icona da 32 pixel, un pixel è il tre percento della larghezza e la forma si assottiglierà visibilmente. Adatta la correzione all’immagine.

4. Ricolora il bordo invece di eliminarlo

Meglio per immagini piccole. Invece di rimuovere l’anello semitrasparente, sostituisci il suo RGB con il colore che dovrebbe avere, quello dei pixel interni adiacenti, mantenendo alfa invariato. Il bordo conserva morbidezza e forma; scompare solo la contaminazione. Defringe di Photoshop con un raggio piccolo approssima questo risultato ed è semplice implementarlo direttamente se lavori in codice con i dati immagine di canvas.

5. Componi sul colore di destinazione

Talvolta non serve trasparenza. Se il logo apparirà sempre su uno sfondo noto, appiattiscilo su quel colore esatto e distribuisci un’immagine normale. Niente alfa, aloni o rischi di formato. Non è tanto un ripiego quanto riconoscere che la trasparenza vale le complicazioni solo quando lo sfondo varia davvero.

Controllo del lavoro

Prima di considerare finito un ritaglio, passa in rassegna questo elenco. Richiede un minuto e intercetta quasi tutto.

1. Visualizzalo sul nero e sul bianco. Qualsiasi alone sarà evidente su uno dei due. Le anteprime a scacchiera degli editor ingannano perché il grigio medio nasconde sia i bordi chiari sia quelli scuri.
2. Visualizzalo al 100 percento e ridotto. Un alone che compare solo durante il ridimensionamento indica contaminazione cromatica dei bordi in quel passaggio, non un problema del file.
3. Conferma che il file sia davvero PNG o WebP. Controlla l’estensione e i byte effettivi, non soltanto ciò che dice il CMS. Un file chiamato logo.png che è passato attraverso una procedura JPEG è un problema comune e difficile da interpretare.
4. Prova nella destinazione reale. Browser, motori di gioco e flussi di stampa compongono le immagini in modi diversi. L’unico test che conta è quello nel contesto in cui l’immagine verrà davvero usata.
5. Cerca un livello indesiderato che copre tutta la tela. Un livello di sfondo quasi invisibile con opacità dell’1 percento non apparirà nell’editor, ma produrrà una velatura tenue nell’esportazione.

Domande frequenti