Pengaturan kualitas apa yang harus Anda gunakan untuk gambar web?

Setiap alat kompresi gambar punya slider kualitas, biasanya dari 0 sampai 100. Kebanyakan orang menggesernya ke angka bulat — 80, 85, mungkin 90 — lalu lanjut. Padahal slider ini secara harfiah adalah keputusan paling berdampak yang bisa Anda buat untuk ukuran file gambar, dan nilai default-nya hampir selalu terlalu tinggi untuk keperluan web.

Mari kita bahas apa yang sebenarnya dikontrol slider ini, seperti apa tampilan visual di berbagai nilai, dan apa yang sebaiknya Anda atur tergantung jenis gambar dan konteks penggunaannya.

Apa yang sebenarnya dikontrol slider kualitas

Dalam format lossy seperti JPG, WebP, dan AVIF, pengaturan kualitas mengontrol seberapa agresif encoder membuang informasi. Secara khusus, ia mengontrol kekuatan kuantisasi - seberapa kasar komponen frekuensi setiap blok gambar dibulatkan.

Pada kualitas 100, tidak ada yang dikuantisasi: tidak ada informasi yang dibuang (meskipun gambar masih ditransformasi secara lossy, jadi ini tidak sepenuhnya sama dengan lossless). Pada kualitas 1, hampir semuanya dibuang: Anda mendapatkan output kotak-kotak, buram, dan berubah warna.

Di antara ekstrem tersebut, setiap titik pada slider menukar ukuran file dengan kualitas yang terlihat. Trade-off tersebut tidak linier:

• Beralih dari kualitas 100 → 90 menghemat ~50% ukuran file dengan hampir tidak ada perubahan yang terlihat
• Beralih dari kualitas 90 → 80 menghemat ~20% lagi dengan degradasi kecil
• Beralih dari kualitas 80 → 70 menghemat ~15% lagi dengan perubahan lebih terlihat
• Di bawah kualitas 60, artefak menjadi sulit diabaikan
• Di bawah kualitas 40, gambar jelas rusak

Implikasinya: kualitas 75 memberi Anda 70% dari penghematan ukuran file kualitas 50 dengan sebagian kecil kerusakan yang terlihat. Kualitas 90 membuang byte tanpa manfaat yang terlihat.

Seperti apa tampilan tingkat kualitas yang berbeda

Aturan praktis kasar untuk foto JPG pada 1500×1000 px:

Kualitas	Ukuran file	Tampilan visual
100	~800 KB	Identik dengan sumber (secara efektif lossless)
95	500 KB	Tidak dapat dibedakan dari sumber pada zoom apa pun
85	260 KB	Tidak dapat dibedakan pada jarak melihat normal
75	170 KB	Pelembutan kecil pada tekstur halus; tidak terlihat di sebagian besar foto
65	120 KB	Pelembutan sedikit terlihat saat diperiksa dari dekat
55	90 KB	Pelembutan terlihat; dapat diterima untuk thumbnail
40	60 KB	Artefak jelas; hanya untuk latar belakang yang sangat buram
20	35 KB	Blocking dan perubahan warna yang jelas

Angka pasti Anda akan bervariasi - foto dengan banyak detail halus (dedaunan, kain, tekstur) menunjukkan artefak lebih cepat daripada gambar halus (potret terhadap latar belakang polos).

Sesuaikan kualitas dengan jenis gambar

Gambar yang berbeda di situs Anda layak mendapat pengaturan yang berbeda.

Foto hero dan produk adalah gambar yang benar-benar dilihat pengguna — memenuhi layar, menarik perhatian, membawa bobot estetika brand. Anda ingin tajam tapi tidak boros. Rekomendasi: kualitas 80-85. Pada rentang ini, bahkan pemirsa yang detail-oriented di layar retina tidak akan melihat artefak, dan Anda menghemat 40-60% dibanding kualitas 95.

Thumbnail galeri ditampilkan di lebar 200-400 px. Pengguna melirik dan klik kalau tertarik. Detail halus sebagian besar tidak terlihat di ukuran sekecil itu. Rekomendasi: kualitas 65-75. Jangan buang byte untuk membuat thumbnail lebih tajam dari yang bisa diresolusi layar.

Foto latar belakang hero dengan overlay — gambar yang berada di belakang teks atau gradien. Sebagian besar tertutupi secara visual. Detail halus hampir tidak pernah diperhatikan. Rekomendasi: kualitas 55-70. Overlay menyembunyikan artefak kecil, dan ukuran file lebih penting dari kualitas di sini karena ini sering gambar berukuran besar.

