Imagyc›Artikel

Format gambar JPEG, PNG, WebP, AVIF, dan JXL untuk situs web

Diterbitkan 12 Oktober 2026 · 7 menit baca

Foto produk harus memperlihatkan detail dan cepat dibuka di ponsel. Logo memerlukan tepi yang bersih dan sering kali latar transparan. Banner dapat memenuhi layar pertama dan menunda konten yang ingin dilihat pengunjung. Kebutuhan ini berbeda, sehingga formatnya perlu dipilih sesuai gambar.

JPEG dan JPG merupakan dua ekstensi untuk format yang sama. Jadi, daftar JPEG, JPG, PNG, WebP, AVIF, dan JXL tidak mewakili enam teknologi berbeda. Untuk situs, WebP dan AVIF layak dibandingkan, JPEG atau PNG dapat menjadi alternatif, dan JXL dapat diuji ketika kemampuannya memberi manfaat nyata.¹

Pilih format berdasarkan isi gambar, kualitas yang diperlukan, dan perangkat pengunjung. Mengganti format dapat menghemat data, tetapi dimensi berlebihan tetap perlu diperbaiki.²

Perbedaan utama antarformat

Format yang dibandingkan di sini menyimpan gambar sebagai piksel. Perbedaannya adalah cara data dikodekan dan dikompresi.

Kompresi lossy membuang sebagian informasi untuk menghasilkan file lebih kecil. Kompresi lossless memungkinkan piksel yang dikodekan dipulihkan secara tepat.³ Lossy tidak selalu menghasilkan tampilan buruk; hasilnya bergantung pada pengaturan dan isi gambar.

Perhatikan tekstur, bercak warna, garis, dan tulisan kecil. Menghemat ukuran kurang berguna jika detail yang dibutuhkan pembeli hilang.

Ukuran file dan dimensi juga berbeda. Gambar 2.000 × 2.000 piksel dapat berukuran kecil dalam KB, tetapi tetap membutuhkan pemrosesan untuk ditampilkan. Transparansi adalah kemampuan lain: memungkinkan objek diletakkan di atas latar berbeda tanpa kotak putih di sekelilingnya.

JPEG dan JPG untuk foto dan kompatibilitas

Ekstensi .jpg dan .jpeg tidak menentukan perbedaan kualitas. Mengubah nama ekstensi juga tidak mengompresi atau mengonversi file.¹

JPEG yang umum digunakan di web memakai kompresi lossy dan cocok untuk banyak foto dengan warna serta transisi halus. Kompatibilitasnya luas, sehingga masih berguna untuk berbagi file, sistem lama, dan alternatif format baru. JPEG biasa tidak menyediakan transparansi atau animasi bawaan.^{1, 4}

Kelemahannya lebih terlihat pada tulisan, garis tipis, dan warna datar. Kompresi kuat dapat menghasilkan gangguan di sekitar tepi. Untuk materi seperti itu, bandingkan PNG atau WebP lossless.

JPEG progresif dapat menampilkan versi awal, lalu memperjelasnya selama pengunduhan. Kemampuan ini dapat membantu persepsi pemuatan, tetapi tidak menggantikan kebutuhan dimensi dan ukuran file yang sesuai.

PNG untuk transparansi dan piksel yang perlu dipertahankan

PNG memakai kompresi lossless dan mendukung transparansi dengan tingkat opasitas berbeda. Format ini berguna untuk tangkapan layar, diagram, ilustrasi bertulisan, dan materi yang perlu mempertahankan piksel secara tepat.⁵

Pada foto, PNG dapat menghasilkan file jauh lebih besar daripada format lossy. Galeri foto seluruhnya dalam PNG perlu ditinjau, terutama jika tidak membutuhkan transparansi.

Beberapa alat mengurangi palet warna sebelum menyimpan PNG. Tahap itu dapat mengubah gambar meskipun kompresi PNG sendiri bersifat lossless. Periksa gradasi, bayangan, dan tepi setelah ekspor.⁶

