JPG vs PNG vs WebP vs AVIF — Format Gambar Mana yang Sebaiknya Anda Gunakan?

JPG (JPEG) adalah format yang digunakan orang tuamu tanpa mengetahui namanya. Dibuat pada tahun 1992, ini telah menjadi format foto default selama tiga dekade. Setiap perangkat, setiap browser, setiap aplikasi di dunia membuka JPG. Ini menggunakan kompresi lossy — artinya ia membuang beberapa data gambar untuk mengurangi ukuran file. Pada pengaturan kualitas tinggi (85-95%), perbedaannya tidak terlihat oleh kebanyakan orang. Pada kualitas rendah, Anda mendapatkan karakteristik artefak "blok" di bagian tepinya.

PNG adalah format yang disukai desainer. Ini menggunakan kompresi lossless — tidak ada data yang hilang. Hal ini penting karena dua alasan: dukungan transparansi (JPG tidak dapat melakukan latar belakang transparan) dan ketajaman teks. Tangkapan layar, logo, grafik dengan teks, apa pun yang memiliki garis tajam — PNG menanganinya dengan sempurna. Keuntungannya adalah ukuran file: PNG bisa dengan mudah berukuran 5-10x lebih besar dari JPG pada foto yang sama.

WebP adalah jawaban Google untuk "bagaimana jika JPG dan PNG punya bayi?" Ini mendukung kompresi lossy dan lossless, menangani transparansi, dan biasanya menghasilkan file 25-35% lebih kecil dari JPG yang setara. Dukungan browser mencapai 95%+ pada tahun 2023, sehingga alasan kompatibilitas lama pada dasarnya hilang. Jika Anda menyajikan gambar di web, WebP adalah pilihan praktis saat ini.

AVIF adalah pesaing terbaru, berdasarkan codec video AV1. Dalam hal efisiensi kompresi murni, ini mengalahkan segalanya — kira-kira 50% lebih kecil dari JPG dengan kualitas visual yang sama. Ini mendukung transparansi, HDR, dan gamut warna lebar. Sisi negatifnya? Pengkodean lambat (terasa lebih lambat dibandingkan WebP), dan dukungan browser, meskipun bagus, belum sepenuhnya universal. Safari baru saja menambahkan dukungan penuh.

Untuk foto — foto liburan, gambar produk, potret — Anda memerlukan kompresi lossy karena gambar ini memiliki gradien halus dan banyak variasi warna. JPG berfungsi sempurna jika kompatibilitas adalah prioritas Anda. Jika Anda menaruhnya di situs web, WebP memotong bandwidth Anda sebesar 30% tanpa perbedaan yang terlihat. AVIF menghemat lebih banyak tetapi membutuhkan waktu lebih lama untuk menyandikan.

Contoh dunia nyata: foto lanskap berukuran 1920x1080 mungkin berukuran 450 KB sebagai JPG kualitas-90, 320 KB sebagai WebP, dan 200 KB sebagai AVIF. Kualitas visual yang sama di ketiganya — perbedaannya hanya pada ukuran file. Untuk situs web yang memuat 20 gambar, itulah perbedaan antara 9 MB dan 4 MB data gambar. Pengguna Anda yang menggunakan koneksi 4G akan menyadarinya.

Untuk gambar dengan tepi tajam, teks, warna datar, atau transparansi, permainannya berubah. PNG masih merupakan default yang aman — jaminan kualitas lossless, dukungan universal, dan transparansi. WebP tanpa kerugian memberi Anda kualitas yang sama dengan ukuran file sekitar 26% lebih kecil. AVIF lossless juga berfungsi tetapi menawarkan penghematan lebih sedikit dibandingkan AVIF lossy.

Jangan pernah menggunakan JPG untuk tangkapan layar dengan teks, logo, atau maket UI. Kompresi JPG yang lossy menciptakan artefak yang terlihat di sekitar transisi warna yang tajam — teks terlihat buram, garis lurus menjadi bergelombang. Itu bukan masalah pengaturan kualitas; ini adalah batasan mendasar tentang cara kerja kompresi JPG.

Jika Anda pengguna iPhone, Anda mungkin bertanya-tanya di mana letak HEIC. HEIC adalah format foto default Apple, dan ukurannya kira-kira 50% lebih kecil dari JPG dengan kualitas serupa. Namun inilah masalahnya: sebagian besar browser web selain Safari tidak mendukungnya. Windows memerlukan plugin untuk melihatnya. Kebanyakan formulir online menolaknya. HEIC sangat bagus untuk menyimpan foto di iPhone Anda, namun saat Anda perlu berbagi atau mengunggah, Anda akan melakukannya mengubahnya menjadi JPG atau WebP.

