Pelajari Demo Ini
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar penuh .
- Muat ulang halaman menggunakan perangkat lain untuk melihat pemuatan browser yang berbeda gambar.
Anda dapat menggunakan emulator perangkat untuk melakukannya. Jika Anda mencari tampilan tertentu kepadatan, berikut beberapa perangkat yang dapat dicoba:
1x kepadatan | Blackberry Playbook, banyak monitor eksternal |
2x kepadatan | iPad atau IPhone 5/6 |
3x kepadatan | Galaxy S5 atau iPhone X |
- Lihat
index.html
untuk mendapatkan kode yang membuatnya berfungsi.
Bagaimana cara kerjanya?
Konsep deskriptor kepadatan mungkin tidak dikenal oleh sebagian besar orang. Untuk meningkatkan memahaminya, akan sangat membantu jika Anda memiliki sedikit latar belakang tentang cara kerja {i>browser<i} dengan piksel.
Apa itu piksel
Mari kita mulai dari awal dengan mendefinisikan apa itu {i>pixel<i}. Ini terdengar sederhana, tapi "piksel" sebenarnya bisa 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 grid. 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. Ini adalah biasanya diukur menggunakan {i>pixel<i} per inci (ppi).
Selama bertahun-tahun, 96 ppi adalah kepadatan tampilan yang sangat umum (oleh karena itu CSS menentukan piksel sebesar 1/96 inci). Sejak 1980-an, resolusi ini merupakan resolusi {i>default<i} Windows. Selain itu, merupakan resolusi CRT monitor.
Ini mulai berubah karena monitor LED menjadi umum pada tahun 2000-an. Secara khusus, kita akan membuat Apple membuat terobosan besar pada tahun 2010 ketika memperkenalkan layar Retina. Ini layar memiliki resolusi minimum 192 ppi, yang merupakan dua kali resolusi "reguler" menampilkan (192 ppi/96 ppi = 2).
window.devicePixelRatio
Dengan diperkenalkannya teknologi tampilan yang lebih baru, "piksel perangkat" mulai bervariasi
dalam ukuran dan bentuk fisik
dan tidak lagi berukuran sama dengan "piksel CSS". Kebutuhan untuk mendefinisikan
hubungan antara ukuran "piksel perangkat" dan "piksel CSS" inilah yang menyebabkan
pengenalan devicePixelRatio
(terkadang disebut "Piksel CSS
Rasio").
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 yang umum digunakan. Sebagian besar antara 1,0 dan 4,0.
Jadi, bagaimana cara Anda menerapkan informasi ini?
Mengubah ukuran gambar berdasarkan rasio piksel perangkat
Agar gambar terlihat sebaik mungkin di layar resolusi tinggi,
yang diperlukan untuk menyediakan versi image yang berbeda bagi devicePixelRatios
yang berbeda.
Rasio Piksel Perangkat | Menunjukkan bahwa: | Di perangkat ini, <img> dengan lebar CSS 250 piksel, akan terlihat paling baik bila 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 dalam editor gambar, direktori file, dan tempat lain adalah pengukuran {i>pixel<i} logis.
- Untuk layar beresolusi lebih tinggi dan tampilan yang lebih besar, Anda membutuhkan gambar dengan dimensi yang lebih besar. Memperbesar gambar yang lebih kecil akan menggagalkan tujuan yang menayangkan beberapa versi image. Browser akan tetap melakukan ini jika gambar beresolusi tinggi tidak disediakan.
Menggunakan Deskripsi Kepadatan untuk menayangkan beberapa gambar
Deskripsi kepadatan, bersama dengan "srcset " , dapat digunakan untuk menyajikan gambar yang berbeda ke devicePixelRatios yang berbeda.
- Lihat file
index.html
dan catat elemen<img>
.
<img src="flower.jpg"
srcset="flower-1x.jpg 1x,
flower-2x.jpg 2x,
flower-3x.jpg 3x">
Contoh ini dinyatakan dalam kata-kata:
1x
,2x
, dan3x
merupakan deskripsi kepadatan yang memberi tahu browser kepadatan {i>pixel<i} yang menjadi tujuan suatu gambar. Langkah ini akan menyimpan browser yang digunakan agar tidak perlu mengunduh gambar untuk menentukan informasi ini.- Browser dapat memilih di antara tiga gambar:
flower-1x.jpg
(dimaksudkan untuk browser dengan kepadatan piksel1.0
),flower-2x.jpg
(ditujukan untuk browser dengan kepadatan piksel2.0
), danflower-3x.jpg
(ditujukan 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. Sebagai contoh, deskriptor kepadatan untuk banyak layar Retina (window.devicePixelRatio = 2
) akan ditulis sebagai2x
. - Jika deskripsi kepadatan tidak diberikan, deskripsi tersebut diasumsikan sebagai
1x
. - Menyertakan deskriptor kepadatan dalam nama {i>file<i} adalah konvensi umum (dan akan membantu Anda melacak file), tetapi tidak diperlukan. Gambar dapat memiliki .
- Tidak perlu menyertakan atribut
sizes
. Atributsizes
hanya digunakan bersama deskriptor lebar.