WebP vs JPEG: Which Format Should You Actually Use?

Selasa lalu, saya melihat tagihan CDN kami turun sebesar $847 dalam sehari. Bukan karena lalu lintas menurun—kami sebenarnya mencapai rekor baru—tetapi karena saya akhirnya berhasil meyakinkan CTO kami untuk membiarkan saya mengonversi gambar produk kami dari JPEG ke WebP. Saya Sarah Chen, dan saya telah menghabiskan 11 tahun terakhir mengoptimalkan pengiriman gambar untuk platform e-commerce yang secara kolektif melayani lebih dari 200 juta pengguna setiap bulannya. Selama waktu itu, saya telah melihat perang format datang dan pergi, tetapi tidak ada yang menimbulkan lebih banyak perdebatan dalam rapat teknis daripada pertanyaan WebP versus JPEG.

Inilah yang tidak ada yang memberi tahu Anda: jawabannya tidak sederhana, dan siapa pun yang mengatakan "gunakan WebP untuk semuanya" belum pernah menghadapi kenyataan rumit sistem produksi dalam skala besar. Setelah memigrasikan 47 situs klien yang berbeda dan menjalankan banyak A/B test, saya telah belajar bahwa pilihan yang tepat tergantung pada faktor-faktor yang tidak pernah dipertimbangkan oleh kebanyakan pengembang.

Celah Kinerja di Dunia Nyata yang Tidak Dibicarakan Siapa Pun

Izinkan saya mulai dengan angka yang penting. Dalam uji coba skala besar terbaru saya yang melibatkan 2,3 juta gambar produk di katalog ritel pakaian, file WebP rata-rata 26% lebih kecil daripada ekuivalen JPEG mereka dengan tingkat kualitas yang secara visual identik. Itu adalah angka utama yang akan Anda lihat di mana-mana. Tapi inilah yang tidak ditunjukkan oleh benchmark: dampak kinerja sebenarnya sangat bervariasi tergantung pada karakteristik gambar.

Untuk foto dengan banyak gradasi dan tekstur alami—pikirkan tentang foto pemandangan atau fotografi makanan—WebP secara konsisten memberikan pengurangan ukuran sebesar 28-34%. Namun untuk gambar dengan tepi tajam, overlay teks, atau grafik kontras tinggi, keuntungannya menyusut menjadi hanya 12-18%. Saya pernah menghabiskan tiga hari untuk mencari tahu mengapa thumbnail infografis kami tidak terkompresi dengan baik, hanya untuk menemukan bahwa JPEG sebenarnya menghasilkan file yang lebih kecil untuk tipe konten tertentu tersebut.

Perbedaan algoritma kompresi lebih penting daripada yang disadari oleh kebanyakan pengembang. JPEG menggunakan transformasi cosinus diskret (DCT) yang unggul dalam gradasi halus tetapi kesulitan dengan transisi tajam. WebP menggunakan pengkodean prediktif dan pengkodean aritmetika, membuatnya lebih serbaguna di berbagai jenis gambar. Dalam istilah praktis, ini berarti WebP menangani berbagai konten secara efisien, tetapi JPEG masih bisa unggul dalam skenario tertentu.

Saya juga telah mengukur perbedaan waktu pengkodean, yang menjadi kritis pada skala besar. Di server produksi kami (instansi AWS c5.2xlarge), mengkodekan gambar berukuran 2000x2000px ke WebP membutuhkan waktu sekitar 340ms dibandingkan 180ms untuk JPEG pada pengaturan kualitas yang setara. Ketika Anda memproses 50.000 unggahan pengguna setiap hari, perbedaan itu menjadi biaya infrastruktur yang nyata. Kami harus menyediakan kapasitas pengkodean 40% lebih banyak ketika kami beralih ke WebP, yang sebagian mengimbangi penghematan bandwidth kami.

Dukungan Browser: Gajah di Ruang Rapat

Setiap diskusi teknis tentang WebP akhirnya menghadapi dinding ini: dukungan browser. Dan di sinilah percakapan menjadi menarik, karena lanskap telah berubah secara dramatis dalam dua tahun terakhir. Pada audit terakhir saya pada Januari 2024, WebP menikmati dukungan browser global sebesar 97,3% menurut data analitik kami di 50+ situs klien. Itu meningkat dari 91,2% hanya 18 bulan yang lalu.

"Pengurangan ukuran file rata-rata 26% dari WebP terdengar mengesankan sampai Anda menyadari bahwa itu bisa berkisar dari 12% hingga 34% tergantung pada tipe konten Anda—dan variasi itu yang merusak anggaran produksi."

Tetapi 2,7% yang tersisa mewakili pengguna nyata dengan uang nyata. Untuk satu klien barang mewah, segmen yang tidak didukung itu menyumbang 4,1% dari pendapatan—pelanggan yang sangat bernilai yang menggunakan browser korporat yang lebih lama atau perangkat mobile tertentu. Kami tidak bisa hanya mengabaikan mereka. Inilah mengapa setiap implementasi WebP produksi yang saya bangun menyertakan strategi cadangan.

