Apa perbedaan penggunaan PNG vs GIF vs JPEG vs SVG?

Kapan jenis file gambar tertentu harus digunakan saat membangun situs web atau antarmuka, dll?

Apa poin kekuatan dan kelemahan mereka?

Saya tahu bahwa PNG & GIF adalah lossless, sementara JPEG adalah lossy.
Tapi apa perbedaan utama antara PNG & GIF?
Mengapa saya lebih suka yang satu daripada yang lain? Apa itu SVG dan kapan saya harus menggunakannya?

Jika Anda tidak peduli dengan masing-masing dan setiap piksel, haruskah Anda selalu menggunakan JPEG karena itu yang "paling ringan"?

Anda harus mengetahui beberapa faktor utama ...

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), 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. Itu 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 keunggulan BMP di, atau tidak dilakukan lebih baik oleh format lain.

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.

JPEG - Rugi / Langsung

Gambar JPEG dirancang untuk membuat gambar foto terperinci sekecil mungkin dengan menghapus informasi yang tidak akan dilihat 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 seperti itu juga akan memiliki ukuran file yang lebih besar dibandingkan dengan GIF!

Baik untuk: Foto-foto. Juga, gradien.

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, ia tidak dapat mendukung animasi seperti GIF (memang bisa, tetapi hanya Firefox yang 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-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 lebih besar dari JPEG (untuk foto), dan GIF / PNG-8 (untuk logo dan gambar), jadi Anda masih perlu mempertimbangkan jika 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:

Ini berarti SVG sangat cocok untuk logo dan ikon yang Anda ingin mempertahankan ketajaman pada layar Retina atau pada ukuran yang berbeda. Ini juga berarti logo SVG kecil dapat digunakan pada ukuran yang lebih besar (lebih besar) tanpa penurunan kualitas gambar - sesuatu yang akan membutuhkan file terpisah yang lebih besar (dalam hal filesize) dengan format raster.

Ukuran file SVG seringkali kecil, meskipun ukurannya sangat besar, dan ini hebat. Perlu diingat, bagaimanapun, itu tergantung pada kompleksitas bentuk yang digunakan. SVG membutuhkan daya komputasi lebih dari gambar raster karena perhitungan matematis terlibat dalam menggambar kurva dan garis. Jika logo Anda sangat rumit, itu bisa memperlambat komputer pengguna, dan bahkan memiliki ukuran file yang sangat besar. Penting bagi Anda untuk menyederhanakan bentuk vektor sebanyak mungkin.

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

Secara keseluruhan, mereka terbaik untuk bentuk datar sederhana seperti logo atau grafik.

Saya harap itu membantu!

JPEG bukan yang paling ringan untuk semua jenis gambar (atau bahkan sebagian besar). Sudut dan garis lurus dan "isi" polos (blok warna solid) akan tampak buram atau memiliki artefak di dalamnya tergantung pada tingkat kompresi. Ini adalah format lossy, dan berfungsi terbaik untuk foto-foto di mana Anda tidak dapat melihat artefak dengan jelas. Garis-garis lurus (seperti dalam gambar dan komik dan semacamnya) dikompres dengan sangat baik dalam PNG dan tidak ada kerugian. GIF seharusnya hanya digunakan ketika Anda ingin transparansi berfungsi di IE6 atau Anda ingin animasi. GIF hanya mendukung pallete 256 warna tetapi juga lossless.

Jadi pada dasarnya di sini adalah cara untuk menentukan format gambar:

• GIF jika membutuhkan animasi atau transparansi yang berfungsi pada IE6 (perhatikan, transparansi PNG berfungsi setelah IE6)
• JPEG jika gambar adalah foto.
• PNG jika garis lurus seperti dalam komik atau gambar lain atau jika rentang warna yang luas diperlukan dengan transparansi (dan IE6 bukan faktor)

Dan seperti dikomentari, jika Anda tidak yakin apa yang akan memenuhi syarat, coba setiap format dengan rasio kompresi yang berbeda dan timbang kualitas dan ukuran gambar dan pilih yang mana yang menurut Anda terbaik. Saya hanya memberi aturan praktis.

Saya biasanya menggunakan PNG, karena sepertinya memiliki beberapa keunggulan dibandingkan GIF. Dulu ada pembatasan paten pada GIF, tetapi itu telah kedaluwarsa.

GIF cocok untuk garis seni tajam (seperti logo) dengan jumlah warna terbatas. Ini mengambil keuntungan dari kompresi lossless format, yang mendukung bidang datar warna seragam dengan tepi yang jelas (berbeda dengan JPEG, yang mendukung gradien halus dan gambar lebih lembut).

GIF dapat digunakan untuk animasi kecil dan klip film resolusi rendah.

Mengingat keterbatasan umum pada palet gambar GIF hingga 256 warna, biasanya tidak digunakan sebagai format untuk fotografi digital. Fotografer digital menggunakan format file gambar yang mampu mereproduksi rentang warna yang lebih besar, seperti TIFF, RAW, atau JPEG yang hilang, yang lebih cocok untuk mengompresi foto.

Format PNG adalah alternatif populer untuk gambar GIF karena menggunakan teknik kompresi yang lebih baik dan tidak memiliki batas 256 warna, tetapi PNG tidak mendukung animasi. Format MNG dan APNG, keduanya berasal dari PNG, mendukung animasi, tetapi tidak banyak digunakan.

JPEG akan memiliki kualitas buruk di sekitar tepi tajam dll. Dan untuk alasan ini tidak cocok untuk sebagian besar grafik web. Ia unggul dalam foto.

Dibandingkan dengan GIF, PNG menawarkan kompresi yang lebih baik, palet yang lebih besar, dan lebih banyak fitur, termasuk transparansi. Dan itu tanpa kerugian.

GIF terbatas pada 256 warna dan tidak mendukung transparansi nyata. Anda harus menggunakan PNG bukan GIF karena menawarkan kompresi dan fitur yang lebih baik. PNG sangat bagus untuk gambar kecil dan sederhana seperti logo, ikon, dll.

JPEG memiliki kompresi yang lebih baik dengan gambar kompleks seperti foto.

Ada peretasan yang bisa dilakukan untuk menggunakan gambar GIF untuk menunjukkan warna yang sebenarnya. Orang dapat menyiapkan animasi GIF dengan 256 frame warna palet dengan 0 frame delay dan mengatur animasi yang akan ditampilkan hanya sekali. Jadi, semua frame bisa ditampilkan pada waktu yang bersamaan. Pada akhirnya, gambar GIF berwarna yang sebenarnya ditampilkan.

Banyak perangkat lunak yang mampu mengambil gambar GIF tersebut. Namun, ukuran file output lebih besar dari file PNG. Ini harus digunakan jika benar-benar diperlukan.

png memiliki pallete warna yang lebih luas daripada gif dan gif adalah properitary sedangkan png tidak. gif dapat melakukan animasi, apa yang normal-png tidak bisa. png-transparansi hanya didukung oleh browser yang kira-kira lebih baru dari IE6, tetapi ada perbaikan Javascript untuk masalah itu. Keduanya mendukung transparansi alfa. Secara umum saya akan mengatakan bahwa Anda harus menggunakan png untuk sebagian besar webgraphics saat menggunakan jpeg untuk foto, screenshot, atau serupa karena kompresi png tidak berfungsi terlalu baik pada thoose.

GIF didasarkan pada palet 256 warna per gambar (setidaknya dalam inkarnasi dasarnya). PNG dapat melakukan "TrueColour", yaitu 16,7 Juta warna di luar kotak. PNG lossless kompres lebih baik daripada GIF lossless. GIF dapat melakukan transparansi "biner" (0% opacity atau 100% opacity). PNG dapat menangani transparansi alfa.

Secara keseluruhan, jika Anda tidak perlu menggunakan gambar Alpha-transparan dan mendukung IE6, PNG mungkin merupakan pilihan yang lebih baik ketika Anda membutuhkan gambar pixel-sempurna untuk ilustrasi vektor dan semacamnya. JPG tidak terkalahkan untuk foto.

Pada 2018, kami memiliki beberapa format baru, dukungan yang lebih baik untuk format sebelumnya dan beberapa peretasan yang cerdas dalam menggunakan video alih-alih gambar.

Untuk foto

jpg - masih format gambar yang paling banyak didukung.

webp- Format baru dari google. Potensi bagus, meskipun dukungan browser tidak bagus.

Untuk Ikon dan gambar

svg- jika memungkinkan. Ini berskala baik di layar retina, dapat diedit dalam editor teks dan disesuaikan melalui JS / CSS jika dimuat dalam DOM.

png- jika ini melibatkan grafik raster (yaitu saat dibuat di photoshop). Mendukung transparansi yang sangat penting dalam kasus penggunaan ini.

Untuk Animasi

svg- ditambah animasi css untuk grafik vektor. Semua keuntungan dari svg + kekuatan animasi css.

gif - masih format gambar animasi yang paling banyak didukung.

mp4- jika gambar animasi sebenarnya adalah klip video pendek. Twitter / Whatsapp mengonversi gif ke mp4.

apng- Dukungan browser yang layak (yaitu tidak ada IE, Edge), tetapi membuatnya tidak semudah gif.

webp- Dekat menggunakan mp4. Dukungan yang buruk

Ini adalah perbandingan yang bagus dari berbagai format gambar animasi.

Akhirnya, apa pun formatnya, pastikan untuk mengoptimalkannya - Ada alat untuk setiap format (misalnya SVGO, Guetzli, OptiPNG dll) dan dapat menghemat bandwidth yang besar.

Perbedaan utama adalah GIF dipatenkan dan sedikit lebih banyak didukung. PNG adalah spesifikasi terbuka dan transparansi alfa tidak didukung di IE6. Dukungan ditingkatkan di IE7, tetapi tidak sepenuhnya diperbaiki.

Sejauh ukuran file berjalan, GIF memiliki palet warna default yang lebih kecil, sehingga mereka cenderung ukuran file yang lebih kecil pada pandangan pertama. File PNG memiliki palet standar yang lebih besar, namun Anda dapat mengecilkan palet warnanya sehingga, saat Anda melakukannya, mereka menghasilkan ukuran file yang lebih kecil daripada GIF. Masalahnya lagi adalah bahwa fitur ini tidak didukung di Internet Explorer.

Juga, karena PNG dapat mendukung transparansi alfa, mereka satu-satunya pilihan jika Anda menginginkan variasi transparansi selain transparansi biner.

Jika Anda memilih JPEG, dan Anda berurusan dengan gambar untuk situs web, Anda mungkin ingin mempertimbangkan Google Guetzli perseptual , yang tersedia secara bebas. Dalam pengalaman saya, untuk kualitas tetap Guetzli menghasilkan file yang lebih kecil dari pustaka pengkodean JPEG standar, sambil mempertahankan kompatibilitas penuh dengan standar JPEG (sehingga gambar Anda akan memiliki kompatibilitas yang sama dengan gambar JPEG umum).

Satu-satunya kelemahan adalah bahwa Guetzli membutuhkan banyak waktu untuk menyandikan .. tetapi ini dilakukan hanya sekali, ketika Anda menyiapkan gambar untuk situs web, sementara manfaatnya tetap selamanya! Gambar yang lebih kecil akan membutuhkan waktu lebih sedikit untuk diunduh, sehingga kecepatan situs web Anda akan meningkat dalam penggunaan sehari-hari.

GIF memiliki palet 8 bit (256 warna) di mana PNG sebagai palet warna hingga 24 bit. Jadi, PNG dapat mendukung lebih banyak warna dan tentu saja algoritma mendukung kompresi

Seperti yang ditunjukkan oleh @aarjithn, bahwa WebP adalah codec untuk menyimpan foto.

Ini juga merupakan codec untuk menyimpan animasi (urutan gambar animasi). Pada tahun 2020, sebagian besar peramban utama memiliki dukungan di luar kotak ( tabel kompatibilitas ). Catatan untuk WIC sebuah plugin yang tersedia.

Ini memiliki keunggulan dibandingkan GIF karena didasarkan pada VP8 codec video dan memiliki rentang warna yang lebih luas daripada GIF, di mana GIF membatasi hingga 256 warna yang dikembangkannya menjadi 2 ²⁴ = 16777216 warna, masih menghemat banyak ruang.