JPEG vs PNG vs BMP vs GIF vs SVG

40

Saya ingin tahu format mana yang membutuhkan lebih sedikit memori untuk kualitas gambar yang sama, dan apa perbedaan utama antara format ini.

Narek
sumber
15
Btw, JPG dan JPEG keduanya merujuk pada hal yang sama (lihat misalnya en.wikipedia.org/wiki/JPEG ) sehingga judulnya bisa disederhanakan sedikit.
Jonik
1
Tidak yakin bagaimana jawaban saya tidak menjawab pertanyaan awal Anda, dan bagaimana jawaban pilihan Anda ...? : - /
Django Reinhardt
4
> yang salah satu dari format ini membutuhkan lebih sedikit memori Um, tentukan "memori lebih sedikit". Apakah maksud Anda membutuhkan lebih sedikit ruang disk? (JPEG untuk foto, PNG dan / atau GIF untuk tangkapan layar.) Apakah maksud Anda file yang dikompresi mengambil lebih sedikit ruang dalam memori? (Sama seperti ruang disk.) Maksud Anda gambar yang didekodekan membutuhkan lebih sedikit ruang dalam memori ( Tidak ada ; semuanya pada dasarnya sama ketika diterjemahkan menjadi mentah.)
Synetech

Jawaban:

54

Dari Apa perbedaan antara TIFF, GIF, JPG, JPEG, PNG, dan file BMP?

BMP - Bitmap. Ini mungkin jenis format gambar digital pertama yang bisa saya ingat. Setiap gambar di komputer tampak seperti BMP. Pada Windows XP, program Paint menyimpan gambarnya secara otomatis dalam BMP. Namun, di Windows Vista dan gambar yang lebih baru sekarang disimpan ke JPEG. BMP adalah platform dasar untuk banyak jenis file lainnya.

JPG / JPEG - (Kelompok Ahli Fotografi Bersama) Format Jpeg digunakan untuk foto berwarna, atau gambar apa pun dengan banyak campuran atau gradien. Ini tidak baik dengan tepi tajam dan cenderung mengaburkannya sedikit kecuali disimpan dengan kualitas tinggi. Format ini menjadi populer dengan penemuan kamera digital. Sebagian besar, jika tidak semua, kamera digital mengunduh foto ke komputer Anda sebagai file Jpeg. Jelas produsen kamera digital melihat nilai dalam gambar berkualitas tinggi yang pada akhirnya mengambil lebih sedikit ruang.

GIF - (Graphics Interchange Format) Format Gif paling baik digunakan untuk teks, gambar garis, tangkapan layar, kartun, dan animasi. Gif terbatas pada jumlah total 256 warna atau kurang, sehingga gambar Gif relatif kecil. Ini biasanya digunakan untuk memuat halaman web dengan cepat. Itu juga membuat spanduk atau logo yang bagus untuk halaman web Anda. Gambar animasi juga dapat disimpan dalam format GIF sebagai urutan gambar statis. Misalnya, spanduk yang berkedip akan disimpan sebagai file Gif.

PNG - (Portable Networks Graphic) Format lossless ini adalah salah satu format gambar terbaik. Itu tidak selalu kompatibel dengan semua browser web atau perangkat lunak gambar, tetapi saat ini itu adalah format gambar terbaik untuk digunakan untuk situs web. Saya menggunakan .png untuk logo dan tangkapan layar. Salah satu kemampuannya yang paling menakjubkan adalah mampu memampatkan gambar tanpa kehilangan (tanpa kehilangan piksel), meskipun ukuran terkompresi akhir bervariasi di antara editor gambar.

TIFF - (Tagged Image File Format) Format file ini belum diperbarui sejak 1992 dan sekarang dimiliki oleh Adobe. Itu dapat menyimpan gambar dan data (tag) dalam satu file. TIFF dapat dikompresi, tetapi itu lebih karena kemampuannya untuk menyimpan data gambar dalam format lossless yang membuat file TIFF menjadi arsip gambar yang berguna, karena tidak seperti file JPEG standar, file TIFF menggunakan kompresi lossless (atau tidak ada) dapat diedit dan kembali -disimpan tanpa kehilangan kualitas gambar. File ini biasanya digunakan untuk memindai, mengirim faks, memproses kata, dan sebagainya. Ini bukan lagi format file umum untuk digunakan dengan foto digital Anda, karena jpeg berkualitas hebat dan menghabiskan lebih sedikit ruang.

