image-set() (CSS)

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, 1x2x 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.