Logo dan elemen grafis seharusnya tidak pernah dalam format JPG — harus PNG atau SVG. Kalau terpaksa JPG, minimal kualitas 90+ untuk menghindari ringing di sekitar tepi tajam. Lebih baik: konversi ke PNG.

Tangkapan layar dan gambar UI yang mengandung teks atau tepi tajam akan rusak di JPG berapapun kualitasnya. Simpan sebagai PNG (lossless), atau WebP lossless kalau audiens mendukungnya.

Gambar yang akan diedit dan disimpan ulang — setiap simpan memperparah kerusakan JPG. Kalau gambar akan melalui beberapa siklus edit di tim, simpan master sebagai PNG dan ekspor ke JPG hanya di langkah paling akhir.

Kualitas perseptual vs numerik

Berikut poin halus: nomor kualitas pada slider tidak dipetakan ke skala perseptual. JPG kualitas 80 dan WebP kualitas 80 dan AVIF kualitas 80 terlihat sangat berbeda satu sama lain, karena setiap encoder menafsirkan nomor secara berbeda.

Terjemahan kasar:

• JPG kualitas 80 ≈ WebP kualitas 75 ≈ AVIF kualitas 65

Saat beralih format, uji ulang slider - jangan hanya mempertahankan angka yang sama.

Uji “bandingkan dua versi”

Cara yang andal untuk memilih pengaturan kualitas adalah melakukan perbandingan A/B langsung pada konten Anda yang sebenarnya.

1. Ambil gambar representatif (atau beberapa)
2. Ekspor salinan pada kualitas 90, 80, 70, 60, 50
3. Buka secara full-screen berdampingan dengan aslinya
4. Temukan kualitas terendah di mana Anda tidak bisa membedakannya dengan andal
5. Naikkan 5 untuk keamanan
6. Itu pengaturan Anda

Untuk sebagian besar foto pada sebagian besar tampilan, proses ini berakhir pada kualitas 70-80.

Kualitas subjektif vs objektif

“Tapi bagaimana dengan metrik PSNR / SSIM / VMAF?” Jika Anda memproses katalog besar dan ingin quality gating otomatis, metrik objektif berguna. Secara kasar:

• PSNR >= 40 dB - tidak dapat dibedakan secara visual untuk sebagian besar konten
• SSIM >= 0.95 - kualitas sangat baik
• VMAF >= 90 - kualitas hampir transparan (kelas Netflix)

Ini dapat membantu Anda mengatur kualitas per-gambar secara otomatis: encode pada pengaturan yang semakin rendah sampai Anda mencapai ambang batas, lalu berhenti. Alat yang melakukan ini kadang-kadang disebut encoder “content-aware” atau “per-image”.

Untuk situs web biasa, Anda tidak memerlukan tingkat kecanggihan ini. Kualitas 75 menyeluruh akan melayani Anda dengan baik.

Cara menggunakan slider di alat kami

Image Compressor kami punya slider kualitas dari 0 hingga 100 dan langsung menampilkan ukuran file yang dihasilkan saat Anda menggesernya. Alur kerjanya:

1. Drop gambar Anda
2. Mulai dari kualitas 75
3. Lihat preview — apakah kualitasnya cukup?
4. Geser ke bawah sampai Anda mulai melihat artefak, lalu naik 5 poin
5. Unduh

Tidak ada server round-trip, jadi iterasinya cepat. Coba kualitas 70 — untuk sebagian besar foto, Anda benar-benar tidak bisa membedakannya, tapi pengguna Anda mendapat file yang 40% lebih kecil.

Ringkasan cepat

Jenis gambar	Kualitas yang direkomendasikan
Foto hero (terlihat jelas oleh pengguna)	80-85
Foto konten biasa	75
Thumbnail galeri	65-75
Gambar latar belakang dengan overlay	55-70
Latar belakang buram / dekoratif	40-55
Gambar yang akan diedit ulang	Simpan sebagai PNG sampai ekspor akhir
Logo, ikon, diagram, tangkapan layar	Jangan pakai JPG — gunakan PNG

Kalau hanya ingin mengingat satu angka, ingat 75. Itu default yang tepat untuk sebagian besar foto web, menghemat sekitar setengah ukuran file dibanding default tipikal 85-90.