Cosa è realmente ogni formato

Prima di confrontare, è utile capire cosa memorizza ogni formato — perché risolvono problemi fondamentalmente diversi.

SVG — Scalable Vector Graphics

SVG è un linguaggio di markup basato su XML, non una griglia di pixel. Descrive forme, percorsi e testo come istruzioni matematiche. Un cerchio in SVG è letteralmente <circle cx="50" cy="50" r="40"/>. Ciò significa che si renderizza perfettamente a qualsiasi dimensione, può essere animato con CSS o JavaScript, ed è completamente accessibile agli screen reader.

PNG — Portable Network Graphics

PNG memorizza una griglia di pixel lossless con pieno supporto al canale alfa (trasparenza). È stato progettato per sostituire GIF per la grafica web, ed eccelle nelle immagini con bordi netti, colori piatti e testo. Il compromesso: le dimensioni dei file sono grandi per i contenuti fotografici perché ogni pixel deve essere memorizzato esattamente.

WebP — il formato moderno di Google

WebP supporta sia la compressione lossy che lossless, la trasparenza (canale alfa) e l'animazione. In modalità lossless produce tipicamente file del 25–35% più piccoli rispetto a PNG equivalenti. In modalità lossy, raggiunge la qualità JPEG con dimensioni circa il 25–30% inferiori. Il supporto browser è ora universale su Chrome, Firefox, Safari (dal 2020) e Edge.

Matrice casi d'uso: quale formato vince dove

Il formato giusto dipende dal tipo di asset, non da una preferenza universale. Ecco il confronto onesto:

Tipo di assetSVGPNGWebP
Logo / wordmark✅ Migliore⚠ Fallback❌ Evitare
Icona UI (inline)✅ Migliore⚠ Accettabile❌ Evitare
App icon / favicon✅ Sorgente✅ Buono (ICO)❌ Non supportato
Illustrazione flat✅ Migliore⚠ File grandi✅ Buono
Screenshot / UI❌ Strumento sbagliato✅ Migliore✅ Eccellente
Fotografia❌ Strumento sbagliato⚠ Troppo pesante✅ Migliore
Grafica animata✅ CSS/JS❌ Nessuna animazione✅ WebP anim
Immagine email❌ Scarso supporto✅ Universale⚠ Supporto limitato

Perché SVG è superiore per logo e icone

L'argomento contro SVG è solitamente la dimensione del file — un'illustrazione complessa può raggiungere centinaia di kilobyte. Ma per logo e icone UI, quell'argomento non si applica:

  • Indipendenza dalla risoluzione: un solo file SVG serve mobile retina, desktop 4K e stampa in grande formato. Con PNG servono varianti @1x, @2x, @3x.
  • Tematizzazione CSS: i percorsi SVG ereditano currentColor, quindi un singolo file icona si adatta alla dark mode, agli stati hover e alle riconfigurazioni del brand senza un nuovo export.
  • Interazione inline: incorporato in HTML, gli elementi SVG fanno parte del DOM — puoi animare percorsi singoli, associare event listener e usarli come target CSS.
  • Accessibilità: SVG supporta gli elementi <title> e <desc> che gli screen reader leggono direttamente.
  • Efficienza di compressione: un tipico SVG di logo gzippato è 1–4 KB. Un PNG @2x dello stesso logo raramente scende sotto i 20 KB.

Quando hai bisogno di una versione raster — per una piattaforma che non accetta SVG, per un'immagine OG, o per un fornitore di stampa — la conversione è a un clic.

Tool gratuito Convertitore SVG in PNG Converti qualsiasi SVG in un PNG pixel-perfect a qualsiasi risoluzione. Supporta sfondo trasparente e fattori di scala personalizzati.

Quando WebP batte PNG per fotografia e illustrazioni

Per contenuti fotografici e illustrazioni raster complesse, WebP ha un chiaro vantaggio su PNG e un vantaggio competitivo su JPEG:

