Bir veya daha fazla arka plan resmi için farklı boyutlar veya çözünürlükler belirleyerek, mediaquery
kullanarak sayfa yükleme hızını ve performansını artırmaya yardımcı olur.
image-set()
fonksiyonu, her bir resim dosyası, bir çözünürlük faktörüne sahip birim değeriyle ayrılmış bir url()
ile tanımlanır.
background-image: image-set(
url("image.png") 1x,
url("image@2x.png") 2x,
url("image@3x.png") 3x
);
Burada, 1x
, 2x
ve 3x
çözünürlük durumları belirtilmiştir. Tarayıcı, hangi çözünürlük durumuna uygun olduğunu belirleyerek, en uygun boyuttaki resmi seçer.
Ayrıca, image-set()
fonksiyonu, mediaquery
ile birlikte kullanılarak, belirli bir çözünürlük veya ekran boyutuna göre farklı resim setleri göstermek mümkün olur.
background-image: image-set(url("small.jpg") 1x, url("medium.jpg") 2x);
@media screen and (min-width: 768px) {
background-image: image-set(url("large.jpg") 1x, url("xlarge.jpg") 2x);
}
Burada, küçük ekranlarda daha düşük bir çözünürlükte small.jpg
ve medium.jpg
resimleri kullanılırken, büyük ekranlarda daha yüksek bir çözünürlükte large.jpg
ve xlarge.jpg
resimleri kullanılır.
Bu fonksiyon, resim dosyalarının boyutları ve çözünürlükleri için esneklik sağlar ve web sayfalarında daha hızlı yükleme süreleri elde etkili olur. Ayrıca, farklı çözünürlüklerde farklı resimlerin kullanılması, sayfa yüklenme hızını da artırabilir.
image-set()
fonksiyonu aynı zamanda, yalnızca arka plan resimleri değil, aynı zamanda img etiketinde kullanılan resimler için de kullanılabilir.
img {
content: image-set(url("image.png") 1x, url("image@2x.png") 2x);
}
Ancak, image-set()
fonksiyonunun tüm tarayıcılar tarafından desteklenmediği unutulmamalıdır. Özellikle, Internet Explorer gibi eski tarayıcılar bu özelliği desteklemezler. Bu nedenle, tarayıcı uyumluluğunu kontrol etmek önemlidir ve gerektiğinde alternatif teknikler kullanılabilir.