image-set()

구문

/* 해상도를 기반으로 이미지 선택하기 */
image-set(
  "image1.jpg" 1x,
  "image2.jpg" 2x
);

image-set(
  url("image1.jpg") 1x,
  url("image2.jpg") 2x
);

/* 해상도를 기반으로 그라디언트 선택하기 */
image-set(
  linear-gradient(blue, white) 1x,
  linear-gradient(blue, green) 2x
);

/* 지원하는 확장자를 기반으로 이미지 선택하기 */
image-set(
  url("image1.avif") type("image/avif"),
  url("image2.jpg") type("image/jpeg")
);

값

<image>

<image> 태그는 이미지 집합을 제외하고서는 어떠한 이미지 타입도 될 수 있습니다. image-set() 함수는 다른 image-set() 함수 내에 중첩될 수 없습니다.

<string>

이미지의 URL입니다.

<resolution> Optional

<resolution> 태그는 픽셀 당 도트 단위인 x 혹은 dppx 를 포함하여 인치 당 도트 단위인 dpi, 센티미터 당 도트 단위인 dpcm 등 단위를 나타냅니다. image-set() 내의 모든 이미지는 고유한 해상도를 가져야 합니다.

type(<string>) Optional

"image/jpeg" 와 같은 유효한 MIME 타입의 문자열입니다.

형식 구문

<image-set()> = 
  image-set( <image-set-option># )  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>  

접근성

브라우저는 배경 이미지에 대한 특수한 정보를 보조 기술로 제공하지 않습니다. 이는 주로 화면 리더기를 위한 기능인데, 스크린 리더는 배경 이미지의 존재를 알리지 않기 때문에 사용자는 아무런 정보를 전달 받을 수 없습니다. 만일 이미지에 페이지의 전반적인 목적을 이해하는 데에 중요한 정보가 포함되어 있다면 이를 문서 안에서 의미론적으로 설명하는 것이 좋습니다.

• MDN WCAG 이해하기, 가이드라인 1.1 설명
• Success Criterion 1.1.1 이해하기 | W3C Understanding WCAG 2.0

예제

background-image 옵션으로 대안으로 image-set()를 사용하기

이 예제는 image-set() 가 두 개의 background-image 옵션의 대안, 즉 일반적인 버전과 고해상도 버전의 해상도를 어떻게 제공하는지에 대해 설명합니다.

이미지 확장자의 대안으로 image-set()를 사용하기

다음 예제에서는 type() 함수가 AVIF 와 JPEG 확장자를 전달하기 위해 사용될 수도 있음을 설명합니다. 만일 브라우저가 avif를 지원한다면 이는 해당 버전을 선택하게 되고, 그렇지 않다면 jpeg 버전을 사용하게 됩니다.

폴백 제공하기

image-set() 을 위한 내장 폴백은 존재하지 않습니다. 이 기능을 지원하지 않는 브라우저를 위해 background-image 를 포합하려면 image-set() 를 사용하는 줄 앞에 별도의 정의가 필요합니다.

.box {
  background-image: url("large-balloons.jpg");
  background-image: image-set(
    "large-balloons.avif" type("image/avif"),
    "large-balloons.jpg" type("image/jpeg")
  );
}

명세서

브라우저 호환성

같이 보기

• <image>
• image()
• element()
• url()
• <gradient>
• cross-fade()