type()이 있는 CSS image-set()에 대한 참고 사항

html<picture> 요소는 처음부터 대체 이미지 파일 유형을 사용할 수 있는 기능이 있었습니다. type()의 image-set() 함수는 CSS 이미지 선언( background-image , border-image , mask-image 등)에 이 기능을 추가합니다.

with fallback 구문

background-image:  url("images/test.jpeg");
background-image:
  image-set(
    "images/test.avif" type("image/avif"),
    "images/test.webp" type("image/webp"),
    "images/test.jpeg" type("image/jpeg")
  );

image-set() 및 type()를 지원하는 브라우저에서 위의 예제 코드를 가정하면 브라우저는 먼저 AVIF 지원을 확인합니다. 지원되지 않는 경우 브라우저는 이 옵션을 건너뛰고 WEBP 지원 등을 확인하도록 이동합니다. 브라우저가 지원되는 파일 유형을 찾으면 해당 파일을 사용하는 프로세스가 시작됩니다. 브라우저는 지원되지 않는 MIME 유형이 있는 이미지를 다운로드하지 않습니다.
image-set()와 type()가 지원되지 않으면 전체 image-set() 선언이 무시되고 브라우저는 다음으로 대체됩니다.

background-image: url("images/test.jpeg");

url() 함수image-set()(지원되는 경우)와 마찬가지로 폴백되지 않습니다. image-set()와 type()는 url()보다 더 유연한 막다른 골목이라고 생각할 수 있습니다.

type() 및 해상도 결합

background-image: 
  image-set( 
    "foo.jpg",
    "foo-2x.avif" 2x type("image/avif"),
    "foo-2x.jpg" 2x
  );

고해상도 장치의 경우 더 나은 압축으로 파일 형식을 활용할 수 있습니다. 위의 예에서 2x 장치는 브라우저가 지원하는 경우 AVIF를 제공하고 지원하지 않는 경우 JPG로 대체합니다.

@supports

@supports not (background: image-set("foo.png" type("image/png")) ){
    .notwebp .contain{
        background-image: url('test.jpg');
    }
    .webp.notavif .contain{
        background-image: url('test.webp');
    }
    .avif .contain{
        background-image: url('test.avif')
    }
}

@supports (background: image-set("foo.png" type("image/png")) ){
    .contain{
        background-image: image-set(
            "test.avif" type("image/avif"),
            "test.webp" type("image/webp"),
            "test.jpg" type("image/jpg")
        );
    }
}

스크립트와 같은 모더나이저를 이미 사용하여 위의 클래스html를 통해 @supports 태그에 MIME 유형 지원 정보를 추가하고 있다면 image-set() 및 type() 지원을 확인하는 데 사용할 수 있으므로 가능한 경우 교체.

브라우저 지원

Firefox 89에서만 지원합니다(작성 ​​시점 - 2021년 5월). 이것을 Chrome에서 구현하려면 이 버그에 별표를 표시하십시오. https://bugs.chromium.org/p/chromium/issues/detail?id=630597&can=2&q=css%20image-set

연결

W3C 사양: https://drafts.csswg.org/css-images-4/#image-set-notation
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/image-set()#using_image-set_to_provide_alternative_formats
크롬: https://bugs.chromium.org/p/chromium/issues/detail?id=630597&can=2&q=css%20image-set
Firefox의 개발자 도구 지원: https://bugzilla.mozilla.org/show_bug.cgi?id=1687033