wake-up-neo.net

Quali sono i diversi casi d'uso di PNG contro GIF rispetto a JPEG vs SVG?

Quando devono essere usati determinati tipi di file immagine quando si costruiscono siti Web o interfacce, ecc.?

Quali sono i loro punti di forza e debolezza?

So che PNG e GIF sono senza perdite, mentre JPEG è lossy.
Ma qual è la principale differenza tra PNG e GIF?
Perché dovrei preferirne uno rispetto all'altro? Che cos'è SVG e quando dovrei usarlo?

Se non ti interessa di ogni singolo pixel, dovresti usare sempre JPEG poiché è il più "leggero"?

540
Faruz

Dovresti essere consapevole di alcuni fattori chiave ... 

Innanzitutto, esistono due tipi di compressione: Lossless e Lossy

  • Lossless significa che l'immagine è resa più piccola, ma senza alcun danno per la qualità. 
  • Lossy significa che l'immagine è resa (anche) più piccola, ma a scapito della qualità. Se si salva un'immagine in un formato Lossy ripetutamente, la qualità dell'immagine peggiorerà progressivamente.

Ci sono anche diverse profondità di colore (tavolozze): Colore indicizzato e Colore diretto

  • Indicizzato significa che l'immagine può solo memorizzare un numero limitato di colori (in genere 256), controllati dall'autore, in una cosa chiamata Mappa dei colori
  • Diretto significa che è possibile memorizzare molti migliaia di colori che non sono stati scelti direttamente dall'autore

BMP - Lossless/Indicizzato e diretto 

Questo è un vecchio formato. È senza perdita di dati (nessun dato di immagine è perso al salvataggio), ma c'è anche poca o nessuna compressione, il che significa che il salvataggio come BMP comporta file di dimensioni MOLTO grandi. Può avere tavolozze sia indicizzate che dirette, ma questa è una piccola consolazione. Le dimensioni dei file sono così inutilmente grandi che nessuno usa mai veramente questo formato.

Buono per: Niente di veramente. Non c'è nulla BMP eccelle in, o non è fatto meglio da altri formati.

BMP vs GIF


GIF - Lossless/Solo indicizzati 

GIF utilizza la compressione senza perdita di dati, il che significa che è possibile salvare l'immagine più e più volte e non perdere mai alcun dato. Le dimensioni dei file sono molto più piccole di BMP, perché viene effettivamente utilizzata una buona compressione, ma è possibile memorizzare solo una tavolozza indicizzata. Ciò significa che per la maggior parte dei casi d'uso , ci possono essere solo un massimo di 256 colori diversi nel file. Sembra una piccola quantità, ed è così.

Le immagini GIF possono anche essere animate e avere trasparenza.

Buono per: loghi, disegni a tratteggio e altre immagini semplici che devono essere piccole. Usato solo per i siti web.

GIF vs JPEG


JPEG - Lossy/Direct 

Le immagini JPEG sono state progettate per rendere le immagini fotografiche più dettagliate il più possibile ridotte rimuovendo le informazioni che l'occhio umano non noterà. Di conseguenza è un formato Lossy e il salvataggio dello stesso file più e più volte comporterà la perdita di più dati nel tempo. Ha una tavolozza di migliaia di colori e quindi è ottimo per le fotografie, ma la compressione con perdita di dati significa che non va bene per loghi e disegni a linee: non solo appariranno confusi, ma tali immagini avranno anche un file di dimensioni maggiori rispetto alle GIF!

Buono per: fotografie. Inoltre, gradienti.

JPEG vs GIF


PNG-8 - Lossless/Indexed 

PNG è un formato più recente e PNG-8 (la versione indicizzata di PNG) è davvero un buon sostituto per le GIF. Purtroppo, tuttavia, presenta alcuni inconvenienti: in primo luogo non supporta l'animazione come GIF can (può farlo, ma solo Firefox sembra supportarlo, diversamente dall'animazione GIF supportata da tutti i browser). In secondo luogo ha alcuni problemi di supporto con i browser più vecchi come IE6. In terzo luogo, software importanti come Photoshop hanno un'implementazione molto scarsa del formato. (Accidenti a te, Adobe!) PNG-8 può solo memorizzare 256 colori, come GIF.