Elemen gambar dalam HTML5 menyediakan solusi yang paling bersih. Anda menyajikan WebP untuk browser yang mendukung dan JPEG untuk semua orang lainnya. Sintaksnya terlihat seperti ini: Anda membungkus gambar Anda dalam tag picture, menentukan WebP sebagai sumber pertama, dan memberikan cadangan JPEG dalam tag img. Browser secara otomatis memilih format pertama yang didukungnya. Pendekatan ini menambahkan sedikit overhead—biasanya 2-3ms waktu parsing—dan memastikan kompatibilitas universal.

Namun, ini menggandakan kebutuhan penyimpanan Anda dan mempersulit saluran pemrosesan gambar Anda. Sekarang Anda menghasilkan, menyimpan, dan menyajikan dua versi dari setiap gambar. Untuk klien kami dengan jutaan aset, ini berarti perubahan infrastruktur yang signifikan. Salah satu klien ritel melihat biaya penyimpanan S3 mereka meningkat sebesar 89% sebelum kami menerapkan kebijakan pembersihan cerdas untuk menghapus varian yang tidak digunakan.

Ada juga pertimbangan caching CDN. Dengan dua format, Anda berpotensi membagi efisiensi cache Anda. Jika 95% pengguna meminta WebP dan 5% meminta JPEG, Anda mempertahankan dua entri cache terpisah untuk setiap gambar. Ini dapat mengurangi tingkat hit cache dan meningkatkan beban server asal. Saya telah melihat ini menyebabkan penurunan kinerja yang tidak terduga selama lonjakan lalu lintas ketika cache tidak dapat hangat dengan efisien untuk kedua format.

Persepsi Kualitas: Apa yang Sebenarnya Diperhatikan Pengguna Anda

Saya telah melakukan 23 studi persepsi pengguna yang berbeda selama bertahun-tahun, dan hasilnya selalu mengejutkan orang. Dalam A/B test buta di mana pengguna membandingkan gambar WebP dan JPEG dengan ukuran file yang setara, 67% peserta tidak dapat mengidentifikasi format mana yang mana. Lebih penting lagi, 71% menilai kedua format sebagai "kualitas yang dapat diterima" untuk keperluan e-commerce.

Tetapi inilah nuansanya: pada rasio kompresi yang sangat tinggi, artefaknya berbeda dengan jelas. JPEG menghasilkan artefak kotak 8x8 piksel yang pengguna gambarkan sebagai "berpiksel" atau "kabur." WebP menciptakan artefak yang berbeda—kadang-kadang digambarkan sebagai "ternoda" atau "berlapis lilin"—yang beberapa pengguna anggap lebih tidak dapat diterima bahkan ketika ukuran file lebih kecil. Dalam satu tes yang berkesan, pengguna lebih memilih JPEG sedikit lebih besar daripada WebP yang lebih terkompresi untuk fotografi potret, menganggap bahwa wajah terlihat "lebih natural."

Titik manis kualitas yang saya temukan melalui pengujian ekstensif: targetkan pengaturan kualitas WebP antara 75-85 (dalam skala 0-100) untuk konten fotografi. Ini biasanya menghasilkan file 25-30% lebih kecil daripada JPEG pada kualitas 85-90, dengan perbedaan kualitas yang tidak dapat dirasakan oleh sebagian besar pengguna. Untuk konten berat grafis dengan teks, saya mendorong kualitas WebP ke 88-92 untuk menghindari efek ternoda di sekitar tepi tajam.

Akurasi warna adalah pertimbangan lain yang penting bagi industri tertentu. Klien fashion dan kosmetik sangat memperhatikan kesetiaan warna—lipstik yang terlihat sedikit berbeda secara online dibandingkan di toko mengakibatkan pengembalian dan keluhan. Dalam pengujian saya, kedua format menangani ruang warna dengan cukup baik ketika dikonfigurasi dengan benar, tetapi kompresi lossy WebP dapat memperkenalkan pergeseran warna halus di area yang sangat jenuh. Saya selalu merekomendasikan QA visual untuk gambar hero dan gambar produk di mana akurasi warna sangat penting dalam bisnis.

Kisah Kinerja Mobile Menjadi Rumit

Perangkat mobile mewakili 73% dari lalu lintas untuk sebagian besar klien e-commerce saya, jadi kinerja mobile mempengaruhi sebagian besar keputusan optimisasi saya. WebP seharusnya menjadi pemenang yang jelas di sini—file yang lebih kecil berarti pemuatan lebih cepat pada koneksi seluler. Dan umumnya, itu benar. Pada koneksi 4G, gambar WebP memuat 18-24% lebih cepat rata-rata dalam uji lapangan saya ...