Elemen Pseudo yang Dioptimalkan Resolusi

Fitur web: image-set()

Menggunakan gambar yang dioptimalkan resolusinya dalam elemen semu CSS (seperti ::before atau ::after) memungkinkan Anda menambahkan ikon dekoratif atau grafik struktural tanpa mengacaukan HTML dengan node DOM tambahan. Dengan menggabungkan elemen semu dengan fungsi CSS image-set(), Anda dapat memberikan beberapa format (seperti AVIF atau WebP) dan resolusi (seperti 1x dan 2x) kepada browser. Browser akan otomatis memilih gambar yang paling optimal untuk kemampuan perangkat pengguna.

Penerapan

Anda dapat menggunakan fungsi image-set() langsung dalam properti content elemen pseudo, atau dalam properti background-image (saat menetapkan content: ""). Perhatikan bahwa meskipun memberikan format gambar melalui type() dan resolusi (seperti 1x atau 2x) akan memberikan hasil terbaik, kedua argumen ini bersifat opsional.

.icon-button::before {
  /* Using image-set directly in the content property */
  /* MANDATORY: Always order your formats from most optimized (AVIF) to least optimized (JPEG/PNG). 
     The browser will stop at the first supported format. */
  content: image-set(
    url("icon.avif") type("image/avif") 1x,
    url("icon-2x.avif") type("image/avif") 2x,
    url("icon.webp") type("image/webp") 1x,
    url("icon-2x.webp") type("image/webp") 2x,
    url("icon.png") type("image/png") 1x,
    url("icon-2x.png") type("image/png") 2x
  );
  
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

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.

.icon-button::before {
  /* MANDATORY: Fallback for browsers that do not support image-set() */
  content: url("icon.png");
  
  /* Modern browsers will apply this and override the fallback */
  content: image-set(
    url("icon.avif") type("image/avif") 1x,
    url("icon-2x.avif") type("image/avif") 2x,
    url("icon.png") type("image/png") 1x,
    url("icon-2x.png") type("image/png") 2x
  );
}