it-swarm.dev

JPEG vs PNG vs BMP vs GIF vs SVG

Mi piacerebbe sapere quale di questi formati richiede meno memoria per la stessa qualità dell'immagine e quali sono le principali differenze tra questi formati.

40
Narek

Da Qual è la differenza tra TIFF, GIF, JPG, JPEG, PNG e un BMP file?

BMP - Bitmap. Questo è probabilmente il primo tipo di formato di immagine digitale che posso ricordare. A quei tempi, ogni immagine su un computer sembrava essere un BMP. In Windows XP il programma Paint salva automaticamente le sue immagini in BMP. Tuttavia, in Windows Vista e le immagini successive vengono ora salvate in JPEG. BMP è la piattaforma di base per molti altri tipi di file.

JPG/JPEG - (Joint Photographic Experts Group) Il formato Jpeg viene utilizzato per fotografie a colori o qualsiasi immagine con molte miscele o sfumature. Non va bene con gli spigoli vivi e tende a sfocarli un po 'a meno che non vengano memorizzati in alta qualità. Questo formato è diventato popolare con l'invenzione della fotocamera digitale. La maggior parte, se non tutte, le fotocamere digitali scaricano le foto sul computer come file Jpeg. Ovviamente i produttori di fotocamere digitali vedono il valore di immagini di alta qualità che alla fine occupano meno spazio.

GIF - (Graphics Interchange Format) Il formato Gif è utilizzato al meglio per testo, disegni a linee, schermate, cartoni animati e animazioni. Gif è limitato a un numero totale di 256 colori o meno, quindi le immagini Gif sono relativamente piccole. È comunemente usato per caricare velocemente pagine web. Fa anche un grande banner o logo per la tua pagina web. Le immagini animate possono anche essere salvate in formato GIF come sequenza di immagini statiche. Ad esempio, un banner lampeggiante verrebbe salvato come file GIF.

PNG - (Portable Networks Graphic) Questo formato senza perdita è uno dei migliori formati di immagine. Non era sempre compatibile con tutti i browser Web o software di immagine, ma al giorno d'oggi è il miglior formato di immagine da utilizzare per il sito web. Io uso .png per i loghi e gli screenshot. Una delle sue abilità più sorprendenti è la capacità di comprimere le immagini senza perdita di dati (senza perdita di pixel), sebbene la dimensione finale compressa varia tra gli editor di immagini.

TIFF - (Tagged Image File Format) Questo formato di file non è stato aggiornato dal 1992 ed è ora di proprietà di Adobe. Può memorizzare un'immagine e dati (tag) in un unico file. TIFF può essere compresso, ma è piuttosto la sua capacità di memorizzare i dati dell'immagine in un formato lossless che rende un file TIFF un utile archivio di immagini, perché diversamente dai file JPEG standard, un file TIFF che utilizza la compressione lossless (o nessuna) può essere modificato e ri risparmiato senza perdere la qualità dell'immagine. Questo file viene comunemente utilizzato per la scansione, l'invio di fax, l'elaborazione di testi e così via. Non è più un formato di file comune da utilizzare con le tue foto digitali, poiché jpeg è di ottima qualità e occupa meno spazio.

53
harrymc

In stile xkcd da lbrandy.com :

alt text

