Menayangkan Gambar Dekoratif yang Dioptimalkan

Fitur web: image-set()

Menayangkan gambar dekoratif yang dioptimalkan melalui CSS akan meningkatkan performa yang dirasakan tanpa mengorbankan kualitas visual. Dengan menggunakan fungsi CSS image-set(), Anda dapat memberikan beberapa opsi kepada browser untuk satu gambar latar belakang atau mask. Anda dapat menentukan format modern (seperti AVIF atau WebP) bersama dengan berbagai resolusi (seperti 1x dan 2x). Browser akan secara dinamis memilih gambar kompatibel terkecil yang memberikan kepadatan piksel yang sesuai untuk perangkat pengguna.

PERHATIAN: Jika gambar kemungkinan merupakan elemen Largest Contentful Paint (LCP) (misalnya, banner besar), perlu diketahui bahwa gambar yang direferensikan dalam CSS melalui image-set() tidak dapat ditemukan oleh pemindai pramuat browser. Hal ini dapat memperlambat pemuatan gambar secara signifikan dan merusak LCP. Untuk kandidat LCP, sebaiknya gunakan tag <img> atau <picture> HTML standar atau sebagai alternatif, lakukan juga pramuat gambar menggunakan opsi <link rel=preload> dengan atribut media.

Penerapan

Fungsi image-set() digunakan di mana pun CSS mengharapkan nilai <image>, paling umum di background-image, content, atau mask-image. Perhatikan bahwa meskipun memberikan format gambar melalui type() dan resolusi (seperti 1x atau 2x) akan memberikan hasil terbaik, kedua argumen ini bersifat opsional. 

.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;
}

Strategi penggantian

Untuk browser lama yang tidak mendukung fungsi image-set(), Anda HARUS memberikan deklarasi gambar standar sebelum aturan image-set(). Strategi progressive enhancement ini mengandalkan sifat cascading CSS: aturan yang tidak didukung akan diabaikan.

.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
  );
}