Untuk situs web: sajikan AVIF dengan fallback WebP dan JPG sebagai jaring pengaman terakhir. Sebagian besar sistem manajemen konten dan CDN modern menangani hal ini secara otomatis. Untuk dokumen dan formulir: tetap gunakan JPG — itulah yang diharapkan oleh setiap formulir unggahan. Untuk pekerjaan desain: gunakan PNG selama proses pengeditan, ekspor sebagai WebP atau AVIF untuk pengiriman. Untuk pengarsipan: simpan format aslinya (biasanya JPG atau RAW dari kamera Anda). Jangan mengonversi format lossy berulang kali — setiap konversi sedikit menurunkan kualitas.

Perang format akan terus berlanjut. JPEG XL sedang menunggu, dan mungkin akan ada sesuatu yang baru tahun depan. Namun saat ini, jawaban praktis bagi kebanyakan orang adalah: JPG untuk kompatibilitas, WebP untuk penggunaan web modern, PNG ketika Anda memerlukan transparansi atau kualitas lossless. Jika Anda perlu beralih di antara keduanya, an konverter gambar menyelesaikannya dalam hitungan detik tanpa menginstal apa pun.

Angka menceritakan kisah lebih baik daripada kata-kata. Ambil foto biasa berukuran 1920 × 1080 dan simpan dalam setiap format dengan kualitas visual yang sebanding. JPG dengan kualitas 85: ~250 KB. PNG (tanpa hilang): ~2,5 MB. WebP dengan kualitas setara: ~180 KB. AVIF dengan kualitas setara: ~130 KB. Artinya, ukuran AVIF kira-kira setengah dari ukuran JPG dengan hasil yang identik secara visual, dan sekitar 30% lebih kecil dari WebP.

Untuk grafik atau tangkapan layar dengan teks dan warna datar, angkanya bergeser. PNG: ~150 KB. JPG dengan kualitas 90: ~200 KB (dan dengan artefak yang terlihat di sekitar teks). WebP tanpa hilang: ~100 KB. AVIF tanpa hilang: ~90 KB. Inilah sebabnya mengapa PNG lebih disukai untuk grafik — JPG sebenarnya menghasilkan file yang lebih besar DAN kualitas yang lebih rendah untuk jenis konten ini.

JPG dan PNG dapat digunakan di mana saja — setiap browser, setiap aplikasi, setiap perangkat, selama beberapa dekade. WebP kini memiliki dukungan browser yang hampir universal: Chrome, Firefox, Safari (sejak 2022), Edge, dan semua browser seluler mendukungnya. Satu-satunya yang bertahan adalah beberapa sistem perusahaan dan klien email yang sangat tua.

Dukungan AVIF terus berkembang namun belum bersifat universal. Chrome, Firefox, dan Opera mendukungnya sepenuhnya. Safari menambahkan dukungan AVIF pada tahun 2023, namun beberapa perangkat iOS lama masih belum dapat menanganinya. Jika Anda membuat situs web, pendekatan yang aman adalah dengan menyajikan AVIF dengan fallback WebP dan JPG sebagai jaring pengaman akhir menggunakan HTML <picture> elemen.

Mengonversi dari lossless ke lossy (PNG → JPG, PNG → WebP) benar-benar aman — Anda cukup memilih tingkat kompresi. Mengonversi lossy menjadi lossy (JPG → WebP) berfungsi dengan baik untuk satu konversi tetapi menyebabkan sedikit penurunan kualitas. Jangan pernah melakukan konversi bolak-balik antara format lossy berulang kali — setiap konversi semakin menurunkan kualitas, seperti memfotokopi sebuah fotokopi.

Jika Anda perlu mengonversi gambar antar format, mengonversi PNG ke JPG, mengonversi HEIC ke JPG, atau gunakan yang lain alat konversi — semuanya gratis dan instan di browser Anda.

Gunakan JPG ketika: berbagi foto melalui email, mengunggah ke media sosial, atau ketika kompatibilitas universal lebih penting daripada ukuran file. Gunakan PNG ketika: gambar memiliki transparansi, berisi teks atau tepi tajam, atau Anda memerlukan kualitas lossless untuk mengedit. Gunakan WebP ketika: mengoptimalkan gambar untuk situs web Anda — ini adalah keseimbangan terbaik antara kualitas, ukuran file, dan dukungan browser. Gunakan AVIF ketika: Anda memerlukan kompresi maksimum dan dapat menyediakan cadangan untuk browser lama.