Digital Transformation
DPR (Device Pixel Ratio)
TL;DR: Device Pixel Ratio (DPR) adalah rasio physical pixel terhadap CSS pixel pada layar perangkat. Smartphone modern umumnya DPR 2 atau 3, sehingga gambar 400 CSS pixel butuh source 800 atau 1200 physical pixel agar tajam. Mengabaikan DPR membuat hero image blur di layar retina atau membengkak di low-DPI.
Apa itu Device Pixel Ratio?
DPR adalah angka pengali antara physical pixel hardware layar dengan CSS pixel yang Anda tulis di stylesheet. iPhone 15 punya DPR 3 (1 CSS pixel = 9 physical pixel), Galaxy S24 punya DPR ~3.75, desktop standar punya DPR 1, MacBook Retina punya DPR 2.
Implikasinya untuk web: gambar yang Anda render ukuran 400px di CSS, kalau di-source hanya 400 pixel, akan terlihat blur di layar DPR 2 atau 3. Anda butuh source 800 atau 1200 pixel agar tampil tajam. Sebaliknya, kirim gambar 2400 pixel ke desktop DPR 1 buang bandwidth dan memperlambat LCP.
Cara Mengelola DPR
| Pendekatan | Sintaks | Kapan dipakai |
|---|---|---|
srcset density descriptor | image.png 1x, image@2x.png 2x | Gambar fixed-size (logo, icon) |
srcset width descriptor | img-400.png 400w, img-800.png 800w | Gambar responsive yang scale |
| Next.js Image component | <Image src=... /> otomatis | Default di Next.js, hemat developer time |
| Vercel Image Optimization | ?w=800&q=75 | Resize on-the-fly via CDN |
Next.js next/image otomatis generate srcset multi-density berdasarkan deviceSizes config. Kombinasinya dengan Vercel Image Optimization menghasilkan asset tepat per device tanpa code manual.
Kenapa Penting?
Berdasarkan audit Core Web Vitals beberapa landing page klien e-commerce, mengabaikan DPR membuat dua masalah klasik. Pertama, gambar pecah di iPhone (DPR 3) menurunkan persepsi kualitas brand. Kedua, kirim gambar 3x ke semua device boroskan bandwidth dan memperlambat LCP 0,8 sampai 1,5 detik di koneksi 4G Indonesia.
Selisih ini langsung berpengaruh ke konversi. Studi Google menunjukkan setiap 100 ms tambahan LCP menurunkan conversion rate sekitar 1-2 persen. Untuk e-commerce dengan AOV 250 ribu dan 30 ribu sesi per bulan, pemborosan LCP karena DPR salah bisa menggerus revenue 6-15 juta per bulan.
Pertanyaan Umum
Bagaimana cara cek DPR layar saya?
Buka DevTools Console, jalankan window.devicePixelRatio. Hasilnya angka float (misal 2 atau 2.625). Atau pakai situs tester seperti webkay untuk lihat DPR semua device populer.
Apakah DPR mempengaruhi font?
Tidak signifikan. Font modern pakai vector rendering, jadi tajam di semua DPR. Yang penting set viewport meta tag dengan benar agar zoom scale konsisten.
Istilah Terkait