Optimize edilmiş dekoratif resimleri CSS aracılığıyla yayınlamak, görsel kaliteden ödün vermeden algılanan performansı artırır. image-set() CSS işlevini kullanarak tarayıcıya tek bir arka plan veya maske resmi için birden fazla seçenek sunabilirsiniz. Farklı çözünürlüklerin (ör. 1x ve 2x) yanı sıra modern biçimleri (ör. AVIF veya WebP) belirtebilirsiniz. Tarayıcı, kullanıcının cihazı için uygun piksel yoğunluğunu sağlayan en küçük uyumlu resmi dinamik olarak seçer.
DİKKAT: Resim, Largest Contentful Paint (LCP) öğesi (ör.büyük bir hero banner) olabilir. CSS'de image-set() aracılığıyla referans verilen resimlerin tarayıcının önceden yükleme tarayıcısı tarafından bulunamayacağını unutmayın. Bu durum, resim yüklemeyi önemli ölçüde geciktirebilir ve LCP'ye zarar verebilir. LCP adayları için standart bir HTML <img> veya <picture> etiketi kullanmayı ya da alternatif olarak media özelliğine sahip <link rel=preload> seçeneğini kullanarak resmi önceden yüklemeyi deneyin.
Uygulama
image-set() işlevi, CSS'nin <image> değeri beklediği her yerde (en yaygın olarak background-image, content veya mask-image içinde) kullanılır. Hem type() aracılığıyla resim biçimini hem de çözünürlüğü (1x veya 2x gibi) sağlamak en iyi sonuçları verse de bu bağımsız değişkenlerin her ikisi de isteğe bağlıdır.
.gallery-item {
/* Provide multiple resolutions and formats using image-set() */
/* MANDATORY: Always order your formats from most optimized (AVIF) to least optimized (JPEG/PNG).
The browser will stop at the first supported format. */
background-image: image-set(
url("gallery.avif") type("image/avif") 1x,
url("gallery-2x.avif") type("image/avif") 2x,
url("gallery.webp") type("image/webp") 1x,
url("gallery-2x.webp") type("image/webp") 2x,
url("gallery.jpg") type("image/jpeg") 1x,
url("gallery-2x.jpg") type("image/jpeg") 2x
);
/* Standard decorative properties */
background-size: cover;
background-position: center;
}
Yedek stratejiler
image-set() işlevini desteklemeyen eski tarayıcılar için image-set() kuralından önce standart bir resim bildirimi sağlamanız GEREKİR. Bu progresif geliştirme stratejisi, CSS'nin basamaklı yapısını temel alır: Desteklenmeyen kurallar yok sayılır.
.gallery-item {
/* MANDATORY: Fallback for browsers that do not support image-set() */
background-image: url("gallery.jpg");
/* Modern browsers will apply this and override the fallback */
background-image: image-set(
url("gallery.avif") type("image/avif") 1x,
url("gallery-2x.avif") type("image/avif") 2x,
url("gallery.jpg") type("image/jpeg") 1x,
url("gallery-2x.jpg") type("image/jpeg") 2x
);
}