Menggunakan deskriptor kepadatan

Katie Hempenius

Pelajari Demo Ini

• Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar Penuh .
• Muat ulang halaman menggunakan perangkat yang berbeda untuk melihat browser memuat gambar yang berbeda.

Anda dapat menggunakan emulator perangkat untuk melakukannya. Jika Anda mencari kepadatan tampilan tertentu, berikut ini beberapa perangkat yang bisa dicoba:

• Checkout index.html untuk kode yang membuat ini berfungsi.

Bagaimana cara kerjanya?

Konsep deskriptor kepadatan mungkin asing bagi sebagian besar orang. Untuk lebih memahaminya, ada baiknya mengetahui sedikit latar belakang tentang cara kerja browser dengan piksel.

Apa yang dimaksud dengan piksel

Mari kita mulai dari awal dengan menentukan apa itu piksel. Kedengarannya sederhana, tetapi "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 petak. Jenis piksel ini tidak memiliki ukuran fisik yang melekat.

Piksel CSS

Spesifikasi CSS menentukan piksel sebagai satuan 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 biasanya diukur menggunakan piksel per inci (ppi).

Selama bertahun-tahun, 96 ppi adalah kepadatan tampilan yang sangat umum (oleh karena itu CSS menentukan piksel sebagai 1/96 inci). Mulai tahun 1980-an, ini adalah resolusi {i>default<i} dari Windows. Selain itu, ini adalah resolusi monitor CRT.

Hal ini mulai berubah ketika monitor LED menjadi umum pada tahun 2000-an. Secara khusus, Apple membuat percikan besar pada tahun 2010 ketika memperkenalkan layar Retina. Layar ini memiliki resolusi minimum 192 ppi, yang merupakan dua kali lipat resolusi layar "biasa" (192 ppi/96 ppi = 2).

window.devicePixelRatio

Dengan diperkenalkannya teknologi tampilan 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 penyebab munculnya 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?

Ukuran gambar berdasarkan rasio piksel-perangkat

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

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. Memperbesar gambar yang lebih kecil saja tidak akan memenuhi tujuan penyajian beberapa versi gambar. Browser akan tetap melakukan hal ini jika gambar beresolusi tinggi tidak disediakan.

Menggunakan Deskripsi Kepadatan untuk menampilkan beberapa gambar

Deskripsi kepadatan, bersama dengan atribut "srcset ", dapat digunakan untuk menyajikan gambar yang berbeda ke devicePixelRatios 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 dimasukkan ke dalam kata-kata:

• 1x, 2x, dan 3x adalah deskripsi kepadatan yang memberi tahu browser kepadatan piksel yang ditujukan untuk gambar. Dengan demikian, browser tidak perlu mendownload gambar untuk menentukan informasi ini.
• Browser dapat memilih 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 image penggantian untuk browser yang tidak mendukung srcset.

Cara menggunakannya:

• Gunakan devicePixelRatio dan unit x untuk menulis deskripsi kepadatan. Misalnya, deskripsi kepadatan untuk banyak layar Retina (window.devicePixelRatio = 2) akan ditulis sebagai 2x.
• Jika deskripsi kepadatan tidak diberikan, deskripsi tersebut diasumsikan sebagai 1x.
• Menyertakan deskriptor kepadatan dalam nama file adalah konvensi umum (dan akan membantu Anda melacak file), tetapi tidak diperlukan. Gambar dapat memiliki nama file.
• Tidak perlu menyertakan atribut sizes. Atribut sizes hanya digunakan dengan deskripsi lebar.