JPEG XL Hadir di Firefox 157: Format Gambar Modern yang Wajib Developer Tahu

Berita menarik buat developer web: Firefox 157 dikabarkan mengaktifkan dukungan JPEG XL secara default di semua platform. Ini langkah besar — Firefox menjadi browser mainstream pertama yang menghadirkan JPEG XL secara default, setelah Chrome sempat membatalkan rencananya pada 2022 dan Safari baru mendukungnya secara parsial belakangan.

TL;DR

• Firefox 157 mengaktifkan dukungan JPEG XL secara default di semua platform, menjadikannya browser mainstream pertama yang melakukannya.
• JPEG XL menawarkan kompresi rata-rata 60% lebih kecil dari JPEG untuk kualitas visual yang sama, plus dukungan lossless, HDR, animasi, dan transparansi.
• Format ini bisa melakukan lossless transcoding dari JPEG lama tanpa kehilangan data, sesuatu yang tidak dimiliki WebP maupun AVIF.
• Chrome sempat membatalkan rencana dukungan JPEG XL pada 2022, sementara Safari baru mendukungnya secara parsial.
• Developer disarankan memakai elemen picture dengan fallback AVIF/WebP serta menambahkan konversi JPEG XL di pipeline build.

Artikel ini membahas apa itu JPEG XL, kenapa format ini menarik untuk web, bagaimana perbandingannya dengan WebP dan AVIF yang sudah lebih dulu populer, dan apa implikasinya untuk developer yang mengelola gambar di website.

Apa Itu JPEG XL

JPEG XL adalah format gambar modern yang dikembangkan oleh JPEG Committee (dengan kode image/jxl), dirancang sebagai penerus format JPEG yang sudah berusia puluhan tahun. Nama "XL" merujuk pada eXtended Longevity — tujuan utamanya adalah format yang bisa bertahan lama, bukan sekadar format baru yang cepat basi.

JPEG XL dirancang dengan beberapa keunggulan teknis: kompresi yang jauh lebih baik daripada JPEG (rata-rata 60% lebih kecil untuk kualitas visual yang sama), dukungan lossless, HDR, animasi, dan transparansi. Yang paling menarik bagi industri web: JPEG XL bisa melakukan lossless transcoding dari JPEG — mengubah file JPEG lama ke JPEG XL tanpa kehilangan data sama sekali, sambil tetap mendapat penghematan ukuran.

Perbandingan format gambar WebP, AVIF, dan JPEG XL

Aspek	WebP	AVIF	JPEG XL
Dukungan browser	Didukung semua browser	Didukung semua browser modern	Firefox 157 default, Safari parsial
Kompresi	Lebih baik dari JPEG, kalah dari AVIF dan JPEG XL	Sangat baik, berbasis AV1	Setara atau lebih baik dari AVIF
Encoding	Tidak disebutkan bermasalah	Bisa lambat dan berat	Cepat dan efisien
Lossless transcoding dari JPEG	Tidak dimiliki	Tidak dimiliki	Ada, tanpa kehilangan data
Fitur didukung	Kebutuhan umum yang teruji	Animasi dan HDR masih berkembang	Lossless, HDR, animasi, transparansi
Kekurangan utama	Kalah efisien untuk kualitas tinggi	Encoding lambat dan berat	Dukungan browser masih terbatas

Format ini juga punya mode "modular" yang membuat decoding sangat cepat dan efisien, bahkan di perangkat dengan sumber daya terbatas — properti yang penting untuk web di negara berkembang dengan banyak perangkat entry-level.

Kenapa Dukungan Firefox Ini Penting

Dukungan browser adalah pertaruhan format gambar di web. Sebuah format bisa secara teknis superior, tapi tanpa dukungan browser yang luas, developer tidak akan berani menggunakannya di production — karena gambar yang tidak bisa dirender sama saja dengan gambar yang rusak.

Chrome sempat menjanjikan JPEG XL di 2021, tapi membatalkannya di 2022 dengan alasan kurangnya minat ekosistem dan kompleksitas. Keputusan itu sempat membuat masa depan JPEG XL di web diragukan. Firefox, yang mengikuti standar web secara konsisten, kini mengambil langkah berbeda dengan mengaktifkannya secara default.

Dukungan Firefox berarti ekosistem JPEG XL punya pijakan kedua di browser mainstream (selain Safari yang mendukungnya secara parsial). Ini bukan berarti JPEG XL langsung bisa dipakai untuk semua pengguna, tapi sinyalnya jelas: format ini punya masa depan di web, dan developer yang mempersiapkan diri tidak akan tertinggal.

Perbandingan dengan WebP dan AVIF

WebP dan AVIF sudah lebih dulu diterima luas. Bagaimana posisi JPEG XL?

