Ci sono decine di tipi di file immagine, ognuno dei quali varia in base al tipo di compressione, alla formattazione e al supporto del browser. Ma due dei formati più utilizzati sono SVG e PNG.
Questi due tipi di file non potrebbero essere più diversi – ognuno più adatto dell’altro a una specifica situazione. Non sono certamente intercambiabili sotto ogni aspetto, e potreste scoprire che le immagini SVG possono svolgere compiti specifici meglio delle immagini PNG standard.
In questo articolo analizzeremo le differenze tra SVG e PNG e in quali situazioni l’uno prevale sull’altro per utilizzarli sul vostro sito web.
Guardate la Nostra Video-Guida su SVG e PNG
Cos’è SVG?
SVG sta per Scalable Vector Graphics ed è il formato di file vettoriale più usato sul web. Analizziamo la situazione:
- Scalabile: Le immagini SVG possono essere ingranditi o rimpiccioliti senza danneggiare la qualità dell’immagine. Sarà perfettamente nitida e chiara, non importa quanto grande o piccola sia.
- Vettoriale: La maggior parte dei tipi di file immagine contengono pixel. I vettori sono essenzialmente pezzi di codice che rendono un’immagine in tempo reale, convertendola nei pixel che vedete sul vostro schermo. Viene visualizzata la stessa immagine, ma quello che succede in background è molto diverso.
- Grafica: Anche se non è molto conosciuto, SVG è un tipo di file immagine come PNG, JPEG o GIF. Solo che fa le cose un po’ diversamente.
I vettori sono frammenti di codice scritti in XML che rappresentano forme, linee e colori per elaborare l’immagine.
Anche se creare un’immagine con nient’altro che codice è sempre possibile, la maggior parte delle persone usa un editor di grafica vettoriale come Inkscape o Adobe Illustrator. Potete anche convertire PNG o altre immagini raster in SVG, ma i risultati non sono sempre ottimi.
Quando la pagina viene caricata, questo codice viene convertito in grafica, quindi non potete distinguere immediatamente un SVG da un PNG. Ma dato che le SVG sono semplicemente linee di codice convertite in pixel, ciò significa che possono scalare a qualsiasi dimensione – grande o piccola – senza perdere qualità.
SVG supporta anche l’animazione e la trasparenza, e questo lo rende un formato di file molto versatile.
L’unico problema è che non è così diffuso come altri formati standard come PNG, quindi è meno supportato sui vecchi browser e dispositivi, e non è sempre il più facile da caricare sul vostro sito e farlo visualizzare correttamente.
Pro e Contro di SVG
Anche se non è ancora così diffuso come i tipi di file raster come PNG, la popolarità della grafica vettoriale sta crescendo velocemente. Le immagini vettoriali, infatti, hanno delle caratteristiche che le immagini raster non hanno. Ecco perché la gente apprezza tanto le SVG.
- Le immagini SVG sono scalabili. Potete disegnarle a qualsiasi risoluzione e si ingrandiranno o ridurranno senza danneggiare la qualità o diventare pixelate. Con le immagini raster, dovete sapere quale dimensione volete fin dall’inizio, o potreste rischiare di rendere l’immagine troppo grande o troppo piccola.
- Le SVG appaiono sempre nitide e belle proprio perché non subiscono mai perdite di qualità. Le immagini raster possono iniziare ad apparire sfocate quando vengono ridimensionate anche solo leggermente.
- Dato che le SVG sono solo codice, la dimensione del file è minima e ben ottimizzata. Esistono anche ottimizzatori di SVG che le rendono ancora più gestibili. Con le SVG, il vostro sito probabilmente caricherà un po’ più velocemente.
- A differenza delle PNG, le SVG supportano le animazione.
SVG ha diversi vantaggi rispetto al formato PNG, dalla scalabilità alle dimensioni ridotte, ma non è migliore in ogni situazione. Ecco i contro dei file vettoriali.
- Mentre le SVG sono supportate da tutti i principali browser moderni, potreste incorrere in problemi di compatibilità rendendoli su browser e dispositivi più vecchi. Se una parte significativa dei vostri visitatori le utilizza, cambiare formato potrebbe essere una cattiva idea.
- Le SVG sono più difficili da gestire, e richiedono programmi specifici per la creazione e la modifica. Anche se potete disegnare immagini SVG con nient’altro che codice XML, questa soluzione non è sempre possibile. Strumenti premium come Adobe Illustrator possono essere costosi.
- Le SVG non sono così facili da incorporare come le PNG. Se utilizzate WordPress, sappiate che di default non sono supportate dalla libreria multimediale, quindi vi servirà un plugin per caricarle.
- Le SVG devono essere rese dal browser quando la pagina viene caricata, quindi usarne in eccesso oppure inserire un file di grandi dimensioni con molti vettori può diventare dispendioso per il dispositivo.
Quando usare SVG invece di PNG
Anche se non dovreste assolutamente convertire tutti le vostri PNG in SVG, la grafica vettoriale può essere un’eccellente sostituzione per alcune immagini.
Le immagini SVG funzionano eccezionalmente bene per la grafica decorativa di siti web, come loghi, icone, grafici e diagrammi e altre immagini semplici. La nostra homepage è un eccellente esempio di grafica vettoriale in azione.
Tuttavia, non vanno così bene con immagini complesse con molti colori e forme, come schermate, fotografie e anche opere d’arte dettagliate. Anche se è possibile convertire qualsiasi immagine in SVG, i browser non sempre gestiscono bene i vettori complessi con centinaia di colori poiché devono essere resi quando la pagina viene caricata.
Inoltre, le opere d’arte SVG possono essere belle, ma la progettazione di immagini complesse richiede molto tempo, sforzo e conoscenza di strumenti di editing avanzati. Tenete le cose semplici se volete creare immagini vettoriali.
Se avete immagini dettagliate, mantenetevi saldamente a PNG.
Tuttavia, le SVG sono migliori per il web design reattivo e retina-ready grazie alla loro scalabilità e alla mancanza di degradazione della qualità. Inoltre, supportano le animazioni, a differenza di PNG e dei tipi di file raster che supportano l’animazione, come GIF, APNG e WebP che hanno tutti i loro problemi.
Per la grafica semplice che può richiedere un’animazione e che deve scalare bene su qualsiasi dimensione dello schermo, usate SVG.
Cos’è PNG?
PNG sta per Portable Network Graphics il nome dice bene quanto sia diffuso questo tipo di file. Chiunque abbia mai usato un computer ha probabilmente lavorato con le PNG, dato che è il tipo di file più comune su internet dopo il formato JPEG.
PNG è un tipo di file immagine raster, simile alla maggior parte dei formati immagine comuni. Ciò significa che consiste di pixel, gli stessi piccoli punti visualizzati sul vostro monitor o schermo. Sebbene questo lo renda facile da visualizzare, significa anche che la qualità dell’immagine dipende dalla risoluzione – quanti pixel ci sono nell’immagine.
Quindi, se si scala un’immagine raster verso l’alto o verso il basso, la qualità ne risentirà. A volte il danno è trascurabile, specialmente quando si scala verso il basso, mentre a volte può rendere un’immagine sfocata e completamente inutilizzabile.
Tuttavia, la prevalenza di PNG lo rende un buon candidato per un utilizzo generale. Questo tipo di file supporta la trasparenza, ma non l’animazione.
Pro e Contro di PNG
Cosa rende PNG il formato di file immagine più utilizzato online? Ecco i vantaggi:
- I file PNG sono facilmente modificabili e possono essere aperti in qualsiasi strumento comune di editing delle immagini. Non c’è bisogno di acquistare programmi avanzati per creare o modificare un’immagine PNG; al massimo, potreste aver bisogno di scaricare un editor gratuito come GIMP.
- Che stiate creando un sito da zero o utilizzando il media manager di WordPress, visualizzare le immagini PNG sul vostro sito è molto semplice.
- PNG utilizza una compressione lossless, che lascia un aspetto più nitido rispetto ai JPEG a compressione loss. Tuttavia, questo ha un costo maggiore in termini di dimensioni del file e non può essere paragonato alle immagini vettoriali.
D’altra parte, il formato PNG è stato creato decenni fa e ha diversi difetti notevoli che non sono stati aggiornati per il web moderno.
- Non potete ridimensionare i file PNG senza perdere qualità. Dovete pianificare con attenzione quando disegnate la grafica raster e assicurarvi che sia della giusta dimensione o potreste finire per perdere tempo creando immagini inutilizzabili.
- Le PNG sono molto grandi a causa della loro compressione lossless e per questo possono rallentare il vostro sito web. Per risolvere questo problema è necessario comprimerle ancora di più e danneggiare la qualità.
- Rendere le immagini “retina-ready” è più noioso con le PNG e ci sono maggiori probabilità di causare sfocature.
- PNG non supporta le animazioni. Altri tipi di file raster animati, come le GIF, possono avere seri problemi; per esempio, le GIF animate sono di bassissima qualità e supportano solo 256 colori.
Quando usare PNG invece di SVG
PNG è il tipo di file più comune per una ragione: è decisamente versatile e si adatta a quasi tutte le situazioni. Ci sono solo alcuni difetti da considerare quando lo si usa, come le grandi dimensioni del file e la mancanza di scalabilità.
I PNG sono adatti a visualizzare immagini dettagliate, opere d’arte e fotografie – tutto ciò che un’immagine vettoriale non può gestire. Qualsiasi cosa abbia centinaia di colori e una grande risoluzione dovrebbe probabilmente essere una PNG.
Questo non vuol dire che non potete usare le PNG per immagini più semplici come loghi e grafica decorativa, ma le SVG sarebbero più adatte allo scopo.
Quando non siete sicuri se una piattaforma gestirà il tipo di file SVG, meno supportato, PNG è la strada da percorrere – se non altro per essere sicuri.
Per esempio, non potete caricare SVG sulla maggior parte dei social media. E, dato che alcuni client di posta elettronica possono avere problemi con i vettori, di solito si consiglia di attenersi ai PNG nei template di posta elettronica.
In generale, le PNG vanno bene con qualsiasi immagine complessa e non animata, specialmente quelle che richiedono trasparenza. Potete usarle praticamente ovunque; è solo che a volte una SVG sarebbe più adatta.
Ricordate che puoi sempre usare i fallback PNG se non riuscite a caricare la vostra SVG, quindi di solito è più sicuro andare con i vettori anche se una parte significativa della vostra base di utenti usa ancora vecchi dispositivi o browser obsoleti.
Qual è il Formato Migliore: SVG o PNG?
Nessuno dei due tipi di file è migliore o peggiore dell’altro; ognuno ha i suoi limiti. Anche se SVG supera PNG in diverse aree, PNG va molto meglio nella gestione di certe cose.
In generale, comunque, dovreste attenervi a SVG quando è appropriato e usare PNG in tutte le situazioni in cui i vettori non sono adatti. Potreste essere tecnicamente in grado di usare entrambi i formati, ma SVG è preferibile in alcune aree specifiche.
SVG supporta l’animazione, PNG no. I tipi di file raster, come GIF e APNG, possono essere considerati delle alternative. Tuttavia, non esiste un perfetto formato raster animato che sia ampiamente supportato, ben conosciuto, di alta qualità e che risulti in file di piccole dimensioni. Le SVG hanno tutte queste caratteristiche.
Le SVG inoltre si adattano perfettamente a qualsiasi dimensione dello schermo, che vuol dire che sono reattive e retina-ready di default. Le PNG perdono qualità quando vengono ridimensionate e farle scalare bene è una seccatura – specialmente se avete solo immagini piccole che non si visualizzano bene su schermi grandi.
Infine, le SVG sono generalmente più piccole delle PNG, quindi sono meno impegnative per il vostro server nonostante abbiano bisogno di fare il rendering durante il caricamento.
Usatele sul vostro sito per semplici opere d’arte a colori piatti, loghi e grafica decorativa.
D’altra parte, le PNG sono adatte per visualizzare grafici complessi ad una grande risoluzione o immagini con migliaia di colori. Al momento le SVG non possono gestire una grande quantità di colori e forme.
Questo tipo di immagini complesse costituiranno spesso la maggior parte delle immagini sul vostro sito, quindi non è ancora il momento di buttare via le PNG.
E le PNG sono più ampiamente supportate dai browser e da piattaforme specifiche come i client di posta elettronica. Se non siete sicuri se una SVG sarà resa correttamente, meglio optare per una PNG.
Riepilogo
SVG e PNG sono due formati di file molto diversi. Alla fine, non è un grosso problema se utilizzate PNG o JPEG sul vostro sito al di fuori di casi d’uso molto specifici, ma scegliere tra SVG e PNG è una scelta molto più rilevante.
È molto più probabile che usiate PNG perché è un formato di file più semplice, più accessibile e più versatile. Per le immagini complesse, come schermate e illustrazioni dettagliate, bisognerebbe usare PNG.
Anche se le SVG sono più difficili da creare e modificare, offrono una serie di vantaggi rispetto alle PNG. Quando è appropriato utilizzare immagini vettoriali, come la grafica decorativa e i loghi, scegliete senza dubbio le SVG.
Probabilmente non sostituirete ogni singola immagine del vostro sito con una SVG, ma la reattività e le dimensioni ridotte dei file le rendono la scelta migliore in certe situazioni.
Siete fan delle SVG o delle PNG? Condividi le vostre considerazioni con la nostra community nei commenti qui sotto!
Salman Ravoof é uno sviluppatore web autodidatta, uno scrittore, un creatore e un grande ammiratore del Free and Open Source Software (FOSS). Oltre alla tecnologia, è appassionato di scienza, filosofia, fotografia, arte, gatti e cibo. Per saperne di più su di lui, visitate il suo sito web o contattate Salman su X.
Lascia un commento