Format Gambar Dijelaskan: JPEG, PNG, WebP, GIF, SVG, AVIF

Terakhir diperbarui: June 27, 2026

Tidak ada satu format gambar terbaik — setiap format ada karena ia memecahkan masalah yang berbeda. JPEG mengompres foto, PNG mempertahankan tepi tajam dan transparansi, WebP dan AVIF mengecilkan foto lebih jauh, SVG dapat diskalakan tanpa piksel, dan GIF menganimasikan. Memilih yang tepat adalah keputusan konten, bukan preferensi. Panduan ini membahas apa fungsi setiap format, dengan ukuran file terukur nyata dari satu sumber gambar.

Jawaban cepat: format mana yang harus Anda gunakan?

Cocokkan format dengan konten gambar dan tempat ia ditampilkan:

Untuk rincian perbandingan format-melawan-format, lihat perbandingan AVIF vs WebP vs JPEG.

Bagaimana perbandingan formatnya?

Perbedaan ukuran file sangat besar dan konsisten. Diukur pada satu foto 1400×933:

Angka 853 KB dari PNG sangat menonjol: penyimpanan lossless foto membutuhkan biaya sekitar 8× lebih banyak daripada JPEG dan 19× lebih banyak daripada AVIF. Itulah mengapa PNG salah untuk foto halaman penuh meskipun secara teknis mampu menyimpannya.

JPEG — pekerja keras fotografi

JPEG (1992) adalah format lossy untuk foto. Format ini membuang detail frekuensi tinggi yang hampir tidak terlihat oleh mata, itulah mengapa ia mengecilkan foto secara dramatis tetapi membuat teks tajam dan garis tipis menjadi buram.

• Terbaik untuk: foto, gradien, adegan dunia nyata yang kompleks.
• Hindari untuk: teks, tangkapan layar UI, seni garis tajam, apa pun yang membutuhkan transparansi (JPEG tidak memiliki saluran alpha).
• Waspadai: artefak blok 8×8 yang terlihat di bawah kualitas ~70.

Gunakan kualitas 80–85 untuk foto web. Lihat cara mengompres JPEG.

PNG — tepi tajam dan transparansi

PNG adalah lossless dan mendukung saluran alpha penuh, jadi ia mempertahankan setiap piksel dan setiap transparansi. Biayanya adalah ukuran file: format ini tidak mengompres foto dengan baik.

• Terbaik untuk: grafis dengan tepi tajam, teks, logo, tangkapan layar UI, gambar transparan.
• Hindari untuk: foto halaman penuh (gunakan WebP/AVIF/JPEG sebagai gantinya — lihat tabel di atas).
• Waspadai: file besar pada foto. Kurangi dengan PNG-8 (≤256 warna) untuk grafis datar.

Untuk spesifikasi transparansi, lihat cara membuat gambar transparan.

WebP — default web modern

WebP (2010) melakukan lossy dan lossless, mendukung alpha, dan mengalahkan JPEG sebesar ~25–35% pada kualitas yang sama. Dukungan browser modern adalah ~98%.

• Terbaik untuk: foto web dan gambar web transparan di mana byte sangat penting.
• Hindari untuk: email dan klien yang sangat lama (gunakan fallback JPEG/PNG).
• Sajikan dengan: fallback JPEG/PNG dalam elemen <picture>.

AVIF — foto terkecil

AVIF (2019) menggunakan alat intra-frame codec video AV1 dan mengalahkan WebP sebesar 20–30% lagi. Dukungannya ~96% dan terus meningkat.

• Terbaik untuk: foto di mana byte terkecil sangat penting (gambar hero, LCP).
• Hindari untuk: ketika Anda tidak mampu melakukan encoding yang lambat, atau untuk browser yang sangat lama (gunakan fallback <picture>).
• Waspadai: penyebaran tekstur halus pada kualitas yang sangat rendah (<q40).

SVG — vektor yang dapat diskalakan

SVG adalah format vektor: ia menyimpan bentuk, bukan piksel, jadi ia dapat diskalakan ke ukuran apa pun tanpa kehilangan ketajaman dan ukurannya kecil untuk seni sederhana.

• Terbaik untuk: logo, ikon, ilustrasi sederhana, apa pun yang harus diskala.
• Hindari untuk: foto (SVG tidak dapat merepresentasikannya secara efisien).
• Waspadai: kompleksitas — SVG terperinci bisa besar; rasterisasi jika diperlukan.

GIF — warisan animasi

GIF menganimasikan dan mendukung transparansi 1-bit, tetapi terbatas pada 256 warna dan jauh lebih besar daripada format animasi modern untuk konten yang sama.

• Terbaik untuk: tidak ada hal modern — ganti dengan WebP atau AVIF animasi.
• Hindari untuk: apa pun yang kritis warnanya (batasan 256 warna) atau sensitif ukuran.
• Waspadai: file besar; GIF 3 detik seringkali lebih besar dari MP4 klip yang sama.

Bagaimana memilih di bawah tekanan?

Gunakan alur keputusan singkat ini:

