Panduan Lengkap Format Gambar: PNG, JPG, WebP, AVIF, dan SVG

JPG / JPEG  Joint Photographic Experts Group

Dibuat pada 1992 oleh Joint Photographic Experts Group, JPG dirancang khusus untuk memampatkan fotografi secara efisien. Algoritmenya membagi gambar ke dalam blok 8×8 piksel lalu menerapkan Discrete Cosine Transform (DCT) untuk mewakili tiap blok sebagai gabungan frekuensi — sembari membuang frekuensi tinggi yang paling sedikit ditangkap mata. Hasilnya kompresi lossy: sebagian data asli dibuang selamanya.

Kenapa ia begitu cocok untuk foto: fotografi punya peralihan warna yang halus dan bertahap — persis jenis informasi yang paling efisien dimampatkan JPG. Foto pemandangan dalam JPG kualitas 80% bisa 10× lebih kecil dari file yang sama tanpa kompresi, dengan selisih visual yang tak terlihat di layar.

Di mana ia gagal: algoritme blok 8×8 memunculkan artefak yang kasatmata pada tepi tajam, teks, dan bidang berwarna rata. Logo hitam di atas latar putih dalam JPG akan memperlihatkan bercak keabuan di sekeliling hurufnya — yang terkenal sebagai "JPEG artifacts". JPG juga tidak mendukung kanal alfa (transparansi).

Kapan dipakai: fotografi untuk web, cetak, dan email. Foto produk, banner, gambar blog. Gambar apa pun yang warnanya beragam dan tidak butuh transparansi.

Kapan dihindari: logo, ikon, tangkapan layar bertulisan, gambar berlatar transparan, ilustrasi bertepi tajam, dan gambar yang akan berkali-kali diedit lalu disimpan ulang.

PNG  Portable Network Graphics

Lahir pada 1996 sebagai alternatif GIF (yang terbentur urusan paten), PNG memakai kompresi lossless — tidak ada data yang dibuang. Algoritme DEFLATE (gabungan LZ77 dan Huffman coding) menata ulang data piksel secara lebih efisien tanpa membuang apa pun. Dengan begitu gambar hasil dekompresinya persis sama piksel demi piksel dengan aslinya, tak peduli berapa kali file itu disimpan ulang.

Kanal alfa: PNG mendukung satu kanal tambahan per piksel di luar RGB — kanal alfa, yang mengatur kepekatan dari 0 (sepenuhnya transparan) sampai 255 (sepenuhnya pekat). Inilah yang memungkinkan transparansi penuh, transparansi sebagian, dan tepi ber-anti-aliasing yang halus di atas latar apa pun.

PNG-8 vs PNG-24 vs PNG-32: PNG-8 memakai palet hingga 256 warna (seperti GIF), pas untuk ikon sederhana dan gambar berwarna sedikit. PNG-24 memakai warna penuh (16 juta) tanpa transparansi. PNG-32 memakai warna penuh plus kanal alfa — jenis inilah yang dimaksud orang saat menyebut "PNG transparan".

Di mana ia gagal: untuk fotografi, PNG tidak efisien — file foto dalam PNG bisa 3–10× lebih besar daripada padanannya dalam JPG. Kompresi lossless tidak sanggup memangkas ragam warna fotografi secara efisien.

Kapan dipakai: logo dan ikon berlatar transparan, tangkapan layar bertulisan, infografis, gambar dengan bidang warna rata, karya digital bertepi tajam, dan gambar yang perlu diedit ulang tanpa kerusakan yang menumpuk.

Kapan dihindari: fotografi untuk web (pakai JPG atau WebP), gambar yang filenya harus ringan, dan email marketing yang dukungannya lebih baik untuk JPG.

WebP  Web Picture format

Dikembangkan Google dari codec video VP8, WebP dirilis pada 2010 untuk menjadi pengganti menyeluruh bagi JPG dan PNG di web. Ia mendukung dua mode: lossy (berbasis VP8, untuk foto) dan lossless (berbasis algoritmenya sendiri, untuk grafis). Pada mode lossy, WebP memakai prediksi blok dan transformasi adaptif — teknik yang lebih canggih dari DCT milik JPG — sehingga filenya 25–35% lebih kecil pada kualitas visual yang setara.

