Menjelajahi Demo Ini
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh .
- Muat ulang halaman menggunakan perangkat lain untuk melihat browser memuat gambar yang berbeda.
Anda dapat menggunakan emulator perangkat untuk ini. Jika Anda mencari kepadatan tampilan tertentu, berikut beberapa perangkat yang dapat dicoba:
Kepadatan 1x | Blackberry Playbook, banyak monitor eksternal |
Kepadatan 2x | iPad atau iPhone 5/6 |
Kepadatan 3x | Galaxy S5 atau iPhone X |
- Lihat
index.html
untuk kode yang membuat ini berfungsi.
Bagaimana cara kerjanya?
Konsep deskripsi kepadatan mungkin tidak dikenal oleh sebagian besar orang. Untuk lebih memahaminya, sebaiknya Anda memiliki sedikit latar belakang tentang cara kerja browser dengan piksel.
Apa yang dimaksud dengan piksel
Mari kita mulai dari awal dengan menentukan definisi piksel. Hal ini terdengar sederhana, tetapi "piksel" sebenarnya dapat memiliki banyak arti:
- Piksel perangkat (alias "piksel fisik")
- Titik warna terkecil yang dapat ditampilkan di perangkat.
- Piksel logis
- Informasi yang menentukan warna di lokasi tertentu pada petak. Jenis piksel ini tidak memiliki ukuran fisik bawaan.
- Piksel CSS
- Spesifikasi CSS menentukan piksel sebagai unit pengukuran fisik. 1 piksel = 1/96 inci.
Kepadatan Piksel
Kepadatan piksel (juga disebut sebagai "kepadatan layar" atau "kepadatan tampilan") mengukur kepadatan piksel perangkat di area fisik tertentu. Hal ini biasanya diukur menggunakan piksel per inci (ppi).
Selama bertahun-tahun, 96 ppi adalah kepadatan layar yang sangat umum (sehingga CSS menentukan piksel sebagai 1/96 inci). Mulai tahun 1980-an, resolusi ini menjadi resolusi default Windows. Selain itu, resolusi ini adalah resolusi monitor CRT.
Hal ini mulai berubah seiring monitor LED menjadi umum pada tahun 2000-an. Secara khusus, Apple membuat gebrakan besar pada tahun 2010 saat memperkenalkan layar Retina. Layar ini memiliki resolusi minimum 192 ppi, yang dua kali lipat dari resolusi layar "biasa" (192 ppi/96 ppi = 2).
window.devicePixelRatio
Dengan diperkenalkannya teknologi layar yang lebih baru, "piksel perangkat" mulai bervariasi
dalam ukuran fisik dan bentuk
dan tidak lagi berukuran sama dengan "piksel CSS". Kebutuhan untuk menentukan
hubungan antara ukuran "piksel perangkat" dan "piksel CSS" adalah hal yang menyebabkan
pengenalan devicePixelRatio
(terkadang disebut "Rasio Piksel
CSS").
devicePixelRatio
menentukan hubungan antara piksel perangkat dan piksel CSS
untuk perangkat tertentu. Perangkat 192 ppi memiliki devicePixelRatio
2 (192
ppi/96 ppi = 2) karena "2 piksel tampilannya berukuran 1 piksel CSS".
Saat ini, sebagian besar perangkat memiliki rasio piksel perangkat antara 1,0 dan 4,0.
Tentukan kepadatan piksel perangkat dengan mengetik
window.devicePixelRatio
di konsol.Lihat tabel ini untuk melihat rasio piksel perangkat umum. Sebagian besar antara 1,0 dan 4,0.
Jadi, bagaimana cara menerapkan informasi ini?
Mengatur ukuran gambar berdasarkan rasio piksel perangkat
Agar gambar terlihat seoptimal mungkin di layar beresolusi tinggi, Anda
harus menyediakan versi gambar yang berbeda untuk devicePixelRatios
yang berbeda.
Rasio Piksel Perangkat | Menunjukkan bahwa: | Pada perangkat ini, tag <img> dengan lebar CSS 250 piksel akan terlihat paling baik jika gambar sumbernya adalah... |
---|---|---|
1 | 1 piksel perangkat = 1 piksel CSS | Lebar 250 piksel |
2 | 2 piksel perangkat = 1 piksel CSS | Lebar 500 piksel |
3 | 3 piksel perangkat = 1 piksel CSS | Lebar 750 piksel |
Hal-hal yang perlu diperhatikan:
- Dimensi piksel yang tercantum di editor gambar, direktori file, dan tempat lainnya adalah pengukuran piksel logis.
- Untuk layar beresolusi lebih tinggi dan layar yang lebih besar, Anda memerlukan gambar dengan dimensi yang lebih besar. Hanya memperbesar gambar yang lebih kecil akan mengacaukan tujuan menayangkan beberapa versi gambar. Browser akan melakukannya jika gambar beresolusi tinggi tidak disediakan.
Menggunakan Deskripsi Kepadatan untuk menayangkan beberapa gambar
Deskripsi kepadatan, bersama dengan atribut "srcset ", dapat digunakan untuk menayangkan gambar yang berbeda ke devicePixelRatio yang berbeda.
- Lihat file
index.html
dan perhatikan elemen<img>
.
<img src="flower.jpg"
srcset="flower-1x.jpg 1x,
flower-2x.jpg 2x,
flower-3x.jpg 3x">
Contoh ini dituangkan dalam kata-kata:
1x
,2x
, dan3x
adalah deskripsi kepadatan yang memberi tahu browser kepadatan piksel yang dimaksudkan untuk gambar. Hal ini membuat browser tidak perlu mendownload gambar untuk menentukan informasi ini.- Browser dapat memilih antara tiga gambar:
flower-1x.jpg
(dimaksudkan untuk browser dengan kepadatan piksel1.0
),flower-2x.jpg
(dimaksudkan untuk browser dengan kepadatan piksel2.0
), danflower-3x.jpg
(dimaksudkan untuk browser dengan kepadatan piksel3.0
). flower.jpg
adalah gambar penggantian untuk browser yang tidak mendukungsrcset
.
Cara menggunakannya:
- Gunakan devicePixelRatio dan unit
x
untuk menulis deskripsi kepadatan. Misalnya, deskripsi kepadatan untuk banyak layar Retina (window.devicePixelRatio = 2
) akan ditulis sebagai2x
. - Jika deskripsi kepadatan tidak diberikan, deskripsi tersebut diasumsikan sebagai
1x
. - Menyertakan deskripsi kepadatan dalam nama file adalah konvensi umum (dan akan membantu Anda melacak file), tetapi tidak diperlukan. Gambar dapat memiliki nama file apa pun.
- Anda tidak perlu menyertakan atribut
sizes
. Atributsizes
hanya digunakan dengan deskripsi lebar.