Menggunakan deskriptor kepadatan

Katie Hempenius
Katie Hempenius
X

Jelajahi demo ini

  • Untuk melihat pratinjau situs, tekan View App. Lalu tekan Fullscreen layar penuh.
  • Muat ulang halaman menggunakan perangkat yang berbeda untuk melihat browser memuat gambar yang berbeda.

Anda dapat menggunakan emulator perangkat untuk hal ini. Jika Anda mencari kepadatan layar 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 mengetahui kode yang membuat fitur ini berfungsi.

Bagaimana cara kerjanya?

Konsep deskriptor kepadatan mungkin tidak dikenal oleh sebagian besar orang. Agar lebih memahaminya, sebaiknya Anda memiliki sedikit latar belakang tentang cara browser bekerja dengan piksel.

Apa itu piksel

Mari kita mulai dari awal dengan mendefinisikan apa itu 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 yang melekat.
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 tampilan yang sangat umum (oleh karena itu, CSS mendefinisikan 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 dengan makin populernya monitor LED 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 merupakan dua kali 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 alasan diperkenalkannya 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 berada di antara 1,0 dan 4,0.

Jadi, bagaimana cara menerapkan informasi ini?

Menyesuaikan ukuran gambar berdasarkan rasio piksel perangkat

Agar gambar terlihat optimal di layar beresolusi tinggi, Anda harus menyediakan versi gambar yang berbeda untuk devicePixelRatios yang berbeda.

Rasio Piksel Perangkat Menunjukkan bahwa: Di perangkat ini, tag <img> dengan lebar CSS 250 piksel akan terlihat paling baik jika gambar sumbernya...
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 ukuran 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 menggagalkan tujuan penayangan beberapa versi gambar. Browser akan tetap melakukannya jika gambar resolusi tinggi tidak disediakan.

Menggunakan deskriptor kepadatan untuk menayangkan beberapa gambar

Deskriptor 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 diuraikan dalam kata-kata:

  • 1x, 2x, dan 3x adalah deskriptor kepadatan yang memberi tahu browser kepadatan piksel yang ditujukan untuk gambar. Hal ini menghemat waktu browser karena tidak perlu mendownload gambar untuk menentukan informasi ini.
  • Browser dapat memilih di antara tiga gambar: flower-1x.jpg (ditujukan untuk browser dengan kepadatan piksel 1.0), flower-2x.jpg (ditujukan untuk browser dengan kepadatan piksel 2.0), dan flower-3x.jpg (ditujukan untuk browser dengan kepadatan piksel 3.0).
  • flower.jpg adalah gambar pengganti untuk browser yang tidak mendukung srcset.

Cara menggunakan:

  • Gunakan devicePixelRatio dan unit x untuk menulis deskripsi kepadatan. Misalnya, deskripsi kepadatan untuk banyak layar Retina (window.devicePixelRatio = 2) akan ditulis sebagai 2x.
  • Jika deskriptor kepadatan tidak diberikan, deskriptor tersebut akan dianggap 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. Atribut sizes hanya digunakan dengan deskripsi lebar.