Ottimo per: La cosa principale che PNG-8 è migliore delle GIF sta avendo il supporto per Alpha Transparency.

PNG-8 vs GIF


PNG-24 - Lossless/Direct

PNG-24 è un formato eccezionale che combina la codifica Lossless con il colore diretto (migliaia di colori, proprio come il JPEG). È molto simile a BMP a tale riguardo, tranne per il fatto che PNG effettivamente comprime le immagini, quindi risulta in file molto più piccoli. Purtroppo i file PNG-24 saranno ancora più grandi di quelli JPEG (per le foto) e GIF/PNG-8 (per loghi e grafica), quindi è ancora necessario considerare se si vuole veramente usarne uno.

Anche se i PNG-24 consentono migliaia di colori pur avendo una compressione, non intendono sostituire le immagini JPEG. Una foto salvata come PNG-24 sarà probabilmente almeno 5 volte più grande di un'immagine JPEG equivalente, con un miglioramento minimo della qualità visibile. (Naturalmente, questo può essere un risultato desiderabile se non si è preoccupati di fileizzare e si desidera ottenere l'immagine della migliore qualità possibile).

Proprio come PNG-8, PNG-24 supporta anche l'alfa-trasparenza.


SVG - Lossless/Vector

Un filetype che sta attualmente crescendo in popolarità è SVG, che è diverso da tutti i precedenti in quanto è un formato di file vector (i sopra sono tutti raster ). Ciò significa che in realtà è composto da linee e curve anziché da pixel. Quando si ingrandisce un'immagine vettoriale, si vede ancora una curva o una linea. Quando si ingrandisce un'immagine raster, vedrai i pixel.

Per esempio:

 PNG vs SVG

 SVG vs PNG

Ciò significa che SVG è perfetto per i logo e le icone che desideri mantenere nitidezza sugli schermi Retina o di dimensioni diverse. Significa anche che un piccolo logo SVG può essere utilizzato con una dimensione molto più grande (più grande) senza degrado nella qualità dell'immagine - qualcosa che richiederebbe un file separato più grande (in termini di file) con formati raster.Le dimensioni dei file SVG sono spesso minime, anche se sono visivamente molto grandi, il che è fantastico. Vale la pena ricordare, tuttavia, che dipende dalla complessità delle forme utilizzate. Gli SVG richiedono più potenza di calcolo rispetto alle immagini raster perché i calcoli matematici sono coinvolti nel disegno di curve e linee. Se il tuo logo è particolarmente complicato, potrebbe rallentare il computer di un utente e persino avere dimensioni di file molto grandi. È importante semplificare il più possibile le forme vettoriali.

Inoltre, i file SVG sono scritti in XML e quindi possono essere aperti e modificati in un editor di testo (!). Ciò significa che i suoi valori possono essere manipolati al volo. Ad esempio, è possibile utilizzare JavaScript per modificare il colore di un'icona SVG su un sito Web, proprio come se fosse un testo (ad esempio non è necessario per una seconda immagine) o addirittura animarli.

In tutto, sono i migliori per semplici forme piatte come loghi o grafici.

Spero che aiuti!.

I hope that helps!

1338
Chuck Le Butt

JPEG non è il più leggero per tutti i tipi di immagini (o anche la maggior parte). Angoli e linee rette e semplici "riempimenti" (blocchi di colore pieno) appariranno sfocati o presentano artefatti al loro interno a seconda del livello di compressione. È un formato con perdita di dati e funziona meglio per le fotografie in cui non è possibile vedere gli artefatti in modo chiaro. Le linee rette (come nei disegni, nei fumetti e così via) si comprimono molto bene in PNG ed è senza perdite. GIF deve essere utilizzato solo quando si desidera che la trasparenza funzioni in IE6 o si desideri l'animazione. GIF supporta solo un pallete a 256 colori, ma è anche senza perdite.

