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ırırken güzelliklerini korumak için harika bir iş çıkarır. Peki, tarayıcının sayfanızdaki resimleri ölçeklendirme şeklini kontrol etmek istediğinizde ne olur?
Chrome 41 (Ocak 2015'te Beta sürümünde), tarayıcının büyütülmüş bir resmi oluşturma şekli üzerinde biraz daha fazla kontrol sahibi olmanızı sağlayan yeni bir CSS özelliğini image-rendering: pixelated (Spesifikasyon) kullanıma sundu.
image-rendering CSS özelliği ve pixelated değeri, tarayıcının standart yumuşak ölçeklendirmesini (normalde iki boyutlu doğrusal ara değer alma) 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 yumuşatma davranışını istemeyeceğiniz birçok durum vardır. Bunun yerine, resmin daha doğru temsil edilmesini sağlayan bir yöntem kullanabilirsiniz.
Bu efekti elde etmek için image-rendering: pixelated; simgesini resminize aşağıdaki gibi 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, taramanın daha kolay olması için genellikle 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).