Kelebihan dua dunia sekaligus: selain menggantikan JPG untuk foto (mode lossy), WebP juga menggantikan PNG untuk logo dan grafis (mode lossless dengan kanal alfa), umumnya dengan file 20–30% lebih kecil. Ia satu-satunya format yang menyatukan kegunaan JPG dan PNG sekaligus lebih efisien di keduanya.

Dukungan pada 2026: didukung Chrome, Firefox, Safari (sejak versi 14), Edge, dan Opera — mencakup lebih dari 97% pengguna web. Pengecualian utamanya adalah klien email lama (terutama Outlook) dan sistem korporat warisan yang masih memakai IE11.

Kapan dipakai: hampir semua gambar untuk web — foto, logo, ikon, banner. Ini format baku yang dianjurkan untuk unggahan apa pun di situs masa kini. PageSpeed Insights milik Google secara khusus menyarankan WebP begitu mendeteksi JPG atau PNG yang sebenarnya bisa diganti WebP.

Kapan dihindari: email marketing (dukungannya belum konsisten), cetak percetakan, thumbnail YouTube (tidak menerima WebP), dan file unduhan yang akan dibuka pengguna di sistem lama.

AVIF  AV1 Image File Format

AVIF diturunkan dari codec video AV1 (dikembangkan Alliance for Open Media, yang beranggotakan Google, Mozilla, Netflix, Amazon, dan lainnya). Ini format paling baru dan paling maju secara teknis untuk gambar di web — filenya 20–50% lebih kecil dari WebP pada kualitas visual setara di banyak kasus, terutama pada kualitas rendah ketika artefak WebP mulai kelihatan.

Kenapa ia begitu efisien: AV1 memakai teknik kompresi yang jauh lebih canggih daripada VP8 milik WebP — termasuk mode prediksi intra-frame, transformasi berukuran variabel, dan loop filter. Hasilnya sangat mengesankan pada foto yang rumit dan gradasi yang halus.

Persoalan waktu encoding: mengubah gambar ke AVIF jauh lebih lambat daripada ke WebP — encoder AVIF bisa butuh 10–100× lebih lama untuk memproses gambar yang sama. Untuk situs dengan banyak gambar atau pipeline build yang membuat varian gambar secara langsung, ongkos komputasi ini terasa.

Dukungan pada 2026: Chrome 85+, Firefox 93+, Safari 16+. Tidak didukung IE11 maupun sebagian besar klien email. Dukungannya masih lebih sempit dari WebP, jadi anjurannya adalah menyajikan AVIF dengan cadangan WebP dan JPG lewat tag <picture>.

Kapan dipakai: situs bertrafik tinggi yang tiap KB hematnya berdampak nyata pada biaya bandwidth; gambar berkualitas tinggi yang selisih visualnya dengan WebP masih terasa; dan proyek baru yang pipeline build-nya sudah mendukung AVIF.

Kapan dihindari: saat waktu encoding jadi faktor penting; dan untuk dipakai di konverter ImageTools (encoder AVIF lewat Canvas API di browser belum dioptimalkan dan bisa menghasilkan file yang lebih besar dari aslinya — pakailah perkakas sisi server seperti sharp untuk AVIF yang bermutu).

SVG  Scalable Vector Graphics

SVG sama sekali berbeda dari semua format lain dalam daftar ini. Alih-alih menyimpan piksel, ia menyimpan instruksi matematis dalam XML — "gambar persegi panjang selebar 200 di posisi X,Y dengan warna #3ecf8e". Browser atau software menghitung pikselnya saat itu juga pada resolusi yang dibutuhkan. SVG berukuran 5 KB bisa tampil sempurna pada favicon 16px maupun pada baliho 20 meter.