Quindi fondamentalmente ecco un modo per decidere il formato dell'immagine:

  • GIF se necessita di animazione o trasparenza che funziona su IE6 (nota, la trasparenza PNG funziona dopo IE6)
  • JPEG se l'immagine è una fotografia. 
  • PNG se linee rette come in un fumetto o altro disegno o se è necessaria un'ampia gamma di colori con trasparenza (e IE6 non è un fattore)

E come commentato, se non sei sicuro di ciò che si qualificherebbe, prova ogni formato con rapporti di compressione diversi e appesantisci la qualità e le dimensioni dell'immagine e scegli quale pensi sia la migliore. Sto solo dando delle regole pratiche.

47
Earlz

Di solito vado con PNG, in quanto sembra avere alcuni vantaggi rispetto a GIF. C'erano delle restrizioni sui brevetti su GIF, ma quelle sono scadute.

Le GIF sono adatte per disegni al tratto con spigoli vivi (come i loghi) con un numero limitato di colori. Questo sfrutta la compressione lossless del formato, che favorisce aree piatte di colore uniforme con bordi ben definiti (in contrasto con JPEG, che favorisce sfumature uniformi e immagini più morbide).

Le GIF possono essere utilizzate per piccole animazioni e filmati a bassa risoluzione.

In considerazione della limitazione generale della tavolozza di immagini GIF a 256 colori, non viene solitamente utilizzata come formato per la fotografia digitale. I fotografi digitali utilizzano formati di file immagine in grado di riprodurre una gamma più ampia di colori, come TIFF, RAW o JPEG con perdita di dati, che è più adatto alla compressione di fotografie.

Il formato PNG è un'alternativa popolare alle immagini GIF poiché utilizza tecniche di compressione migliori e non ha un limite di 256 colori, ma i PNG non supportano le animazioni. I formati MNG e APNG, entrambi derivati ​​da PNG, supportano le animazioni, ma non sono ampiamente utilizzati.

7
David Bridges

Il JPEG avrà una qualità scadente attorno agli spigoli vivi, e per questo motivo non è adatto alla maggior parte della grafica web. Eccelle per le fotografie.

Rispetto a GIF, PNG offre una compressione migliore, pallette più grandi e più funzioni, inclusa la trasparenza. Ed è senza perdite.

5
Konrad Garus

GIF è limitato a 256 colori e non supporta la trasparenza reale. Dovresti utilizzare PNG anziché GIF perché offre una compressione e funzionalità migliori. PNG è ottimo per immagini piccole e semplici come logo, icone, ecc.

JPEG ha una compressione migliore con immagini complesse come le foto.

5
Desintegr

png ha un pallete di colore più largo di gif e gif è corretto mentre png non lo è. gif può fare animazioni, cosa normale-png non può. png-transparency è supportato solo dal browser più recente di IE6, ma esiste una correzione per questo problema. Entrambi supportano la trasparenza alfa. .__ In generale, direi che dovresti usare png per la maggior parte dei webgraphics mentre usi jpeg per foto, screenshot o simili perché la compressione png non funziona troppo bene su thoose.

3
HalloDu

GIF basato su una tavolozza di 256 colori per immagine (almeno nella sua incarnazione di base). PNG può fare "TrueColour", cioè 16,7 milioni di colori fuori dalla scatola. PNG senza perdita di dati si comprime meglio delle GIF senza perdita di dati. GIF può fare trasparenza "binaria" (opacità 0% o opacità 100%). PNG può gestire trasparenze alfa. 

Tutto sommato, se non hai bisogno di usare immagini Alpha-transparent e supportare IE6, PNG è probabilmente la scelta migliore quando hai bisogno di immagini pixel-perfette per illustrazioni vettoriali e simili. JPG è imbattibile per le fotografie.

3
Pekka 웃