1. Apakah itu foto? → WebP/AVIF (dengan fallback JPEG).
2. Apakah ia membutuhkan transparansi? → PNG atau WebP (alpha).
3. Apakah itu logo/ikon/ilustrasi yang dapat diskala? → SVG.
4. Apakah itu teks/UI tajam? → PNG.
5. Apakah itu animasi? → WebP/AVIF animasi, bukan GIF.
6. Apakah ini untuk email? → JPEG atau PNG (tanpa WebP/AVIF).

Untuk hampir setiap foto web, jawabannya sekarang adalah "WebP atau AVIF dengan fallback JPEG." JPEG tetap ada hanya karena kompatibilitas universal, bukan karena itu pilihan terbaik.

Bagaimana menyajikan beberapa format?

Gunakan elemen <picture> sehingga setiap browser mendapatkan format terbaik yang didukungnya:

<picture>
  <source srcset="/img/photo.avif" type="image/avif">
  <source srcset="/img/photo.webp" type="image/webp">
  <img src="/img/photo.jpg" alt="Deskripsi" width="800" height="600" loading="lazy">
</picture>

Browser memilih tipe pertama yang didukung dan mengabaikan sisanya. Selalu pertahankan <img> nyata dengan src JPEG sebagai fallback terakhir. Lihat panduan format gambar di MDN untuk tabel dukungan per-browser saat ini.

Kesalahan umum

• Menggunakan PNG untuk foto. Ini berhasil tetapi file-nya 8–19× lebih besar dari yang diperlukan.
• Menggunakan JPEG untuk teks atau logo. Kompresi membuat tepi tajam menjadi buram. Gunakan PNG atau SVG.
• Menyajikan satu format tanpa fallback. AVIF/WebP membutuhkan fallback JPEG untuk klien lama.
• Menganimasikan dengan GIF. WebP/AVIF animasi jauh lebih kecil dan mendukung lebih banyak warna.
• Mengabaikan SVG untuk logo. Logo yang di-rasterize buram pada DPI tinggi; SVG tetap tajam pada ukuran apa pun.

Pertanyaan yang sering diajukan

Format gambar mana yang harus saya gunakan?

JPEG untuk foto, PNG untuk grafis dengan tepi tajam atau transparansi, WebP sebagai default web modern (lebih kecil dari keduanya), AVIF untuk foto terkecil di browser modern, dan SVG untuk logo dan ikon. Cocokkan format dengan kontennya.

Apakah WebP lebih baik daripada JPEG?

Untuk pengiriman web, ya — WebP 25 hingga 35 persen lebih kecil pada kualitas yang sama dan didukung di semua browser saat ini. Simpan JPEG hanya sebagai fallback untuk browser yang sangat lama. Lihat panduan konverter WebP.

Kapan saya harus menggunakan AVIF?

Ketika Anda dapat melakukan encoding-nya dan audiens Anda sebagian besar berada di browser modern — AVIF kira-kira 50 persen lebih kecil dari JPEG. Pertukaran yang terjadi adalah encoding yang lebih lambat dan celah pada browser yang lebih tua. Kirim AVIF dengan fallback WebP melalui elemen <picture>.

Apakah PNG mendukung transparansi?

Ya — PNG memiliki saluran alpha penuh, itulah sebabnya ia adalah format untuk grafis dan logo dengan transparansi. JPEG tidak mendukung transparansi. WebP dan AVIF juga mendukung alpha, pada ukuran yang lebih kecil untuk pengiriman web.

Format mana yang terkecil untuk foto?

AVIF (terkecil di browser modern), lalu WebP, lalu JPEG. PNG adalah yang terbesar untuk foto karena lossless. Untuk pengiriman web, WebP adalah default aman; AVIF ketika Anda dapat melakukan encoding dan audiens Anda berada di browser modern.

Apa format gambar terkecil?

AVIF untuk foto di browser modern (kira-kira 50 persen lebih kecil dari JPEG), lalu WebP. PNG adalah yang terbesar untuk foto karena lossless. Untuk grafis dengan transparansi, WebP atau AVIF mengalahkan PNG. Cocokkan format dengan konten dan dukungan browser audiens Anda.

Apa perbedaan antara lossy dan lossless?

Lossless (PNG, WebP lossless) mempertahankan setiap piksel secara persis dan dapat dibalik sempurna — tidak ada kualitas yang hilang. Lossy (JPEG, WebP lossy, AVIF) membuang detail yang paling sedikit diperhatikan mata untuk mengecilkan file, dan kehilangan itu permanen. Lossy unggul dalam ukuran untuk foto; lossless unggul dalam kualitas untuk grafis, teks, dan master yang akan Anda edit ulang. Pilih berdasarkan konten.

Apa format terkecil untuk grafis dengan transparansi?

WebP atau AVIF, keduanya mendukung saluran alpha dan mengompres jauh lebih kecil daripada PNG. Untuk logo dan ikon di browser modern, WebP atau AVIF mengurangi ukuran file secara dramatis dibandingkan PNG sambil mempertahankan transparansinya. Sajikan mereka dengan fallback PNG melalui elemen <picture> untuk browser yang lebih tua yang tidak memiliki dukungan.

Kredit gambar

• Perbandingan ukuran format dan diagram batang — dibuat oleh penulis dari foto gaya e-commerce (Pexels #16675632, foto oleh Mikael Blomkvist) untuk menunjukkan ukuran file terukur nyata di seluruh PNG, JPEG, WebP, dan AVIF.