PNG vs SVG per le prestazioni web: dimensione file, velocità di caricamento e Core Web Vitals (2026)

PNG vs SVG: il confronto tecnico definitivo per il 2025

Ogni immagine che consegni è una decisione ingegneristica. Raster o vettore? 45 KB o 3 KB? Queste scelte si accumulano su migliaia di pagine e milioni di richieste. Questa è la guida di riferimento che risolve il dibattito PNG vs SVG — con benchmark di compressione, analisi del rendering, punteggi Lighthouse e codice di produzione pronto per il deploy.

"La differenza tra un buon frontend e uno eccellente si misura nelle centinaia di decisioni sui formati immagine che nessuno vede mai."

Algoritmi di compressione: come funziona ogni formato

PNG: DEFLATE + filtraggio

PNG utilizza una pipeline a due stadi. Ogni scanline passa attraverso uno dei cinque filtri di predizione (None, Sub, Up, Average, Paeth) che sfruttano la correlazione pixel-pixel. I byte filtrati vengono compressi con DEFLATE (LZ77 + codifica Huffman). Poiché DEFLATE opera su un flusso di byte, la compressione PNG è limitata dalla ridondanza spaziale: le regioni a colore piatto si comprimono bene; le fotografie rumorose si riducono appena.

• Rapporto di compressione su icone piatte: 10:1–20:1
• Rapporto di compressione su fotografie: 1,5:1–3:1
• Costo di decompressione: ~0,8 ms/megapixel su un SoC mobile di fascia media

SVG: compressione testo + SVGO

SVG è XML. Le esportazioni non ottimizzate da Illustrator contengono metadati, artefatti dell'editor e precisione ridondante. Eseguire SVGO elimina quel rumore — tipicamente una riduzione del 40–70 % prima di gzip. In rete con Brotli, un SVG ottimizzato da 6 KB si riduce a circa 1,8 KB — più piccolo di una favicon codificata in Base64.

Analisi approfondita della pipeline di rendering

Percorso di rendering PNG

1. Fetch — La risposta HTTP arriva nel buffer di rete.
2. Decodifica — Il decoder decomprime i dati DEFLATE in un bitmap RGBA grezzo.
3. Rasterizzazione — Il bitmap viene caricato come texture GPU.
4. Compositing — Il compositor disegna la texture alla trasformazione CSS dell'elemento.

La memoria è fissa: larghezza x altezza x 4 byte. Un PNG 1920x1080 consuma ~8,3 MB di memoria GPU indipendentemente dalla trasparenza.

Percorso di rendering SVG

1. Fetch — Il payload XML arriva (spesso più piccolo di una singola scanline PNG).
2. Parsing — Il parser XML costruisce un sottoalbero DOM.
3. Stile — La cascata CSS viene applicata; viewBox e preserveAspectRatio si risolvono.
4. Pittura — Skia/Core Graphics tessellano i path in triangoli alla risoluzione corrente del dispositivo.
5. Compositing — Il risultato rasterizzato entra nel compositor come qualsiasi altro layer.

La memoria scala con la complessità dei path, non con la dimensione del canvas. Un'icona da 200 nodi: ~60 KB. Una mappa illustrata da 15 000 nodi: diversi MB con potenziali blocchi del thread principale.

Tabella benchmark: 15 scenari reali

Dati benchmark Lighthouse (2025)

Testato su pagina e-commerce: 12 icone UI, 1 logo, 3 illustrazioni, 4 foto prodotto. Simulazione Moto G Power su 4G.

Baseline tutto-PNG:

Performance: 62  |  LCP: 4,8s  |  TBT: 620ms  |  CLS: 0,08  |  Peso immagini: 2,4 MB

Ibrido (SVG vettori + WebP foto):

Performance: 94  |  LCP: 1,9s  |  TBT: 180ms  |  CLS: 0,01  |  Peso immagini: 380 KB

Delta: +32 punti performance, -2,9s di LCP, -84 % di payload immagini — solo dalla scelta dei formati.

Pattern di codice in produzione

SVG responsive con art direction

<picture>
  <source media="(max-width: 639px)" srcset="/img/logo-simple.svg" type="image/svg+xml">
  <source media="(min-width: 640px)" srcset="/img/logo-full.svg" type="image/svg+xml">
  <img src="/img/logo-full.png" alt="VectoSolve — strumenti SVG con IA"
       width="280" height="60" loading="eager" fetchpriority="high">
</picture>

Cambio densità per fallback raster

<picture>
  <source srcset="/img/hero.avif" type="image/avif">
  <source srcset="/img/hero.png" type="image/webp">
  <img src="/img/hero.png"
       srcset="/img/hero-1x.png 1x, /img/hero-2x.png 2x"
       sizes="(max-width: 768px) 100vw, 50vw"
       alt="Panoramica della dashboard prodotto"
       width="1200" height="630" loading="lazy" decoding="async">
</picture>

Accessibilità: confronto fianco a fianco

SVG è architetturalmente superiore per accessibilità e conformità WCAG 2.2 AA.

Formati del futuro: AVIF, WebP e oltre

• WebP — 25–35 % più piccolo del PNG. 97 % di supporto browser. La scelta raster sicura per il 2025.
• AVIF — 40–60 % più piccolo del PNG. 92 % di supporto e in crescita. Ideale per le fotografie.
• JPEG XL — Compressione superiore con decodifica progressiva. Supporto browser in stallo. Da monitorare.

Nessuno di questi formati sostituisce SVG per i contenuti vettoriali. La strategia vincente: SVG per il vettore, AVIF/WebP per il raster, PNG come fallback definitivo.

Utilizzo memoria: il costo nascosto

Su dispositivi mobile con memoria limitata (2–3 GB condivisi tra tutte le schede), inviare un PNG hero 2048x2048 quando un SVG da 6 KB basterebbe non è un'ottimizzazione mancata — è un bug.

Conclusione: decisioni ingegneristiche, non guerre di formati

La questione PNG vs SVG non è una questione di preferenza — è una decisione ingegneristica con conseguenze misurabili su performance, accessibilità, manutenibilità ed esperienza utente. SVG vince per i contenuti vettoriali su ogni metrica che conta nel 2025, mentre i formati raster moderni come AVIF e WebP hanno superato il PNG per i contenuti fotografici.

Fai un audit dei tuoi asset attuali. Lancia Lighthouse. Misura i tempi di pittura. Poi converti ogni PNG idoneo in SVG usando la vettorizzazione IA di VectoSolve e guarda i tuoi punteggi di performance salire. Il miglior formato immagine è quello che corrisponde al contenuto — ora hai i benchmark per dimostrarlo.

Fonti e letture aggiuntive

• MDN Web Docs — SVG — Riferimento SVG autorevole con dati di compatibilità browser
• Specifica W3C SVG 2 — Standard ufficiale sulle capacità SVG rispetto ai formati raster
• web.dev — Benchmark di performance sul confronto formati immagine e Core Web Vitals
• CSS-Tricks: Using SVG — Casi d'uso pratici e framework decisionali per scegliere SVG vs raster
• Smashing Magazine — Analisi tecniche approfondite su selezione e ottimizzazione dei formati immagine