최적화된 장식용 이미지 제공

웹 기능: image-set()

CSS를 통해 최적화된 장식 이미지를 전송하면 시각적 품질을 저하시키지 않으면서 인지된 성능을 개선할 수 있습니다. image-set() CSS 함수를 사용하면 브라우저에 단일 배경 또는 마스크 이미지에 대한 여러 옵션을 제공할 수 있습니다. 최신 형식 (예: AVIF 또는 WebP)을 다양한 해상도 (예: 1x 및 2x)와 함께 지정할 수 있습니다. 브라우저는 사용자 기기에 적합한 픽셀 밀도를 제공하는 가장 작은 호환 이미지를 동적으로 선택합니다.

주의: 이미지가 최대 콘텐츠 페인트 (LCP) 요소 (예: 대형 히어로 배너)일 가능성이 있는 경우 image-set()을 통해 CSS에서 참조되는 이미지는 브라우저의 미리 로드 스캐너에서 검색할 수 없습니다. 이로 인해 이미지 로드가 크게 지연되고 LCP가 저하될 수 있습니다. LCP 후보의 경우 표준 HTML <img> 또는 <picture> 태그를 대신 사용하거나 media 속성과 함께 <link rel=preload> 옵션을 사용하여 이미지를 미리 로드하는 것이 좋습니다.

구현

image-set() 함수는 CSS가 <image> 값을 예상하는 모든 위치에서 사용되며, 가장 일반적으로 background-image, content 또는 mask-image에서 사용됩니다. type()를 통해 이미지 형식과 해상도 (예: 1x 또는 2x)를 모두 제공하면 최상의 결과를 얻을 수 있지만, 두 인수 모두 선택사항입니다. 

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

대체 전략

image-set() 함수를 지원하지 않는 이전 브라우저의 경우 image-set() 규칙 앞에 표준 이미지 선언을 제공해야 합니다(MUST). 이 점진적 개선 전략은 CSS의 계단식 특성을 기반으로 합니다. 지원되지 않는 규칙은 무시됩니다.

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