Sebagai developer web, kita selalu menggunakan gambar dan pada umumnya browser sangat baik dalam menskalakan gambar agar sesuai dengan batas desain situs kita sekaligus menjaga gambar tetap bagus. Namun, apa yang terjadi jika Anda ingin mengontrol cara browser menskalakan gambar di halaman?
Chrome 41 (Beta pada Januari 2015) memperkenalkan properti CSS baru image-rendering: pixelated (Spesifikasi) yang memberi Anda sedikit lebih banyak kontrol atas cara browser merender gambar yang diskalakan.
Properti CSS image-rendering dan nilai pixelated menarik karena menonaktifkan
penskalaan halus standar browser (biasanya interpolasi bilinear) dan menggantinya dengan algoritma
penskalaan lain (tetangga terdekat dalam sebagian besar kasus) saat mengubah ukuran gambar.
Bayangkan Anda memiliki gambar berukuran 2×2 piksel dan Anda menskalakannya menjadi 100×100 piksel, browser akan merendernya dengan cara yang tidak membuatnya terlihat kotak-kotak. Seperti:
Ada banyak kasus di mana Anda tidak menginginkan perilaku penghalusan ini dan sebagai gantinya, gunakan metode yang mempertahankan representasi gambar yang lebih akurat.
Untuk mendapatkan efek ini, cukup terapkan image-rendering: pixelated; ke gambar Anda sebagai berikut.
<img
style="image-rendering: pixelated;"
width="100" height="100"
src="data:image/png;base64,iVBORw0KGgoAAAA....Ik2kAAAAASUVORK5CYII=">
Coba Demo. Seperti yang dapat Anda lihat, penerapan properti memiliki efek signifikan pada cara gambar dirender.
Properti ini dapat diterapkan di banyak tempat:
<img>elemen<canvas style="image-rendering: pixelated">elemen- Setiap elemen dengan properti
background-image
Saya masih belum paham. Di mana saya harus menggunakan ini?
Jika Anda hanya menampilkan foto di situs, Anda mungkin tidak menginginkan hal ini.
Kasus penggunaan yang bagus adalah game, Anda sering kali harus menskalakan kanvas agar sesuai dengan ukuran layar dengan benar. Sebelum properti CSS ini, browser akan melakukan interpolasi kanvas sedemikian rupa sehingga terlihat buram (lihat di bawah [sic]).
Jika Anda membuat alat penjualan tiket maskapai penerbangan, atau aplikasi yang menampilkan kode QR, pengguna sering kali menginginkannya dalam layar penuh agar lebih mudah dipindai, sehingga mengontrol rendering gambar sangatlah penting.
Jika Anda tertarik untuk melihat penerapannya, lihat Masalah 317991 (masalah ini dibiarkan terbuka untuk penerapan nilai tepi yang tajam. Beri bintang pada masalah untuk melacak penerapannya).