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 appena usato un JPG di dimensioni per adattarlo allo spazio a 72 dpi e andare avanti. Non più. Gli schermi ad alta risoluzione, le finestre multiple e la necessità di avere un sito Web scattante ne hanno fatto un processo molto più complesso. Immergiti nei pro e contro di ciascuno di questi formati!
SVG
SVG è perfetto per qualsiasi dimensione e funziona praticamente per qualsiasi tipo di immagine oltre a una foto.SVG, o Scalable Vector Graphics, è incredibilmente pratico. Ecco perché i designer lo usano più spesso.
Dato che 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 dati quando viene compresso: esegue il rendering di un numero illimitato di colori ed è più comunemente utilizzato per grafica e loghi sul Web e per progetti che verranno visualizzati su retina o altri schermi ad alta risoluzione.
A favore di SVG
- Il formato vettoriale si adatta bene a qualsiasi dimensione
- Possibilità di creare semplici rendering SVG in un codice o editor di testo
- Progetta ed esporta grafici complessi da Adobe Illustrator o Sketch
- Il testo SVG è accessibile
- Gli SVG sono facili da stile e da script
- 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
- Permette di immagini fisse o animate
Contro di SVG
- La progettazione di SVG può complicarsi
- 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 e How (& Why) SVG sta per prendere il sopravvento.
PNG
PNG offre qualcosa che un JPG non può - trasparenza.PNG, o Portable Network Graphics, è un formato progettato per il web che offre qualcosa che un JPG non può - trasparenza. Questo è il motivo per cui PNG è stato così popolare per il caricamento di elementi come i loghi sui progetti di siti web.
Esistono due tipi di PNG: PNG-8 e PNG-24. PNG-8 usa una tavolozza di colori più limitata con solo 256 colori, ha una trasparenza un po 'migliore ed esporta in piccole dimensioni. PNG-24 utilizza una tavolozza di colori illimitata, mantiene la trasparenza ma esporta in dimensioni maggiori. Entrambi i tipi di PNG hanno compressione senza perdita di dati.
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 abbia bisogno di trasparenza.
A favore di PNG
- Supporta la trasparenza
- Buono per le immagini con testo al loro interno
- I formati PNG rendono bene i loghi
- Include la descrizione del testo incorporato per i motori di ricerca
- PNG-8 ha dimensioni di file ridotte ed è il più leggero
- Esportazioni senza bordi frastagliati
Contro di PNG
- Le dimensioni dei file aumentano rapidamente per file di grandi dimensioni come le immagini
- Alcuni client email precedenti hanno problemi con il rendering
- Nessuna animazione
- I file PNG-24 possono diventare grandi; 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é è foto-friendly grazie a un display a colori praticamente illimitato.
JPG offre anche la possibilità di scegliere la compressione dell'immagine da 0 percento (compressione pesante) al 100 percento (nessuna compressione). La maggior parte dei designer sceglie qualcosa nell'intervallo dal 60 al 70 percento. Le immagini sembrano ancora buone a questo livello di compressione, ma le dimensioni dei file sono notevolmente inferiori.
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, fotografie e qualsiasi cosa con molto colore.
Pro di JPEG
- Ottimo per colori e fotografia
- Facile da ridurre le dimensioni dei file
- Rende coerentemente nei client di posta elettronica
Contro di JPEG
- Nessuna trasparenza
- Crea bordi frastagliati per il testo
- Nessuna animazione
- Formato lossy
- Nessun metadato automatico per la ricerca, deve includere informazioni alt
Che formato dovresti usare?
Ora che sai quali sono alcune differenze tra SVG vs PNG vs JPG, che cosa dovresti usare?
Puoi pormi 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 ad alto colore?
Sì: JPG o PNG
No: SVG
È una foto grande?
Sì: JPG
No: PNG
L'immagine contiene testo?
Sì: PNG
No: JPG
La compressione senza perdite è 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 di ampia portata. Mentre SVG è il formato più recente e può spesso 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 anche scoprire che i progetti includono immagini che utilizzano tutti e tre i tipi di file. (In realtà è piuttosto comune!)