image-set()

Baseline 2023
Newly available

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

image-set() CSS 함수형 표기법은 브라우저가 높은 해상도를 위해 주어진 이미지 집합 안에서 가장 적합한 CSS를 선택하도록 할 수 있는 방법입니다.

해상도와 대역폭은 기기와 네트워크 접근에 따라 달라집니다. image-set() 함수는 가장 적합한 해상도의 이미지를 사용자의 기기로 전달하여 기기와 설정에 따른 적합한 이미지를 선택할 수 있도록 하는데, 이는 해상도와 이미지 옵션의 집합을 제공하고 각 이미지에는 해상도 정의도 연관되어 있습니다. 해상도는 파일 크기에 따라 프록시로도 사용될 수 있습니다. 느린 모바일 연결이지만 높은 해상도의 화면을 가진 사용자 에이전트는 고해상도 이미지의 로드를 기다리는 것보다 저해상도 이미지를 선호할 수도 있습니다.

image-set() 은 각각의 사용자가 필요로 하는 것을 결정하기 보다는 선택할 수 있는 옵션을 제공합니다.

구문

css
/* 해상도를 기반으로 이미지 선택하기 */
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> |
<gradient>

<url> =
<url()> |
<src()>

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

접근성

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

예제

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

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

참고 : 위 예제에서처럼, -webkit 접미사는 크롬과 사파리에서도 사용할 수 있습니다. 파이어폭스 90에서는 (개발자가 표준 속성을 추가하지 않은 경우 호환성을 제공하기 위해) -webkit-image-set()image-set() 의 별칭으로 사용됩니다.

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

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

폴백 제공하기

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

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

명세서

Specification
CSS Images Module Level 4
# image-set-notation

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
image-set()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Requires a vendor prefix or different name for use.
Has more compatibility info.

같이 보기