Una delle sorprese più frustranti per web designer e sviluppatori è scoprire che lo sfondo dei PNG trasparenti diventa completamente nero o bianco dopo la conversione in WebP. Eppure WebP è perfettamente in grado di gestire trasparenze nitide e ombre esterne morbide. Ecco come convertire in blocco su macOS centinaia di file PNG trasparenti in WebP mantenendo una trasparenza impeccabile.
Perché gli sfondi trasparenti diventano neri in WebP
Le immagini PNG memorizzano i canali rosso, verde e blu più un quarto canale: il canale alfa (A), che definisce l’opacità dei pixel da 0 (completamente trasparente) a 255 (completamente opaco).
Quando un WebP convertito mostra uno sfondo nero o bianco, il motivo è quasi sempre uno di questi due:
Il convertitore scarta il canale alfa: i convertitori web più semplici o le librerie di immagini datate (come i vecchi script PHP GD) forzano le immagini in RGB a 24 bit prima della codifica. Senza canale alfa, le aree trasparenti ripiegano sul nero predefinito (RGB: 0,0,0) o sul bianco (RGB: 255,255,255).
Fusione dei colori errata (aloni scuri): se i pixel semitrasparenti lungo il bordo vengono fusi con un colore di fondo sbagliato, attorno al soggetto compaiono aloni o frange scure ben visibili.
Con una codifica conforme alle specifiche WebP ufficiali di Google, la trasparenza viene mantenuta con precisione matematica.
ConsigliatoMetodo 1: WebP Converter. (visivo e veloce)
Se preferisci un’interfaccia per Mac intuitiva, in cui controllare a occhio le immagini trasparenti prima di esportarle, WebP Converter. è lo strumento migliore.
1
Trascina i PNG trasparenti
Trascina nella finestra singoli file o intere cartelle di loghi, icone o immagini scontornate.
2
Seleziona la modalità senza perdita
Per loghi e icone, attiva «Senza perdita». Per le foto trasparenti, scegli la compressione con perdita a qualità 80.
3
Fai clic su «Avvia» per esportare
In pochi secondi vengono creati file WebP con la trasparenza intatta al 100%.
Codifica
WebP (Lossless)
—
WebP (Lossy)
80
PNG
—
Ridimensionamento
Max 1920 px
Larghezza max
1920px
Altezza max
auto
Rimuovi metadati
EXIF · GPS · fotocamera
GPS35°41'22"N · 139°41'30"E
FotocameraCanon EOS R5 · RF 50mm F1.2 L
Data di scatto2024:08:14 18:22:07
Profilo ICCDisplay P3 · mantenuto
Risultato
4032 × 3024
Prima · HEIC
3.2MB
→
Dopo · WebP (Lossless)
KB928
29% dell’originale
Il cursore a vista divisa integrato ti permette di verificare che ombre esterne delicate e bordi con antialiasing siano perfetti prima di pubblicare.
Metodo 2: la CLI cwebp con l’opzione -exact
Per chi usa il Terminale e per gli script di build, Google mette a disposizione l’utility ufficiale cwebp, installabile con Homebrew:
brew install webp
Ecco uno script della shell affidabile per convertire in blocco i PNG trasparenti. La chiave è combinare -lossless con l’opzione -exact, per evitare che i dati RGB invisibili vengano alterati:
mkdir -p webp_transparent
for f in *.png; do
[ -f "$f" ] || continue# Conserva trasparenza e canale alfa senza sbavature dei colori RGB
cwebp -lossless -exact "$f" -o "webp_transparent/${f%.*}.webp"done
In questo modo i pixel trasparenti non producono sbavature di colore sui bordi né artefatti di compressione.
Senza perdita o con perdita: quale scegliere per la trasparenza?
Tipo di immagine
Impostazione consigliata
Motivo e risparmio previsto
Loghi e logotipi
Senza perdita
Mantiene contorni nitidissimi, quasi vettoriali; circa il 26% più leggero del PNG.
Icone di app e pulsanti dell’interfaccia
Senza perdita
Conserva perfetti al pixel gli angoli arrotondati e le ombre traslucide.
Foto scontornate di prodotti / persone
Con perdita (qualità circa 80)
Conserva la trasparenza riducendo i dati della foto del 50% o più rispetto al PNG.
Acquerelli e illustrazioni
Con perdita (qualità circa 85)
Offre sfumature di colore morbide con rapporti di compressione elevati.
Domande frequenti
QWebP supporta la trasparenza (canale alfa)?
A
Sì, WebP supporta in modo nativo la trasparenza con canale alfa completo a 8 bit, proprio come i PNG a 32 bit. Gestisce senza problemi sfumature semitrasparenti, ombre esterne morbide e bordi con antialiasing. Inoltre, WebP supporta la trasparenza sia nella compressione senza perdita sia in quella con perdita, così puoi ridurre del 50% o più le foto trasparenti e le immagini scontornate.
QPerché il mio PNG trasparente ha uno sfondo nero (o bianco) dopo la conversione?
A
Questo problema comune è causato da convertitori online scadenti o da librerie di immagini obsolete (come le vecchie versioni di PHP GD). Scartano il canale alfa convertendo l’immagine in RGB a 24 bit, e così i pixel trasparenti vengono sostituiti da un nero pieno (RGB: 0,0,0) o da un bianco pieno (RGB: 255,255,255). Gli encoder nativi moderni come cwebp o le app dedicate per macOS gestiscono correttamente il canale alfa.
QPer le immagini trasparenti è meglio WebP senza perdita o con perdita?
A
Per loghi, icone di app, grafica vettoriale, elementi dell’interfaccia e illustrazioni al tratto, scegli senza perdita. Mantiene i bordi nitidi, senza sfocature né rumore di compressione, e riduce le dimensioni del file del 25–35% rispetto al PNG. Per le foto reali scontornate con trasparenza (persone, prodotti) o le illustrazioni ad acquerello, scegli con perdita (qualità 75–85) per ottenere file molto più piccoli.
QCosa fa l’opzione «-exact» di cwebp?
A
L’opzione -exact indica all’encoder di conservare i valori di colore RGB nei pixel completamente trasparenti (alfa = 0). Per impostazione predefinita, gli encoder WebP scartano i valori RGB invisibili per massimizzare la compressione. Conservarli è utile se prevedi di modificare l’immagine o di rimuoverne la maschera in seguito, oppure se vuoi evitare leggeri aloni lungo i contorni trasparenti più complessi.