harrymc
sumber
1
Ketahuilah bahwa tanpa semacam "peretasan", IE6 masih tidak mendukung transparansi alfa dalam file PNG, yaitu area transparansi yang semi buram
Josh Comley
2
... dan masih banyak orang yang menggunakan IE6 ( tinyurl.com/56kp ). Dan MS ingin mendukungnya hingga 2014! :( ( tinyurl.com/qvdyn5 )
Josh Comley
9
BMP: Ini bukan dasar untuk format file lainnya. Sejauh yang saya tahu BMP header dan struktur file tidak dibagikan dengan format lain (bertentangan dengan TIFF, misalnya). JPEG: Itu dibuat dan ada di web sebelum kamera digital menjadi lazim. Juga banyak kamera digital memungkinkan untuk menyimpan format "mentah" yang biasanya merupakan TIFF, meskipun dengan konten khusus vendor. GIF: Tidak terbatas pada 256 warna per gambar, hanya 256 warna per frame (lihat en.wikipedia.org/wiki/Graphics_Interchange_Format#True_color ).
Joey
4
TIFF: Format file dan wadah yang lazim untuk gambar mentah dari kamera digital (yang non-point-and-shoot). TIFF memungkinkan data yang hampir sewenang-wenang (karenanya ditandai ) di dalamnya yang juga berarti mendukung metode kompresi sewenang-wenang dari LZW (GIF), LZ77 (PNG) ke JPEG dan lainnya. Juga TIFF memungkinkan banyak gambar (halaman) dalam satu file.
Joey
4
Sementara jawabannya bagus dalam menjawab perbedaan format gambar dalam hal sejarah dan penggunaan umum, jawaban asli bertanya tentang ukuran dan kualitas relatif juga ...
camster342
76

Dalam gaya xkcd dari lbrandy.com :

teks alternatif

Robert MacLean
sumber
4
Mengilustrasikan intinya dengan baik :) (bahkan jika saya belum pernah melihat orang menganjurkan kebijakan 'Selalu JPEG!')
Jonik
7
+1 Karena gambar ini mengilustrasikan masalah jpeg dengan baik ...
Johan
5
Saya berharap saya bisa menggandakan diri! Saya mengirim ini ke semua orang yang mengirim saya jpeg jelek!
Tim Büthe
3
© 2008 Louis Brandy. Seluruh hak cipta....?
Arjan
3
Facebook misalnya memiliki kebijakan 'Selalu JPEG' ini. Saya mengunggah gambar PNG lossless 99 KB yang bagus dan Facebook mengubahnya menjadi JPEG 175 KB yang jelek.
Paul
63

Anda harus mengetahui beberapa faktor kunci ...

Pertama, ada dua jenis kompresi: Lossless dan Lossy .

  • Lossless berarti gambar dibuat lebih kecil, tetapi tidak merugikan kualitasnya.
  • Rugi berarti gambar dibuat (bahkan) lebih kecil, tetapi merugikan kualitas. Jika Anda menyimpan gambar dalam format Lossy berulang kali, kualitas gambar akan semakin buruk.

Ada juga kedalaman warna yang berbeda (palet): Warna yang diindeks dan warna langsung .

  • Diindeks berarti gambar hanya dapat menyimpan sejumlah warna (biasanya 256), yang dikendalikan oleh penulis, dalam sesuatu yang disebut Peta Warna
  • Langsung berarti Anda dapat menyimpan ribuan warna yang belum dipilih langsung oleh penulis

BMP - Lossless / Diindeks dan Langsung

Ini adalah format lama. Ini Lossless (tidak ada data gambar yang hilang pada save) tetapi ada juga sedikit atau tidak ada kompresi sama sekali, yang berarti menyimpan karena BMP menghasilkan ukuran file yang SANGAT besar. Ini dapat memiliki palet baik Indexed dan Direct, tapi itu sedikit menghibur. Ukuran file sangat besar sehingga tidak ada yang pernah benar-benar menggunakan format ini.

Baik untuk: Tidak ada yang benar-benar. Tidak ada apa pun yang unggul di BMP, atau tidak dilakukan dengan lebih baik oleh format lain.

BMP vs GIF


GIF - Lossless / Indexed saja

GIF menggunakan kompresi lossless, artinya Anda dapat menyimpan gambar berulang kali dan tidak pernah kehilangan data apa pun. Ukuran file jauh lebih kecil daripada BMP, karena kompresi yang baik sebenarnya digunakan, tetapi hanya dapat menyimpan palet yang diindeks. Ini berarti bahwa untuk sebagian besar kasus penggunaan , hanya ada maksimal 256 warna berbeda dalam file. Itu terdengar seperti jumlah yang sangat kecil, dan memang begitu.

Gambar GIF juga dapat dianimasikan dan memiliki transparansi.

Baik untuk: Logo, gambar garis, dan gambar sederhana lainnya yang perlu kecil. Hanya benar-benar digunakan untuk situs web.

GIF vs JPEG


JPEG - Rugi / Langsung

Gambar JPEG dirancang untuk membuat gambar foto terperinci sekecil mungkin dengan menghapus informasi yang tidak dilihat oleh mata manusia. Sebagai hasilnya adalah format Lossy, dan menyimpan file yang sama berulang-ulang akan menghasilkan lebih banyak data yang hilang dari waktu ke waktu. Ini memiliki palet ribuan warna dan sangat bagus untuk foto, tetapi kompresi yang hilang berarti buruk untuk logo dan gambar garis: Tidak hanya akan terlihat kabur, tetapi gambar tersebut juga akan memiliki ukuran file yang lebih besar dibandingkan dengan GIF!

Baik untuk: Foto-foto. Juga, gradien.

JPEG vs GIF


PNG-8 - Lossless / Indexed

PNG adalah format yang lebih baru, dan PNG-8 (versi PNG yang diindeks) benar-benar merupakan pengganti yang baik untuk GIF. Sayangnya, ia memiliki beberapa kelemahan: Pertama tidak dapat mendukung animasi seperti GIF dapat (well it can, tetapi hanya Firefox yang tampaknya mendukungnya, tidak seperti animasi GIF yang didukung oleh setiap browser). Kedua, ia memiliki beberapa masalah dukungan dengan browser lama seperti IE6. Ketiga, perangkat lunak penting seperti Photoshop memiliki implementasi format yang sangat buruk. (Sialan Anda, Adobe!) PNG-8 hanya dapat menyimpan 256 warna, seperti GIF.

Baik untuk: Hal utama yang PNG-8 lakukan lebih baik daripada GIF adalah memiliki dukungan untuk Transparansi Alpha.

PNG-8 vs GIF

Catatan Penting: Photoshop tidak mendukung Alpha Transparency untuk file PNG-8. (Sialan kau, Photoshop!) Ada beberapa cara untuk mengonversi file Photoshop PNG-24 ke PNG-8 sambil tetap mempertahankan transparansi. Salah satu metode adalah PNGQuant , yang lain adalah menyimpan file Anda dengan Fireworks .


PNG-24 - Lossless / Langsung

PNG-24 adalah format hebat yang menggabungkan pengkodean Lossless dengan warna langsung (ribuan warna, seperti halnya JPEG). Ini sangat mirip BMP dalam hal itu, kecuali bahwa PNG benar-benar memampatkan gambar, sehingga menghasilkan file yang jauh lebih kecil. Sayangnya file PNG-24 masih akan jauh lebih besar dari JPEG, GIF dan PNG-8, jadi Anda masih perlu mempertimbangkan apakah Anda benar-benar ingin menggunakannya.

Meskipun PNG-24 memungkinkan ribuan warna saat memiliki kompresi, mereka tidak dimaksudkan untuk menggantikan gambar JPEG. Sebuah foto yang disimpan sebagai PNG-24 kemungkinan akan setidaknya 5 kali lebih besar dari gambar JPEG yang setara, dengan sedikit peningkatan kualitas yang terlihat. (Tentu saja, ini mungkin hasil yang diinginkan jika Anda tidak khawatir tentang filesize, dan ingin mendapatkan kualitas gambar terbaik yang Anda bisa.)

Sama seperti PNG-8, PNG-24 juga mendukung transparansi alpha.


SVG - Lossless / Vector

Jenis file yang saat ini semakin populer adalah SVG, yang berbeda dari semua yang di atas dalam format file vektor (di atas semua raster ). Ini berarti bahwa sebenarnya terdiri dari garis dan kurva bukan piksel. Saat Anda memperbesar gambar vektor, Anda masih melihat kurva atau garis. Ketika Anda memperbesar gambar raster, Anda akan melihat piksel.

Sebagai contoh:

PNG vs SVG

SVG vs PNG

Ini berarti SVG sangat cocok untuk logo dan ikon yang Anda ingin mempertahankan ketajaman pada layar Retina atau pada ukuran yang berbeda.

Selain itu, file SVG ditulis menggunakan XML, dan dengan demikian dapat dibuka dan diedit dalam editor teks, sehingga dapat dimanipulasi dengan cepat, jika Anda mau. Misalnya, Anda dapat menggunakan JavaScript untuk mengubah warna ikon SVG di situs web seperti halnya Anda menulis teks (mis. Tidak perlu untuk gambar kedua).

Saya harap itu membantu!

Django Reinhardt
sumber
Ilustrasi yang bagus. Watch out for artefak yang disebabkan oleh kompresi. Saya pikir format kompresi video seperti JPEG memiliki masalah di mana zona merah padat akan cenderung "berdarah" di tepinya.
James P.
1
Anda salah tentang PNG yang tidak mendukung animasi. PNG dapat melakukannya dengan baik, sebagian besar pemirsa dan browser tidak mendukungnya. en.wikipedia.org/wiki/APNG Firefox mendukungnya dengan cukup baik. people.mozilla.com/~dolske/apng/demo.html
Rob
1
@ DjangoReinhardt Saya tahu Anda menyertakan contoh dalam jawaban Anda, tetapi sejauh menyangkut SVG vs PNG, dalam situasi apa kita dapat melihat SVG yang lebih besar (dalam ukuran file) vs PNG?
Hanna
1
@ Johnny Pertanyaan yang bagus. Ada beberapa kerugian untuk SVG, terutama jika mereka sangat rumit (atau disimpan dengan buruk - tapi itu kesalahan penulis, bukan format file). Saya akan mencoba dan menambahkan sesuatu yang menjawab ini - walaupun saya curiga bahwa SVG akan selalu lebih kecil (atau berukuran sama) untuk PNG.
Django Reinhardt
1
Fakta lain yang menyenangkan: File BMP memiliki ukuran yang mirip dengan PNG jika Anda meng-zipnya.
jiggunjer
28

Jawaban yang ada mencakup data teknis yang sangat sedikit, jadi saya akan memasukkannya di sini.

  • JPEG : hingga warna 24-bit (mungkin lebih?), Kompresi variabel (biasanya tinggi), lossy, tanpa dukungan alpha
  • PNG : hingga 48-bit warna, kompresi sedang, lossless, dukungan alpha
  • BMP : hingga 24-bit warna, kompresi sangat sedikit, lossless, dukungan alpha
  • GIF : hingga 8-bit warna, sedikit kompresi, lossless, dukungan transparansi, dukungan animasi

Kedalaman warna

  • Warna 8-bit == 256 warna
  • Warna 24-bit == 16.777.216 warna
  • 48-bit color == 281.474.976.710.656 warna

Sebagian besar monitor komputer beroperasi pada kedalaman warna 24-bit. Mata manusia dapat membedakan tentang banyak warna. Kedalaman warna tambahan sebagian besar untuk dapat menyimpan informasi dari sensor sehingga manipulasi foto memiliki lebih banyak data untuk dikerjakan. Mencoba merepresentasikan foto dalam warna 8-bit akan menghasilkan warna kasar.

Kompresi

Ini pada dasarnya merujuk pada seberapa besar file akhir akan. Lebih banyak kompresi sama dengan file yang lebih kecil. Namun, JPEG mencapai ukuran file kecil dengan membuang data. Ini disebut kompresi "lossy", karena Anda tidak akan pernah bisa mendapatkan kembali data asli yang tidak terkompresi. Kompresinya juga dioptimalkan untuk foto di mana tepi kontras tinggi tidak umum. Sebagaimana dinyatakan dalam jawaban lain, itu adalah pilihan yang buruk untuk apa pun selain foto.

Alpha / Transparansi

Alpha mengacu pada transparansi, tetapi ini menyiratkan bahwa ada lebih dari satu tingkat transparansi. GIF memiliki kemampuan untuk mendefinisikan piksel transparan, tapi itu buram atau 100% transparan, dan "transparan" digunakan sebagai salah satu dari 256 warna. PNG dan BMP memiliki kemampuan untuk menandai setiap piksel sebagai buram, transparan, atau sebagian transparan, seperti sepotong kaca berwarna. Paling umum, ada 256 tingkat transparansi, meskipun PNG sebenarnya dapat memiliki hingga 65.536 tingkat. JPEG tidak memiliki dukungan untuk transparansi.

Animasi

Secara efektif, dari format ini, hanya GIF yang memiliki dukungan untuk animasi. Ada spesifikasi untuk animasi dengan PNG (MNG, APNG) dan JPEG (MJPEG), tetapi mereka tidak didukung secara luas. (APNG berfungsi di Firefox dan Opera versi terbaru.) Dalam praktiknya, sebagian besar animasi yang Anda lihat di halaman web diimplementasikan dalam Flash.

wfaulk
sumber
APNG mendapatkan banyak dukungan.
Phoshi
Tentu saja. Saya tidak memperhatikan.
wfaulk
Yah, sebagian besar peramban modern mendukungnya, tetapi ini tidak banyak diketahui. IE8 tidak mendukungnya, saya tidak berpikir (tetapi dapat membacanya sebagai PNG, jadi menampilkan frame pertama)
Phoshi
Pemrosesan pemikiran yang hebat ..
InfantPro'Aravind '
25
  • Gunakan GIF jika gambar memiliki beberapa warna (seperti ikon). Dapat juga digunakan untuk gambar animasi (seperti spanduk iklan).
  • Gunakan JPG jika gambar memiliki banyak warna (seperti foto). JPEG adalah hal yang sama.
  • Gunakan BMP jika Anda ingin menyimpan gambar tanpa kompresi. Filesize yang jauh lebih besar!
  • Gunakan PNG jika Anda ingin mempublikasikan gambar di web dan dapatkan informasi terbaru tentang standar modern. Kelebihan: Cocok sebagai pengganti modern untuk GIF dan JPG, dan merupakan standar terbuka, dan memungkinkan transparansi. Cons: Tidak didukung oleh perangkat lunak yang lebih lama, dan ukuran file bisa lebih besar dari GIF atau JPG yang sebanding.
Torben Gundtofte-Bruun
sumber
3
+1 untuk pertimbangan praktis kapan harus menggunakannya.
Andrew Coleson
4
Berhati-hatilah dalam menggunakan PNG. Sebagai format lossless, mereka umumnya tidak cocok untuk foto dan sejenisnya, karena ukuran file. Jelas bukan "pengganti modern" untuk semua tujuan. Transcoding dari JPG ke PNG akan benar-benar bodoh.
Paul McMillan
@ Paul - Saya setuju, ini tentu saja tidak berguna untuk semua keperluan dan khususnya tidak untuk foto, tetapi ketika digunakan untuk grafis web itu menggantikan JPG.
Torben Gundtofte-Bruun
2
Saya tidak berpikir ada kebutuhan untuk BPM saat ini.
Arjan
1
PNG hampir selalu lebih kecil dari GIF. Ini memiliki skema kompresi yang unggul. Ketika lebih besar dari GIF yang tampak sama, itu biasanya kesalahan perangkat lunak yang buruk (misalnya Photoshop sebelum CS2). Gunakan PNG paletted (bukan 24-bit!) Dan memperbaikinya dengan PNG optimizer: imageoptim.pornel.net dan Anda tidak akan pernah ingin membuang bandwidth pada GIF lagi.
Kornel
13

masukkan deskripsi gambar di sini


BMP:

  • Format lama. Tidak ada kehilangan data.
  • Tidak dikompresi - Menyimpan nilai setiap piksel. Karenanya gambar dengan dimensi yang sama memiliki ukuran file yang sama (kilobyte / megabita). Misalnya, 800 × 600 gambar BMP selalu 1,37 MiB seperti wallpaper WinXP populer "Bliss" rolling hill.
  • Transparansi / transparansi tidak didukung
  • Tidak direkomendasikan untuk apa pun

JPG:

  • Kompresi lossy.
  • Jumlah kerugian dapat diatur, misalnya, saat membuat grafik & penghematan di Photoshop.
  • Menyimpan sebagai kualitas yang lebih tinggi berarti lebih sedikit kehilangan warna / kedalaman dan file yang tinggi, dan sebaliknya.
  • Transparansi / transparansi tidak didukung
  • Disarankan untuk foto, bukan untuk grafik / ikon

PNG:

  • Kompresi lossless (ya, terbaik dari kedua KATA / dunia)
  • Mendukung transparansi dan transparansi, keduanya berbeda
  • Disarankan untuk gambar / ikon statis, bukan untuk foto

GIF:

  • Mendukung transparansi tetapi tidak transparan
  • Disarankan hanya untuk grafik / ikon ANIMASI
  • Mungkin foto-foto bergerak dalam bingkai di Harry Potter adalah GIF: D
Shumon Saha
sumber
1
Tinjauan yang bagus. Tetapi mengapa BMP ditandai sebagai "lossless: false" di dalam tabel? Dalam teks Anda menyatakan IMHO dengan benar bahwa BMP memang lossless .
mpy
2
Saya tahu ini adalah utas lama, dan terima kasih atas jawabannya, tetapi perhatikan bahwa BMP secara opsional dikompresi dengan kompresi RLE yang sangat sederhana, tanpa kehilangan, dan RLE.
ysap
Ada alasan lain mengapa PNG TIDAK direkomendasikan untuk foto, selain dari ukuran file yang lebih besar dibandingkan dengan JPEG? Saya pertama-tama memindai foto-foto lama saya dalam format JPEG, kemudian memindai ulang di PNG setelah menyadari bahwa saya memindai foto yang akan disimpan dalam format lossy.
JAT86
4

BMP menggunakan bit mentah dengan header kecil, atau Run-length Encoding . JPEG menggunakan Discrete Cosine Transform . Lihat blok di bagian bawah artikel Wikipedia untuk algoritma kompresi / penyandian lainnya.

Ignacio Vazquez-Abrams
sumber
Saya suka PCX. Kembali ketika memutuskan untuk belajar assembler, untuk program pertama saya, saya menulis PCX viewer. Itu cukup mendidik. (Saya tidak menulis penampil JPG). :-D
Synetech
3

Panduan sederhana:

  • Untuk foto, gunakan:
    • Format mentah khusus kamera jika Anda memiliki peralatan profesional dan ingin melakukan banyak pasca pemrosesan
    • JPEG sebaliknya (untuk menerbitkan foto di web, Anda juga harus mengonversi format mentah ke JPEG)
  • Untuk apa pun dengan tepi tajam, garis-garis halus dan beberapa warna (seperti tangkapan layar atau logo) gunakan:
    • GIF jika Anda melakukan halaman web yang harus mendukung browser yang sangat lama (terutama IE 6), atau jika Anda ingin melakukan animasi sederhana
    • PNG sebaliknya
  • Tidak ada alasan yang baik untuk menggunakan BMP, kecuali program tertentu tidak menerima format lain.
Michael Borgwardt
sumber
1
IE telah mendukung PNG sejak beberapa versi 4.x (5 di Mac), tetapi PNG tidak transparan.
Arjan
1
IE6 sebenarnya bahkan mendukung PNG transparan jika memiliki transparansi seperti GIF. Hanya PNG dengan alfa lengkap yang tidak didukung.
Kornel
1
Sebenarnya Alpha Transparency IS didukung, asalkan itu PNG 8-bit. Aneh, tetapi benar.
Django Reinhardt