La differenza di compressione non è accademica. Un'immagine hero da 800 KB in PNG tipicamente scende sotto i 200 KB come WebP lossy con qualità percettivamente identica. Questo ha un impatto diretto sui Core Web Vitals — specificatamente sul Largest Contentful Paint (LCP).

  • WebP lossy vs JPEG: stessa qualità percepita, ~25–30% di dimensioni inferiori. Per i contenuti fotografici, preferisci WebP a JPEG in tutti i contesti moderni.
  • WebP lossless vs PNG: stessa fedeltà pixel-perfetta, ~25–35% più piccolo. Per screenshot, catture UI e illustrazioni flat con alfa, WebP lossless è la scelta migliore.
  • WebP animato vs GIF: compressione nettamente migliore per l'animazione. Se hai bisogno di animazione senza JavaScript, WebP animation è la risposta moderna.
  • L'eccezione PNG: mantieni PNG per asset che necessitano di massima compatibilità con gli strumenti — export Figma, file sorgente Photoshop, e tutto ciò che va in un workflow di design handoff dove i dati raw lossless contano più delle dimensioni di distribuzione.

La principale avvertenza: WebP ha supporto limitato in alcuni client email (in particolare Outlook su Windows) e versioni precedenti delle app native Apple. Per la distribuzione web, non c'è più motivo di scegliere PNG rispetto a WebP.

L'eccezione favicon: perché ICO esiste ancora

Le favicon seguono regole diverse. Il classico formato favicon.ico incorpora più risoluzioni (16×16, 32×32, 48×48) in un singolo file, motivo per cui i browser lo preferiscono ancora per le icone delle schede. La pratica moderna prevede tre dichiarazioni: un ICO per i browser legacy, un PNG 192×192 per le schermate home Android, e una favicon SVG per i browser che la supportano (Firefox, Chrome 117+, Edge).

La sorgente per tutti questi dovrebbe essere il tuo SVG originale. Un generatore di favicon adeguato lo converte in tutti i formati necessari in un solo passaggio.

Tool gratuito Generatore di Favicon Carica un SVG o PNG e ottieni un pacchetto favicon completo: ICO, 16×16, 32×32, 192×192, 512×512 e Apple Touch icon — pronto per essere incollato nel tuo HTML.

Email vs web vs app — stesso asset, regole diverse

Email

I client email sono l'ambiente più conservativo. SVG è bloccato da Gmail, Outlook e Apple Mail. WebP non è supportato in Outlook su Windows (che usa ancora il motore di rendering di IE). La scelta sicura: PNG per logo e illustrazioni, JPEG per fotografia. Mantieni le dimensioni dei file sotto i 100 KB per immagine.

Web

Il web moderno offre la massima flessibilità. Usa SVG per tutti i logo, icone e illustrazioni nati come vettori. Usa WebP (lossy) per fotografia e immagini raster complesse. Usa WebP (lossless) per screenshot e immagini UI. Fornisci un fallback PNG solo se le tue analytics mostrano traffico significativo da browser precedenti al 2020.

App nativa (iOS / Android)

iOS e Android supportano entrambi SVG tramite i rispettivi formati vector drawable, ma il workflow differisce da SVG web. In pratica, le pipeline di asset delle app generano densità PNG multiple (1x, 2x, 3x) da una sorgente vettoriale. WebP è supportato nativamente da Android 4.0+ e iOS 14+.

Embedding Base64: quando le dimensioni di distribuzione non contano

Esiste uno scenario specifico in cui converti un'immagine in Base64 e la incorpori direttamente in HTML, CSS o JavaScript: quando l'asset è piccolo, deve essere disponibile senza una richiesta HTTP aggiuntiva, e non verrà memorizzato nella cache indipendentemente. Piccole icone SVG in CSS background-image, loading spinner, e data URI in template email sono i casi canonici.