Kenapa ia format yang ideal untuk logo dan ikon: logo dan ikon tersusun dari bentuk geometris — persegi panjang, lingkaran, kurva bezier, dan teks. SVG menjabarkan bentuk-bentuk itu persis tanpa kehilangan informasi sedikit pun. Logo PNG berukuran 200px akan pecah pada 2000px; logo yang sama dalam SVG tetap sempurna pada ukuran berapa pun.

Bisa diubah lewat CSS dan JavaScript: elemen SVG inline di HTML bisa diolah seperti elemen DOM lainnya — warnanya diubah lewat CSS, animasinya ditambahkan lewat CSS transition atau JS, dan interaksinya lewat event tetikus. Ia seperti HTML untuk gambar.

Di mana ia gagal: fotografi dan gambar dengan banyak warna serta gradasi rumit menghasilkan SVG yang raksasa dan tidak praktis — dan sekalipun jadi, kualitasnya kalah dari JPG karena SVG memang tidak dirancang untuk data fotografis.

Kapan dipakai: logo, ikon, ilustrasi geometris, grafik data, peta, karya apa pun yang harus bisa diperbesar ke berbagai ukuran, dan ikon interaktif pada antarmuka web.

Kapan dihindari: fotografi, gambar dengan banyak warna dan tekstur, media sosial (sebagian besar tidak menerima unggahan SVG), dan email marketing.

GIF  Graphics Interchange Format

Dibuat pada 1987 oleh CompuServe, GIF memakai algoritme LZW (Lempel-Ziv-Welch) untuk kompresi lossless — tetapi dengan satu batasan mendasar: hanya mendukung 256 warna per frame. Tiap piksel adalah indeks dalam palet berisi maksimal 256 entri, sehingga formatnya tidak efisien untuk foto (yang punya jutaan warna) tetapi memadai untuk gambar sederhana berwarna sedikit.

Alasan GIF bertahan sampai sekarang: ia satu-satunya format raster berdukungan luas yang secara bawaan mendukung animasi banyak frame — dan sifat itulah yang membuatnya tetap hidup puluhan tahun setelah format yang secara teknis lebih unggul bermunculan. WebP dan AVIF beranimasi lebih efisien, tetapi dukungan luas dan kedudukan budaya GIF animasi menjamin ia terus dipakai.

Transparansi sebagian: GIF hanya mendukung satu warna "transparan" per frame — tanpa transparansi sebagian maupun anti-aliasing. Hasilnya, tepi elemen yang melengkung tampak "bergerigi", terutama di atas latar berwarna.

Kapan dipakai: animasi sederhana di platform yang belum mendukung WebP beranimasi atau MP4; ikon beranimasi berwarna sedikit; serta meme dan konten media sosial yang memang biasanya berbentuk GIF.

Kapan dihindari: foto diam (pakai JPG atau WebP), logo diam (pakai PNG atau SVG), dan animasi rumit untuk web (pakai MP4 atau WebP beranimasi — jauh lebih efisien).

BMP  Bitmap

BMP adalah format bitmap Windows buatan Microsoft. Pada sebagian besar pengaturannya ia tidak memampatkan apa pun — tiap piksel disimpan langsung beserta nilai warnanya. Hasilnya file yang sangat besar: gambar 1920×1080 dalam BMP 24 bit selalu memakan tepat 5,93 MB, apa pun isinya.

Kenapa ia masih ada: BMP dijamin terbaca di seluruh ekosistem Microsoft — Windows, Office, printer, dan software penyunting lawas. Untuk pemakaian internal pada pipeline pengolahan gambar yang justru diuntungkan oleh ketiadaan kompresi (data terjamin bebas artefak di tiap tahap), BMP masih punya tempat.

Kapan dipakai: saat suatu sistem tertentu (terutama yang lawas) mensyaratkan BMP; sebagai format antara dalam pipeline pengolahan yang kompresinya akan memunculkan artefak; dan pencetakan industri pada beberapa sistem khusus.

Kapan dihindari: pemakaian apa pun di web, email, media sosial, atau konteks mana pun yang ukuran filenya penting.