Untuk animasi ada APNG, yang telah dimasukkan ke spesifikasi PNG. File PNG satu frame tetap statis; dukungan format tidak membuat setiap PNG menjadi animasi.⁵

WebP sebagai pilihan praktis sehari-hari

WebP mendukung kompresi lossy maupun lossless, transparansi, dan animasi. Format ini dapat dipakai untuk foto, produk tanpa latar, dan materi grafis.⁷

Dukungan browser modernnya luas. Untuk banyak situs, WebP menjadi titik awal yang praktis: buat ekspor, bandingkan dengan sumber, lalu lihat apakah detail tetap memadai.

Google memublikasikan pengujian yang menunjukkan penghematan dibanding JPEG dan PNG, tetapi angka tersebut bukan jaminan untuk setiap gambar. File yang sudah terkompresi dengan baik mungkin hanya memberi sedikit ruang penghematan.⁷

AVIF untuk menguji file lebih kecil dengan kualitas memadai

AVIF memakai teknologi kompresi AV1. Format ini mendukung transparansi, animasi, mode lossless, dan kemampuan warna lanjutan.^{8, 9}

AVIF juga dapat menyimpan HDR serta kedalaman warna 8, 10, atau 12 bit per komponen. Artinya, sumber dan layar yang sesuai dapat menampilkan lebih banyak gradasi dan rentang kecerahan. Mengonversi foto biasa tidak menciptakan HDR atau detail yang tidak ada pada sumbernya.⁹

Uji AVIF pada banner dan foto katalog. Periksa kain, rambut, kulit, serta detail kecil. Pengaturan yang terlalu agresif dapat membuat tekstur tampak terlalu halus.

Ekspor dapat membutuhkan lebih banyak pemrosesan, bergantung pada encoder dan pengaturannya. Untuk koleksi besar, pertimbangkan waktu konversi. Sediakan alternatif bagi browser lama.

JXL untuk fidelitas tinggi dan pemuatan progresif

JXL adalah ekstensi JPEG XL, format berbeda dari JPEG biasa. JPEG XL mendukung kompresi lossy dan lossless, transparansi, animasi, HDR, serta tampilan progresif.¹⁰

Salah satu kemampuannya adalah rekompresi JPEG yang reversibel. Dalam implementasi yang mempertahankan data tersebut, JPEG asli dapat direkonstruksi secara tepat. Ini tidak mengembalikan detail yang sudah hilang ketika JPEG awal dibuat.¹⁰

Kompatibilitasnya berubah. Pada 6 Oktober 2026, Chrome mengumumkan dukungan decoding JPEG XL mulai versi 155. Jangan memakai informasi lama bahwa semua Chrome selalu tidak mendukung JXL. Periksa versi yang benar-benar digunakan pengunjung.¹¹

Kemampuan format dan kemampuan browser tidak selalu sama. Sebuah browser dapat membuka JXL statis tetapi memiliki keterbatasan pada animasi atau tampilan progresif. Uji kebutuhan tersebut secara terpisah.

Perbandingan fitur

Fitur seperti HDR dan animasi memerlukan pemeriksaan tambahan. Tabel ini menjelaskan format, bukan menjamin setiap aplikasi dapat membaca seluruh kemampuannya.

Kompatibilitas browser desktop dan ponsel

JPEG dan PNG memiliki dukungan luas. WebP dan AVIF bekerja pada browser utama versi modern. JXL perlu diperiksa menurut versi, sistem operasi, dan fitur yang dipakai.^{4, 11}

Tabel ini merupakan panduan pemilihan, bukan daftar seluruh versi browser. Perubahan dukungan perlu diperiksa kembali saat menerbitkan situs. WebKit mendokumentasikan dukungan JPEG XL pada Safari 17; membuka gambar statis tidak menjamin semua fitur JPEG XL tersedia.¹²

Nama aplikasi saja tidak cukup pada ponsel. Jangan menyamakan Chrome Android dengan Chrome iPhone: aplikasi yang menggunakan WebKit juga dipengaruhi dukungan sistem Apple. Opera Mini pun perlu diperlakukan terpisah dari Opera Mobile.

