Sebagai developer web, kita bermain dengan gambar setiap saat dan dalam kebanyakan kasus, browser sangat baik dalam menskalakan gambar agar sesuai dengan batasan desain situs kita sekaligus menjaga gambar tetap menarik. Namun, apa yang terjadi jika Anda ingin mengontrol cara browser menskalakan gambar di halaman Anda?
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 ditingkatkan skalanya.
Properti CSS image-rendering dan nilai pixelated menarik karena menonaktifkan penskalaan halus standar browser (biasanya interpolasi bi-linear) dan menggantinya dengan algoritme penskalaan lain (biasanya tetangga terdekat) saat mengubah ukuran gambar.
Bayangkan Anda memiliki gambar berukuran 2×2 piksel dan diskalakan menjadi 100×100 piksel, browser akan merendernya sedemikian rupa sehingga tidak terlihat kotak-kotak. Sesuatu seperti:
Ada banyak kasus saat Anda tidak menginginkan perilaku penghalusan ini. Sebagai gantinya, gunakan metode yang mempertahankan representasi gambar yang lebih akurat.
Untuk mendapatkan efek ini, cukup terapkan image-rendering: pixelated; ke gambar Anda seperti 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 pengaruh yang signifikan terhadap cara gambar dirender.
Properti ini dapat diterapkan di banyak tempat:
<img>elemen<canvas style="image-rendering: pixelated">elemen- Semua elemen dengan properti
background-image
Saya masih belum paham. Di mana saya harus menggunakan ini?
Jika hanya menampilkan foto di situs, Anda mungkin tidak menginginkannya.
Kasus penggunaan yang bagus adalah {i>game<i}. Anda sering kali harus meningkatkan skala kanvas agar sesuai dengan ukuran layar. Sebelum properti CSS ini, browser akan menginterpolasi kanvas sedemikian rupa sehingga terlihat buram (lihat di bawah [sic]).
Jika Anda sedang membuat alat penjualan tiket pesawat, atau aplikasi yang menampilkan kode QR, pengguna sering kali menginginkan tampilan dalam layar penuh agar lebih mudah dipindai, jadi mengontrol rendering gambar sangatlah penting.
Jika Anda tertarik untuk melihat implementasi tersebut, lihat Masalah 317991 (dibiarkan terbuka untuk penerapan nilai tepi yang jelas. Bintangi masalah untuk melacak penerapan).