SVG vs PNG vs JPG: Pro e contro formato immagine

/2016-01-04 00:04:46/
Brilee
/Grafica/

Quando si tratta di creare immagini per il Web e altri scopi digitali, quali formati di file ti daranno il miglior risultato? Devi pensare alla velocità rispetto alla qualità e alla scala delle immagini. Quindi cosa dovresti usare: SVG vs PNG vs JPG?

C'è stato un tempo in cui hai usato una dimensione JPG per adattarsi allo spazio a 72 dpi e sei passato. Non più. Schermi ad alta risoluzione, finestre multiple e la necessità di avere un sito Web scattante hanno reso il processo molto più complesso. Tuffiamoci nei pro e contro di ciascuno di questi formati!

SVG

SVG ha un bell'aspetto a qualsiasi dimensione e funziona praticamente per qualsiasi tipo di immagine diversa da una foto.

SVG, o grafica vettoriale scalabile, è incredibilmente pratico. Ecco perché i designer lo usano più frequentemente.

Poiché SVG è un formato vettoriale, hanno un bell'aspetto a qualsiasi dimensione e funzionano praticamente per qualsiasi tipo di immagine diversa da una foto.

SVG è un formato senza perdita di dati - il che significa che non perde alcun dato quando viene compresso - rende un numero illimitato di colori ed è più comunemente usato per grafica e loghi sul web e per progetti che verranno visualizzati sulla retina o su altri schermi ad alta risoluzione.

Pro di SVG

Il formato vettoriale viene visualizzato bene a qualsiasi dimensione
Possibilità di creare semplici rendering SVG in un editor di codice o di testo
Progetta ed esporta grafica complessa da Adobe Illustrator o Sketch
Il testo in formato SVG è accessibile
Gli SVG sono facili da modellare e scrivere
I formati SVG sono supportati dai browser moderni e sono a prova di futuro
Il formato è altamente comprimibile e leggero
Buono per la ricerca a causa del formato basato su testo
Supporta la trasparenza
Consente immagini fisse o animate

Contro di SVG

La progettazione di SVG può essere complicata
Non eseguire il rendering su alcuni browser degradati
Supporto limitato per i client di posta elettronica

Voglio sapere di più? Abbiamo altre due guide che spiegano di più su SVG: The Practical Beginner's Guide to SVG and How (& Why) SVG sta per subentrare.

PNG

PNG offre qualcosa che un JPG non può - la trasparenza.

PNG, o Portable Network Graphics, è un formato progettato per il web che offre qualcosa che un JPG non può - la trasparenza. Questo da solo è il motivo per cui PNG è stato così popolare per il caricamento di elementi come i loghi nei progetti di siti Web.

Esistono due tipi di PNG: PNG-8 e PNG-24. PNG-8 utilizza una tavolozza di colori più limitata con solo 256 colori, ha una trasparenza leggermente migliore ed esporta in dimensioni ridotte. PNG-24 utilizza una tavolozza di colori illimitata, mantiene la trasparenza ma esporta a dimensioni maggiori. Entrambi i tipi di PNG hanno una compressione senza perdita.

Sebbene i formati PNG siano simili alle GIF, non supportano l'animazione. Questo formato è più comunemente usato per icone, piccoli fermi immagine o qualsiasi immagine che necessita di trasparenza.

Pro di PNG

Supporta la trasparenza
Buono per immagini con testo
I formati PNG visualizzano bene i loghi
Include la descrizione del testo incorporato per i motori di ricerca
PNG-8 ha dimensioni di file ridotte ed è più leggero
Esporta senza bordi frastagliati

Contro di PNG

Le dimensioni dei file aumentano rapidamente per file di grandi dimensioni come le immagini
Alcuni client di posta elettronica meno recenti hanno problemi con il rendering
Nessuna animazione
I file PNG-24 possono diventare di grandi dimensioni; non buono per la condivisione web

JPEG

Ogni volta che una foto viene salvata ed esportata come JPG, si degraderà.

JPG, o Joint Photographic Experts Group, o JPEG, è probabilmente il formato di immagine più noto. È l'opzione predefinita per la maggior parte del salvataggio delle immagini perché è adatta alle foto grazie a un display a colori praticamente illimitato.

JPG offre anche la possibilità di scegliere come deve essere compressa un'immagine dallo 0 percento (compressione pesante) al 100 percento (nessuna compressione). La maggior parte dei designer sceglie qualcosa tra il 60 e il 70 percento. Le immagini sembrano ancora buone a questo livello di compressione ma le dimensioni dei file sono considerevolmente più piccole.

JPG utilizza la compressione con perdita e non mantiene i dati originali durante la compressione. Ogni volta che una foto viene salvata ed esportata come JPG, si degraderà.

Il formato JPG è più comunemente usato per immagini, fotografia e qualsiasi cosa con molto colore.

Pro di JPEG

Ottimo per colori e fotografia
Facile riduzione delle dimensioni dei file
Rendering coerente nei client di posta elettronica

Contro di JPEG

Nessuna trasparenza
Crea bordi frastagliati per il testo
Nessuna animazione
Formato smarrito
Nessun metadato automatico per la ricerca, deve includere informazioni

Quale formato dovresti usare?

Ora che sai quali sono alcune differenze tra SVG vs PNG vs JPG, cosa dovresti usare?

Puoi farti alcune domande per ottenere quella risposta.

Hai bisogno di un formato vettoriale o raster?
Vettore: SVG
Raster: JPG o PNG

Hai bisogno di trasparenza?
Sì: SVG o PNG
No: JPG

Stai usando un'immagine a colori?
Sì: JPG o PNG
No: SVG

È una foto grande?
Sì: JPG
No: PNG

L'immagine contiene testo?
Sì: PNG
No: JPG

La compressione senza perdita di dati è importante per te?
Sì: SVG o PNG
No: JPG

La grafica deve essere aggiornata e ridistribuita?
Sì: SVG
No: PNG o JPG

Stai usando l'animazione?
Sì: SVG
No: JPG o PNG

Conclusione

Tutti e tre i formati di immagine - SVG, PNG e JPG - hanno applicazioni pratiche e ad ampio raggio. Mentre SVG è il formato più recente e spesso può essere salvato nella dimensione del file più piccola, non è sempre l'opzione migliore.

Pensa a come stai usando le immagini nel tuo progetto mentre selezioni un tipo di file per trovare quello che funzionerà meglio per quello che stai cercando di realizzare. Potresti persino scoprire che i progetti includono immagini che utilizzano tutti e tre i tipi di file. (In realtà è abbastanza comune!)