• WebP. Format paling mapan, didukung semua browser. Kompresi lebih baik daripada JPEG, tapi kalah efisien dari AVIF dan JPEG XL untuk kualitas tinggi. Cocok untuk kebutuhan umum yang sudah teruji.
• AVIF. Berbasis AV1, kompresi sangat baik, didukung semua browser modern. Kekurangannya: encoding bisa lambat dan berat, dan dukungan fitur seperti animasi dan HDR masih berkembang.
• JPEG XL. Kompresi setara atau lebih baik dari AVIF di banyak kasus, encoding cepat, mendukung lossless transcoding dari JPEG, animasi, HDR, dan transparansi dalam satu format. Dukungan browser masih terbatas — ini kekurangan utamanya.

Untuk gambar fotografi, JPEG XL dan AVIF berada di level yang mirip dalam hal efisiensi kompresi, dengan keunggulan JPEG XL di kecepatan encoding dan fitur lengkap. Untuk tangkapan layar dan gambar dengan teks, JPEG XL unggul karena mode lossless-nya sangat efisien — sesuatu yang sering diabaikan tapi penting untuk tutorial dan dokumentasi.

Implementasi di Website dengan Fallback

Sebelum JPEG XL didukung semua browser, developer yang ingin memanfaatkannya harus memakai pola fallback. Pola paling umum memakai elemen <picture> dengan sumber JPEG XL di urutan pertama dan format yang lebih mapan sebagai fallback:

<picture>
  <source srcset="gambar.jxl" type="image/jxl">
  <source srcset="gambar.avif" type="image/avif">
  <img src="gambar.webp" alt="Deskripsi gambar" width="1200" height="630">
</picture>

Browser akan memilih sumber pertama yang formatnya didukung. Firefox 157 dan Safari modern akan memakai JPEG XL, Chrome dan Edge akan jatuh ke AVIF atau WebP. Hasilnya: pengguna browser yang mendukung JPEG XL mendapat file terkecil, sisanya tetap mendapat format yang baik.

Pendekatan lain yang perlu dipertimbangkan: serving JPEG XL hanya untuk pengguna yang mendukungnya via header Accept atau fitur HTMLImageElement detection, dengan tetap menyimpan JPEG/WebP sebagai baseline. Ini lebih kompleks tapi memaksimalkan penghematan bandwidth untuk pengguna yang bisa memanfaatkannya.

Pertimbangan untuk Developer di Indonesia

Untuk developer dan pemilik website di Indonesia, JPEG XL menarik dari sisi biaya bandwidth dan kecepatan loading. Banyak pengunjung mengakses web dari koneksi mobile yang terbatas; gambar adalah komponen terbesar dari ukuran halaman. Format yang lebih efisien berarti halaman lebih cepat, bounce rate lebih rendah, dan pengalaman lebih baik untuk pengguna dengan kuota terbatas.

Beberapa langkah yang bisa disiapkan:

• Mulai dari gambar statis. Artikel blog, thumbnail, dan gambar OG adalah kandidat terbaik untuk dicoba dengan JPEG XL karena jumlahnya banyak dan ukurannya bisa dioptimalkan sekaligus.
• Otomatiskan konversi di pipeline. Kalau sudah punya pipeline build yang mengonversi gambar (misalnya dengan sharp atau ImageMagick), tambahkan output JPEG XL di samping format existing — cost-nya kecil, dan siap begitu dukungan browser meluas.
• Pantau dukungan browser. Cek data dukungan dari sumber seperti Can I Use secara berkala. Keputusan memakai JPEG XL sebagai satu-satunya format baru layak diambil saat coverage sudah cukup tinggi.
• Ukur dampaknya. Bandingkan ukuran file dan waktu render antara JPEG, WebP, AVIF, dan JPEG XL untuk gambar yang sama, lalu putuskan berdasarkan data, bukan tren.

Tools untuk Konversi dan Optimasi

Untuk mencoba JPEG XL, ada beberapa tool yang bisa langsung dipakai — baik untuk konversi batch maupun integrasi ke pipeline build:

• cjxl / djxl (libjxl). Tool resmi dari proyek JPEG XL untuk encoding dan decoding. cjxl mengonversi gambar ke format JXL dengan berbagai mode kualitas, dan djxl mengembalikannya ke format lain. Ini tool paling dasar yang wajib ada di toolkit.
• ImageMagick. Versi terbaru mendukung JPEG XL (kalau dikompilasi dengan libjxl). Perintah konversi batch yang familiar tetap bekerja: convert input.png -quality 90 output.jxl.
• sharp (Node.js). Library populer untuk pipeline gambar di ekosistem JavaScript. Dukungan JPEG XL tersedia via libvips yang dikompilasi dengan libjxl — berguna untuk integrasi di build tool seperti Vite, Astro, atau Next.js.
• Squoosh. Tool visual dari Google untuk membandingkan format gambar secara side-by-side. Cocok untuk eksperimen cepat sebelum memutuskan setting kualitas.