La codifica Base64 aumenta la dimensione del file di circa il 33%, quindi è appropriata solo per asset piccoli (sotto ~10 KB). Per qualsiasi cosa più grande, la richiesta aggiuntiva è meno costosa dell'overhead di codifica.

Tool gratuito Convertitore Immagine in Base64 Converti qualsiasi PNG, SVG, WebP o JPEG in un data URI Base64 — pronto per essere incollato in CSS, HTML o JavaScript. Mostra la stringa codificata e l'overhead sulle dimensioni del file.

Il framework decisionale: un diagramma di flusso in prosa

Applica queste regole in ordine. Il primo match vince:

  • L'asset è nato come vettore? (logo, icona, illustrazione disegnata in Figma/Illustrator) → Usa SVG. Converti in PNG/WebP solo quando l'ambiente target non supporta SVG.
  • È una fotografia o un'immagine a gradiente complessa? → Usa WebP lossy. Usa JPEG come fallback solo per email o strumenti che rifiutano WebP.
  • È uno screenshot, una cattura UI o un'illustrazione flat con alfa? → Usa WebP lossless. Usa PNG come fallback per email e massima compatibilità.
  • È una favicon? → Genera un pacchetto ICO + PNG + SVG dalla tua sorgente vettoriale. Non usare mai WebP per le favicon.
  • Va in una email HTML? → Usa PNG (logo) o JPEG (foto). Evita completamente SVG e WebP.
  • Deve essere incorporato senza una richiesta HTTP? → Converti in Base64, ma solo se l'asset è sotto ~10 KB.

Domande frequenti

Qual è la differenza principale tra SVG e PNG? +

SVG è un formato vettoriale — memorizza le forme come istruzioni matematiche e scala senza perdita di qualità. PNG è un formato raster — memorizza una griglia di pixel fissa. SVG è ideale per logo e icone; PNG è appropriato quando hai bisogno di uno snapshot pixel-accurato di un'immagine raster.

WebP supporta la trasparenza come PNG? +

Sì. Sia WebP lossless che lossy supportano un canale alfa completo, rendendolo un valido sostituto di PNG in qualsiasi contesto che supporti il formato. Il canale alfa in WebP lossless è equivalente in qualità a PNG.

SVG è sempre un file più piccolo di PNG? +

Non sempre. Logo e icone semplici sono quasi sempre più piccoli come SVG (1–5 KB gzippati vs 20–100 KB per un PNG @2x). Illustrazioni SVG complesse con migliaia di percorsi possono superare le dimensioni raster equivalenti.

Perché WebP non è usato nelle email? +

I motori di rendering email sono estremamente frammentati. Outlook su Windows usa un vecchio motore di Internet Explorer senza supporto WebP. Gmail e Apple Mail supportano WebP in alcune versioni ma non in tutte. PNG e JPEG rimangono le uniche scelte universalmente sicure.

Posso usare SVG come favicon? +

Sì, i browser moderni (Firefox, Chrome 117+, Edge 79+) supportano le favicon SVG tramite <link rel="icon" type="image/svg+xml">. Tuttavia, Safari non supporta le favicon SVG a partire dal 2025, quindi hai ancora bisogno di un fallback ICO o PNG.

Quando dovrei convertire SVG in PNG? +

Converti SVG in PNG quando: la piattaforma target blocca SVG (client email, alcuni CMS), hai bisogno di una miniatura a risoluzione fissa per un'immagine OG, un fornitore di stampa richiede input raster, o stai generando un pacchetto favicon che necessita del formato ICO.

PixCode supporta tutte queste conversioni? +

PixCode offre un convertitore SVG in PNG per gli export raster, un Generatore di Favicon per pacchetti favicon multi-formato completi, e un convertitore Immagine in Base64 per incorporare asset nel codice. Tutti gli strumenti sono gratuiti e funzionano nel browser senza upload sul server.