75
Robert MacLean

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 detrimento della 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 (solitamente 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 risulta in 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/Indicizzato

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

Nota importante: Photoshop non supporta Alpha Transparency per i file PNG-8. (Accidenti a te, Photoshop!) Ci sono modi per convertire i file Photoshop PNG-24 in PNG-8 mantenendo la trasparenza, però. Un metodo è PNGQuant , un altro è quello di salvare i file con Fireworks .


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 questo proposito, tranne per il fatto che PNG in realtà comprime le immagini, quindi risulta in file molto più piccoli. Sfortunatamente i file PNG-24 saranno ancora più grandi di JPEG, GIF e PNG-8, quindi devi ancora considerare se vuoi davvero usarne uno.

Anche se i PNG-24 consentono migliaia di colori pur avendo una compressione, non sono pensati per 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 vettore formato di file (il 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.

Inoltre, i file SVG sono scritti usando XML, e quindi possono essere aperti e modificati in un editor di testo, che può essere manipolato al volo, se lo si desidera. Ad esempio, è possibile utilizzare JavaScript per modificare il colore di un'icona SVG su un sito Web come se fosse un testo (ad esempio non è necessaria una seconda immagine).

Spero che aiuti!

62
Django Reinhardt

Le risposte esistenti includono pochissimi dati tecnici, quindi includerò qui.

  • JPEG: colore fino a 24 bit (possibilmente più?), compressione variabile (solitamente alta), lossy, nessun supporto alfa
  • PNG: colore fino a 48 bit, compressione moderata, assenza di perdite, supporto alfa
  • BMP: colore fino a 24 bit, pochissima compressione, supporto lossless, alfa
  • GIF: colore fino a 8 bit, poca compressione, supporto lossless, trasparenza, supporto animazione

Profondità del colore

  • Colore a 8 bit == 256 colori
  • Colore a 24 bit == 16.777.216 colori
  • Colore a 48 bit == 281,474,976,710,656 colori

La maggior parte dei monitor per computer funziona con una profondità di colore di 24 bit. L'occhio umano può distinguere tra tanti colori. Ulteriore profondità del colore è principalmente quella di essere in grado di conservare le informazioni da un sensore in modo che la manipolazione di una fotografia abbia più dati con cui lavorare. Provare a rappresentare una fotografia a colori a 8 bit porterà a granulosità.

Compression

Questo si riferisce fondamentalmente alla grandezza del file finale. Più compressione equivale a un file più piccolo. Tuttavia, JPEG raggiunge dimensioni di file ridotte eliminando i dati. Si parla di compressione "lossy", perché non è possibile recuperare i dati originali non compressi. La sua compressione è anche ottimizzata per le fotografie in cui i bordi ad alto contrasto sono rari. Come affermato in altre risposte, è una cattiva scelta per qualcosa di diverso dalle fotografie.

Alpha/Trasparenza

L'alfa si riferisce alla trasparenza, ma implica che ci sia più di un livello di trasparenza. GIF ha la capacità di definire i pixel trasparenti, ma è opaco o trasparente al 100% e "trasparente" viene usato come uno dei 256 colori. PNG e BMP hanno la capacità di contrassegnare ogni pixel come opaco, trasparente o parzialmente trasparente, come un pezzo di vetro colorato. Più comunemente, ci sono 256 livelli di trasparenza, sebbene il PNG possa effettivamente avere fino a 65.536 livelli. JPEG non ha supporto per la trasparenza.

Animazione

In effetti, di questi formati, solo GIF ha alcun supporto per l'animazione. Ci sono specifiche per l'animazione con PNG (MNG, APNG) e JPEG (MJPEG), ma non sono ampiamente supportate. (APNG funziona nelle versioni recenti di Firefox e Opera.) In pratica, la maggior parte delle animazioni che vedi nelle pagine Web sono implementate in Flash.

28
wfaulk
  • Usa GIF se l'immagine ha pochi colori (come le icone). Può essere utilizzato anche per immagini animate (come banner pubblicitari).
  • Usa JPG se l'immagine ha molti colori (come le foto). JPEG è la stessa cosa.
  • Usa BMP se vuoi salvare l'immagine senza compressione. File molto più grandi!
  • Usa PNG se vuoi pubblicare l'immagine sul web ed essere aggiornato sugli standard moderni. Pro: adatto come sostituzione moderna sia per GIF che per JPG, è uno standard aperto e consente la trasparenza. Contro: non supportato da software precedenti e le dimensioni del file possono essere maggiori rispetto a GIF o JPG comparabili.
25

enter image description here


BMP:

  • Vecchio formato Nessuna perdita di dati.
  • Non compresso - Memorizza il valore di ciascun pixel. Quindi le immagini delle stesse dimensioni hanno lo stesso file (kilobyte/megabyte). Ad esempio, 800 × 600 BMP le immagini sono sempre 1.37 MiB come il famoso sfondo di WinXP "Bliss".
  • Trasparenza/traslucenza non supportata
  • Non raccomandato per niente

JPG:

  • Compressione lossy.
  • La quantità di perdita può essere impostata, ad esempio, durante la creazione di un'immagine e un salvataggio in Photoshop.
  • Salvare come una qualità superiore significa meno perdita di colori/profondità e alta dimensione del file, e viceversa.
  • Trasparenza/traslucenza non supportata
  • Consigliato per fotografie, non per grafica/icone

PNG:

  • Compressione senza perdita di dati (sì, meglio di entrambe le parole/mondi)
  • Supporta trasparenza e traslucenza, entrambi sono diversi
  • Consigliato per grafica/icone statiche, non per fotografie

GIF:

  • Supporta la trasparenza ma non la traslucenza
  • Consigliato solo per grafica/icone ANIMATE
  • Forse le fotografie in movimento nei frame di Harry Potter sono GIF: D
13
Shumon Saha

BMP utilizza i bit non elaborati con un'intestazione piccola o Codifica run-length . JPEG utilizza Discrete Cosine Transform . Vedere il blocco nella parte inferiore degli articoli di Wikipedia per altri algoritmi di compressione/codifica.

Guida semplice:

  • Per le fotografie, utilizzare:
    • Formati grezzi specifici della fotocamera se si dispone di attrezzature professionali e si desidera eseguire molte operazioni di post-elaborazione
    • JPEG altrimenti (per pubblicare foto sul web, dovrai convertire anche i formati raw in JPEG)
  • Per qualsiasi cosa con spigoli vivi, linee sottili e pochi colori (come screenshot o loghi) utilizzare:
    • GIF se stai facendo una pagina web che deve supportare browser molto vecchi (principalmente IE 6), o se vuoi fare semplici animazioni
    • PNG altrimenti
  • Non c'è una buona ragione per usare BMP, a meno che un programma specifico non accetti altri formati.
3