The image-renderingmendefinisikan properti bagaimana browser harus membuat sebuah gambar jika skala naik atau turun dari dimensi aslinya. Secara default, setiap browser akan mencoba menerapkan aliasing ke gambar berskala ini untuk mencegah distorsi, tetapi ini terkadang menjadi masalah jika kita ingin gambar mempertahankan bentuk piksel aslinya.
img ( image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; )Tentang tiga kemungkinan nilai tersebut:
auto: nilai default yang menggunakan algoritme standar browser untuk memaksimalkan tampilan gambar.crisp-edges: kontras, warna, dan tepi gambar akan dipertahankan tanpa perataan atau pemburaman apa pun. Menurut spesifikasi, ini secara khusus ditujukan untuk seni piksel. Nilai ini berlaku untuk gambar yang diperbesar atau diperkecil.pixelated: saat ukuran gambar berubah, browser akan mempertahankan gaya pikselnya dengan menggunakan penskalaan tetangga terdekat. Nilai ini hanya berlaku untuk gambar yang diskalakan.
Properti ini dapat diterapkan ke gambar latar belakang, canvaselemen serta gambar sebaris. Namun, penting untuk diperhatikan bahwa menguji nilai-nilai ini pada saat ini sangat membingungkan karena kurangnya dukungan browser yang konsisten.
Contoh
Berikut adalah gambar sebaris yang sangat kecil yang terdiri dari empat piksel berwarna:
Jika kami mengubah lebar gambar sebaris ini menjadi 300pxdi Chrome (41) kami akan menemukan browser telah berusaha mengoptimalkan gambar sebaik mungkin:
Untuk mempertahankan tampilan pixelated aslinya kita dapat menggunakan nilai berikut pixelated, seperti:
img ( image-rendering: pixelated; )Ini menghasilkan browser memilih algoritma alternatif untuk memproses gambar. Dalam contoh ini, Chrome akan menghapus aliasing default:
Sayangnya setelah banyak pengujian, tampaknya browser menafsirkan crisp-edgesdan pixelatednilai dengan cara yang sangat membingungkan saat ini sehingga penting untuk dicatat sekali lagi bahwa spesifikasi ini masih dalam tahap awal. Misalnya Chrome tampak merender pixelatedgambar dengan cara yang sama seperti Firefox dan Safari akan merender gambar crisp-edges.
Contoh kode QR
Kasus penggunaan lain dari properti ini mungkin untuk kode QR di mana Anda ingin meningkatkan ukurannya tanpa mengubahnya dengan menggunakan anti-aliasing standar. Pastikan untuk memeriksa contoh ini dalam mode layar penuh untuk melihat peregangan gambar:
Lihat demo Pen Image-rendering oleh Robin Rendle (@robinrendle) di CodePen.
Alihkan contoh
Di Pena di bawah ini, Anda dapat beralih di antara nilai-nilai ini dan melihat perbedaan antara browser:
Lihat demo rendering Gambar Pena oleh Robin Rendle (@robinrendle) di CodePen.
Dukungan browser
crisp-edgessaat ini membutuhkan prefiks vendor ( -moz-crisp-edges) untuk mendapatkan dukungan terbaik.
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| 41 | 3,6 * | 11 * | 79 | 10 |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 * | 81 | 10.0-10.2 |
Pada saat pembaruan ini, Firefox 61 mendukung crisp-edgestetapi tidak mendukung pixelateddan Chrome 68 mendukung pixelatedtetapi tidak crisp-edges.