Web geliştiricileri olarak sürekli resimlerle oynarız. Çoğu durumda tarayıcılar, görselleri site tasarımlarımızın sınırlarına uyacak şekilde ölçeklendirirken görsellere güzel bir uyum sağlama konusunda mükemmeldir. Peki tarayıcının sayfanızdaki resimleri nasıl ölçeklendirdiğ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şturduğu konusunda size biraz daha fazla kontrol sağlayan yeni bir CSS özelliği image-rendering: pixelated (Spec) kullanıma sundu.
CSS özelliği image-rendering ve pixelated değeri ilginçtir çünkü tarayıcının standart düzgün ölçeklendirmesini (normalde çift doğrusal interpolasyon) kapatır ve resimleri yeniden boyutlandırırken bunu başka bir ölçeklendirme algoritmasıyla (çoğu durumda en yakın komşu) değiştirirler.
2×2 piksel boyutunda bir resminizin olduğunu ve bu resmi 100×100 piksele kadar ölçeklendirdiğinizi düşünün. Tarayıcı, resmi bloklu bir şekilde göstermeyecek bir şekilde oluşturur. Örneğin:
Bu yumuşatma davranışını istemeyeceğiniz ve bunun yerine resmin daha doğru bir temsilini koruyan bir yöntem kullanabileceğiniz birçok durum vardır.
Bu efekti almak 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, mülkün uygulaması, resmin oluşturulma şekli ü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 muhtemelen bunu istemezsiniz.
Oyunlar, tuvalin ekran boyutuna doğru şekilde sığması için sık sık ölçeğini büyütmeniz gerektiğini gösterir. Bu CSS özelliğinden önce, tarayıcı tuvali bulanık görünecek şekilde arabirim yapıyordu (aşağıya [sic] bakın).
Uçak bileti işlemleri için bir araç ya da QR kodlarını gösteren bir uygulama oluşturuyorsanız kullanıcılar, kolayca taranabilmesi için ekranın tam ekran olmasını isteyebilir. Bu nedenle, resim oluşturmanın kontrol edilmesi kritik önem taşır.
Uygulamayla ilgileniyorsanız Sorun 317991'e göz atın (crisp-edges değerinin uygulanması için açık bırakılır). Uygulamayı takip etmek için soruna yıldız ekleyin).