Web geliştiricileri olarak her zaman resimlerle uğraşırız. Çoğu durumda tarayıcılar, resimleri site tasarımlarımızın sınırlarına sığdıracak şekilde ölçeklendirirken aynı zamanda resimlerin güzelliğini koruma konusunda mükemmeldir. Ancak tarayıcının sayfanızdaki resimleri nasıl ölçeklendireceğini kontrol etmek istediğinizde ne olur?
Chrome 41 (Ocak 2015'te Beta sürümünde), tarayıcının ölçeklendirilmiş bir resmi nasıl oluşturacağı üzerinde biraz daha fazla kontrol sahibi olmanızı sağlayan yeni bir CSS özelliği image-rendering: pixelated
(Spec) kullanıma sunar.
image-rendering
CSS mülkü ve pixelated
değeri, tarayıcının standart yumuşak ölçeklendirmesini (normalde iki boyutlu doğrusal ara değer) devre dışı bıraktığı ve resimleri yeniden boyutlandırırken bunu başka bir ölçeklendirme algoritmasıyla (çoğu durumda en yakın komşu) değiştirdiği için ilginçtir.
2x2 piksel boyutunda bir resmin 100x100 piksele ölçeklendirildiğini varsayalım. Tarayıcı, resmi bloklu görünmeyecek şekilde oluşturur. Örneğin:

Bu pürüzsüzleştirme davranışını istemediğiniz ve bunun yerine resmin daha doğru bir temsilini koruyan bir yöntem kullanmak istediğiniz birçok durum vardır.
Bu efekti elde etmek için resminize aşağıdaki gibi image-rendering: pixelated;
uygulamanız yeterlidir.
<img
style="image-rendering: pixelated;"
width="100" height="100"
src="data:image/png;base64,iVBORw0KGgoAAAA....Ik2kAAAAASUVORK5CYII=">

Demoyu deneyin. Gördüğünüz gibi, özelliğin uygulanması resmin nasıl oluşturulduğu üzerinde önemli bir etkiye sahiptir.
Bu özellik birçok yerde uygulanabilir:
<img>
öğe<canvas style="image-rendering: pixelated">
öğebackground-image
özelliği olan tüm öğeler
Yine anlayamadım. Bunu nerede kullanmalıyım?
Sitenizde yalnızca fotoğraflar gösteriyorsanız bu seçeneği kullanmamanız önerilir.
Oyunlar, bu özelliğin mükemmel bir kullanım alanıdır. Ekran boyutuna doğru şekilde sığması için kanvası sık sık ölçeklendirmeniz gerekir. Bu CSS özelliğinden önce tarayıcı, kanvası bulanık görünecek şekilde enterpolasyon yapardı (aşağıya bakın [sic]).
Bir havayolu bileti aracı veya QR kodları gösteren bir uygulama geliştiriyorsanız kullanıcılar genellikle taramanın daha kolay olması için bu öğenin tam ekran olmasını ister. Bu nedenle, resim oluşturmayı kontrol etmek çok önemlidir.
Uygulamayı görmek istiyorsanız 317991 numaralı soruna göz atın (sivri kenar değeri uygulanana kadar açık bırakılmıştır). Uygulamayı takip etmek için sorunu işaretleyin).