Contoh konversi batch dengan cjxl untuk folder gambar:

# Konversi semua PNG di folder ke JXL (mode lossless)
for f in *.png; do
  cjxl "$f" "${f%.png}.jxl" --lossless 1
done

# Konversi dengan kualitas visual target (butteraugli)
cjxl input.jpg output.jxl -q 85

Pola yang paling berguna di pipeline web adalah konversi paralel: simpan file JPEG/WebP asli sebagai fallback, dan hasilkan versi JXL di sampingnya. Dengan <picture>, browser yang mendukung akan otomatis memilih JXL — pengguna lain tetap dapat format lama. Biaya penyimpanan ekstra kecil, dan manfaat bandwidth langsung terasa untuk pengguna yang mendukung.

Kesimpulan

JPEG XL adalah format yang secara teknis sangat menjanjikan: kompresi efisien, encoding cepat, fitur lengkap, dan yang paling unik — bisa mengonversi JPEG lama secara lossless. Dukungan default di Firefox 157 menghidupkan kembali peluangnya di web, meskipun jalan menuju adopsi penuh masih panjang selama Chrome belum ikut.

Untuk sekarang, pendekatan paling masuk akal adalah siap-siap tanpa dependensi: tambahkan output JPEG XL di pipeline gambar dengan fallback yang benar, ukur hasilnya, dan tunggu dukungan browser meluas. Format yang lebih efisien akan terus relevan — dan developer yang sudah siap infrastrukturnya akan diuntungkan lebih dulu.

Kalau lo mengelola website dengan banyak gambar — misalnya blog tutorial, marketplace, atau platform e-commerce — langkah paling cepat untuk merasakan manfaatnya adalah mengaudit dulu gambar mana yang paling banyak menyumbang ukuran halaman. Gambar-gambar itu adalah kandidat terbaik untuk dikonversi ke JPEG XL: dampaknya paling terasa, dan risikonya paling kecil karena jumlahnya terbatas. Dari sana, bandingkan metrik sebelum dan sesudah — waktu muat halaman, ukuran transfer, dan Core Web Vitals seperti LCP — untuk memastikan investasi konversi benar-benar menghasilkan perbaikan yang terukur.

Rekomendasi Tools & Layanan

Mau langsung nyobain AI yang dibahas di artikel ini tanpa setup ribet? AI token plan Alibaba Cloud ngasih akses ke Qwen, DeepSeek, dan model lain lewat satu API — dan platform Qwen buat build agent sendiri. Free tier-nya cukup buat eksperimen pertama.

FAQ

Apa itu JPEG XL dan siapa yang mengembangkannya?

JPEG XL adalah format gambar modern dengan kode image/jxl yang dikembangkan oleh JPEG Committee sebagai penerus JPEG. Nama XL merujuk pada eXtended Longevity, yaitu tujuan agar formatnya bertahan lama.

Apa keunggulan utama JPEG XL dibanding format gambar lain?

Kompresinya rata-rata 60% lebih kecil dari JPEG untuk kualitas visual yang sama, encodingnya cepat, dan mendukung lossless, HDR, animasi, serta transparansi. Keunggulan paling uniknya adalah lossless transcoding dari JPEG lama tanpa kehilangan data.

Bagaimana cara memakai JPEG XL di website selama dukungan browser belum lengkap?

Gunakan pola fallback dengan elemen picture yang menempatkan sumber JPEG XL di urutan pertama, lalu AVIF dan WebP sebagai fallback. Browser akan otomatis memilih format pertama yang didukungnya.

Apa saja tools untuk konversi gambar ke JPEG XL?

Tool resminya adalah cjxl dan djxl dari proyek libjxl untuk encoding dan decoding. Selain itu ada ImageMagick, library sharp di Node.js via libvips, dan Squoosh untuk perbandingan format secara visual.

Mengapa dukungan JPEG XL di Firefox 157 penting bagi developer web?

Dukungan browser adalah penentu keberhasilan format gambar di web, dan Firefox menjadi pijakan kedua JPEG XL di browser mainstream setelah Safari yang parsial. Ini sinyal bahwa formatnya punya masa depan, meski adopsi penuh masih bergantung pada Chrome.

Sumber & Referensi

Rujukan resmi yang dipakai untuk memverifikasi klaim di artikel ini:

• Situs resmi JPEG XL dari JPEG Committee
• MDN: Panduan format gambar untuk web
• Spesifikasi resmi AVIF dari Alliance for Open Media
• Repositori resmi encoder/decoder JPEG XL