C'è un trucco che può essere fatto per usare le immagini GIF per mostrare il vero colore. Si può preparare un'animazione GIF con 256 fotogrammi palettizzati a colori con 0 frame delay e impostare l'animazione per essere mostrata una sola volta. Quindi, tutti i fotogrammi potrebbero essere mostrati allo stesso tempo. Alla fine, viene visualizzata una vera immagine GIF colorata.

Molti software sono in grado di riprodurre tali immagini GIF. Tuttavia, la dimensione del file di output è maggiore di un file PNG. Deve essere usato se è veramente necessario.

3
MT San

La principale differenza è che GIF è brevettato e un po 'più ampiamente supportato. PNG è una specifica aperta e la trasparenza alfa non è supportata in IE6. Il supporto è stato migliorato in IE7, ma non completamente risolto.

Per quanto riguarda le dimensioni dei file, GIF ha un pallet di colori di default più piccolo, quindi a prima vista tendono ad essere file di dimensioni più ridotte. I file PNG hanno un pallet di default più grande, tuttavia puoi ridurre il pallet dei colori in modo che, quando lo fai, si traduca in una dimensione del file più piccola di GIF. Il problema è che questa funzionalità non è supportata in Internet Explorer.

Inoltre, poiché i PNG possono supportare la trasparenza alfa, sono l'unica opzione se desideri una variazione di trasparenza diversa dalla trasparenza binaria.

1
Dan Herbert

GIF ha una tavolozza a 8 bit (256 colori) in cui PNG include palette di colori fino a 24 bit. Quindi, PNG può supportare più colori e, naturalmente, l'algoritmo supporta la compressione

0
Abdul Munim

Se opti per JPEG e hai a che fare con immagini per un sito web, ti consigliamo di prendere in considerazione/ Google Guetzli encoder percettivo, che è liberamente disponibile. Nella mia esperienza, per una qualità fissa Guetzli produce file più piccoli rispetto alle librerie di codifica JPEG standard, pur mantenendo la piena compatibilità con lo standard JPEG (quindi le tue immagini avranno la stessa compatibilità delle comuni immagini JPEG).

L'unico inconveniente è che Guetzli accetta lot di tempo per codificare .. ma questo viene fatto solo una volta, quando si prepara l'immagine per il sito Web, mentre i benefici rimangono per sempre! Le immagini più piccole richiedono meno tempo per il download, quindi la velocità del tuo sito web aumenterà nell'uso quotidiano.

0
Marco Fontani

A partire dal 2018, abbiamo diversi nuovi formati, un migliore supporto per i formati precedenti e alcuni abili abili nell'utilizzo di video anziché di immagini. 

Per fotografie 

jpg - è ancora il formato di immagine più supportato.

webp - Nuovo formato da google. Un buon potenziale, anche se il browser supporto non è eccezionale.

Per icone e grafica

svg - quando possibile. Si adatta bene agli schermi retina, modificabile negli editor di testo e personalizzabile tramite JS/CSS se caricato in DOM.

png - se riguarda la grafica raster (cioè quando viene creata in Photoshop). Supporta la trasparenza che è molto essenziale in questo caso d'uso.

Per animazioni

svg - oltre alle animazioni css per la grafica vettoriale. Tutti i vantaggi di svg + power delle animazioni CSS.

gif - è ancora il formato di immagine animata più supportato.

mp4 - se le immagini animate sono in realtà brevi video clip. Twitter / Whatsapp converte gif in mp4.

apng - browser decente supporto (vale a dire no IE, Edge), ma la sua creazione non è così semplice come gif.

webp - vicino all'utilizzo di mp4. Scarso supporto

Questo è un bel confronto di vari formati di immagini animate.

Infine, qualunque sia il formato, assicurati di ottimizzarlo. Ci sono strumenti per ogni formato (ad es. SVGO, Guetzli, OptiPNG ecc.) E puoi risparmiare considerevole larghezza di banda.

0
aarjithn