Membuka gambar dan mengekspornya adalah kemampuan berbeda. Pada API Canvas, PNG merupakan format yang diwajibkan. Permintaan format yang tidak didukung dapat menghasilkan PNG. Periksa format file hasil ekspor, bukan hanya nama yang diharapkan.¹³

Cara menggunakan format untuk mendukung kecepatan dan SEO

Google tidak mewajibkan satu format untuk semua gambar. Dukungan browser juga berbeda dari dukungan format yang didokumentasikan Google Images. Periksa keduanya sebelum menggunakan JXL sebagai satu-satunya sumber.¹⁴

Salah satu pendekatan adalah menyediakan AVIF atau WebP, lalu JPEG atau PNG sebagai alternatif melalui picture. Contoh ini mengandaikan semua file sudah dibuat:

<picture>
  <source srcset="tas-biru.avif" type="image/avif">
  <source srcset="tas-biru.webp" type="image/webp">
  <img src="tas-biru.jpg" width="800" height="600"
       alt="Tas biru dilihat dari depan">
</picture>

Browser memilih sumber yang dikenalnya. Kode tidak mengonversi file secara otomatis.¹⁵

Sebelum konversi, tentukan dimensi. Foto 4.000 piksel tidak perlu dikirim utuh untuk kartu produk kecil. Gunakan srcset dan sizes untuk menyediakan ukuran berbeda sesuai tampilan. Simak panduan resolusi gambar.

Bandingkan kualitas pada ukuran penggunaan. Jangan menganggap nilai “80” sama pada dua alat. Simpan sumber berkualitas agar tidak melakukan konversi lossy berulang dari hasil yang sudah menurun.

Gambar utama yang menjadi LCP sebaiknya tidak menggunakan lazy loading. Prioritas tinggi dapat membantu gambar yang tepat. Untuk gambar di bawah area awal, pertimbangkan loading="lazy". Cantumkan lebar dan tinggi agar ruang tersedia sebelum gambar muncul.¹⁶

Gunakan nama deskriptif dan teks alternatif sesuai fungsi. sepatu-lari-biru.webp lebih mudah dipahami daripada IMG_8472.webp. Panduan nama gambar untuk SEO menjelaskan cara menerapkannya.

Cara memilih untuk situs Anda

Mulai dari banner awal, foto produk utama, dan thumbnail katalog. Bandingkan WebP dan AVIF dengan kualitas serupa. Untuk objek tanpa latar, pertahankan transparansi menggunakan format yang mendukungnya. Jika perlu membuat potongan, baca cara menghapus latar belakang foto.

Untuk tangkapan layar bertulisan, uji lossless. Untuk logo yang perlu diperbesar, pertimbangkan SVG dan vektorisasi.

Uji halaman di ponsel dengan kondisi mendekati pengunjung. File lebih kecil dalam bytes belum tentu selesai tampil lebih cepat karena perangkat juga perlu mendekodenya. Gunakan panduan diagnosis gambar lambat untuk memeriksa hasil pada halaman.

Anda dapat membandingkan ekspor di Imagyc. Pilih hasil yang mempertahankan detail, dapat dibuka oleh audiens, dan menunjukkan manfaat ketika dipublikasikan.

Pertanyaan yang sering diajukan

Apakah JPG berbeda dari JPEG?

Keduanya merupakan ekstensi format yang sama. Kualitas ditentukan oleh sumber dan pengaturan ekspor, bukan panjang ekstensinya.

Apakah AVIF selalu lebih kecil daripada WebP?

Tidak ada hasil yang berlaku untuk semua gambar dan pengaturan. Bandingkan ukuran pada kualitas visual yang sebanding.

Mengapa JPG tidak memiliki latar transparan?

JPEG biasa tidak mempunyai saluran transparansi. Gunakan PNG, WebP, atau format lain yang mendukung transparansi sesuai tujuan publikasi.

Apakah mengganti ekstensi berarti mengonversi gambar?

Tidak. Konversi harus menghasilkan data dengan format baru. Mengganti nama saja tidak mengubah pengkodean file.