분류 css

이미지 세트가 있는 CSS에서 고성능 차세대 이미지 사용

컨텐츠 정보

  • 조회 390 (작성일 )

본문

CSS image-set() 함수는 2012 년부터 Chromium 기반 브라우저에서, 버전 6부터 Safari에서 지원되었습니다. 최근 Firefox 88에 지원이 추가되었습니다. image-set으로 오늘 할 수 있는 것과 할 수 없는 것을 살펴 보겠습니다.


동일한 이미지의 여러 해상도 


다음은 image-set()에 대한 CSS 사양의 설명입니다.


사용자 기기에 가장 적합한 이미지 해상도를 제공하는 것은 어려운 작업 일 수 있습니다. 이상적으로는 이미지가 보고 있는 기기와 동일한 해상도여야 하며 이는 사용자마다 다를 수 있습니다. 그러나 전송할 이미지를 결정하는 데 다른 요소가 포함될 수 있습니다. 예를 들어 사용자가 느린 모바일 연결을 사용하는 경우 적절한 해상도의 큰 이미지가 로드 되기를 기다리는 것보다 저해상도 이미지를 수신하는 것을 선호 할 수 있습니다.


기본적으로 img 태그의 HTML srcset 속성에 해당하는 CSS 배경입니다. 이미지 세트를 사용하면 이미지의 여러 해상도를 제공 할 수 있으며 사용할 이미지에 대한 최상의 결정을 내리는 브라우저를 신뢰할 수 있습니다. 콘텐츠, 커서, 가장 유용한 배경 이미지의 세 가지 CSS 속성에 대한 값을 지정하는 데 사용할 수 있습니다.


.hero { background-image: image-set("platypus.png" 1x, "platypus-2x.png" 2x); } 


1x는 저해상도 이미지를 식별하는 데 사용되며 2x는 고해상도 이미지를 정의하는 데 사용됩니다. x는 픽셀 단위당 도트를 나타내는 dppx의 별칭입니다.


Chrome/Edge/Opera/Samsung Internet은 현재 -webkit- 접두사가 필요합니다. Autoprefixer를 사용하는 경우 자동으로 처리됩니다. Safari는 더 이상 접두사가 필요하지 않지만 이미지 경로를 지정하기 위해 url() 함수가 필요한 이전 구문을 사용합니다. 이미지 세트를 지원하지 않는 모든 브라우저를 지원하기 위해 일반 이전 배경 이미지 : url()을 포함 할 수도 있습니다.


.hero { /* Fallback */ background-image: url("platypus.png"); /* Chrome/Edge/Opera/Samsung, Safari will fallback to this as well */ background-image: -webkit-image-set(url("platypus.png") 1x, url("platypus-2x.png") 2x); /* Standard use */ background-image: image-set("platypus.png" 1x, "platypus-2x.png" 2x); } 


이제 값 비싼 멋진 장치를 사용하는 사용자는 매우 선명한 이미지를 볼 수 있습니다. 브라우저가 자동으로 저해상도 이미지를 요청하므로 연결 속도가 느리거나 저렴한 화면을 사용하는 사용자의 경우 성능이 향상됩니다. 고해상도 이미지가 느린 연결에서도 고해상도 장치에서 사용되었는지 확인하려면 이미지 세트 대신 최소 해상도 미디어 쿼리를 사용할 수 있습니다. 고밀도 화면에 선명한 이미지를 제공하는 방법에 대한 자세한 내용은 Jake Archibald가 블로그에 올린 최근 게시물을 확인하세요.


꽤 멋지지만 제가 진정으로 원하는 것은 CSS에서 최신 이미지 형식을 채택하는 동시에 이전 브라우저를 지원하는 것입니다.


새로운 이미지 형식 


Safari 14는 WebP에 대한 지원을 제공했습니다. 이를 수행하는 최종 최신 브라우저였으므로 이제 이미지 형식이 모든 곳에서 지원됩니다 (Internet Explorer 제외). WebP는 종종 JPG, PNG 또는 GIF보다 작은 (그러나 동일한 품질) 이미지를 만들 수 있다는 점에서 유용합니다.


또한 새로운 이미지 형식이 많이 표시됩니다. AVIF 이미지는 놀랍도록 작습니다. Chrome, Opera 및 Samsung Internet은 이미 AVIF에 대한 지원을 제공했습니다. 이미 Firefox에 깃발 뒤에 있습니다. 이 이미지 형식은 아직 많은 디자인 도구에서 지원되지 않지만 Google의 Chrome 팀에서 만든 Squoosh 앱을 사용하여 이미지를 AVIF로 변환 할 수 있습니다. WebP 2, HEIF 및 JPEG XL도 결국 브라우저에 포함될 수 있습니다. 이 모든 것이 다소 흥미롭지 만 이러한 새로운 형식을 지원하지 않는 브라우저에서 이미지를 얻을 수 있기를 바랍니다. 다행히 image-set ()에는 이에 대한 구문이 있습니다.


유형을 지정하여 새 이미지 형식 사용 


브라우저 지원 참고 사항 : 현재 언급하려는 이미지 세트의 기능은 상당히 끔찍한 브라우저 지원을 제공합니다. 현재 Firefox 89에서만 지원됩니다.


HTML은 수년 동안 <picture> 요소를 지원했습니다.


<picture> <source srcset="./kitten.avif" type="image/avif"> <img src="./kitten.jpg" alt="a small kitten"> </picture> 


image-set은 이미지의 MIME 유형을 지정하여 차세대 이미지 형식을 사용할 수 있도록 CSS에 상응하는 기능을 제공합니다.


.div1 { background-image: image-set( "kitten.avif" type("image/avif"), "kitten.jpg" type("image/jpeg") ); } 


차세대 이미지가 먼저 가고 오래된 브라우저의 대체 이미지가 두 번째입니다. 하나의 이미지 만 다운로드됩니다. 브라우저가 AVIF를 지원하지 않는 경우 이를 무시하고 지정한 두 번째 이미지 만 다운로드합니다. AVIF가 지원되면 대체 이미지가 무시됩니다.


위의 예에서는 AVIF 이미지를 사용하고 대체로 JPEG를 제공했지만 대체는 널리 지원되는 이미지 형식 일 수 있습니다. 다음은 PNG를 사용한 예입니다.


.div2 { background-image: image-set( "puppy.webp" type("image/webp"), "puppy.png" type("image/png") ); } 


Chromium 및 Safari에서는 유형 지정이 아직 지원되지 않습니다. 즉, 현재 널리 지원되는 이미지 형식의 다른 해상도를 지정하는 데만 image-set을 사용할 수 있지만 해당 브라우저에서 WebP 또는 AVIF를 사용할 때 이전 버전과의 호환성을 추가 할 수는 없습니다. 원하는 경우 여러 해상도와 여러 이미지 형식을 모두 제공 할 수 있습니다.


.div2 { background-image: image-set( "puppy.webp" type("image/webp") 1x, "puppy2x.webp" type("image/webp") 2x, "puppy.png" type("image/png") 1x, "puppy2x.png" type("image/png") 2x ); } 


https://codepen.io/team/css-tricks/pen/GRWbOWz 


브라우저 지원이 곧 개선되기를 바랍니다.


대신 배경에 <picture> 사용 


배경 이미지가 전혀 필요하지 않을 수도 있습니다. 최신 이미지 형식을 사용하려면 더 나은 브라우저 지원을 제공하는 <picture> 요소를 사용할 수 있습니다. 이미지를 위치 : 절대로 설정하면 그 위에 다른 요소를 쉽게 표시 할 수 있습니다.


https://codepen.io/cssgrid/pen/ExWdLYv 


position : absolute를 사용하는 다른 접근 방식으로 CSS 그리드는 HTML 요소를 겹치는 또 다른 쉬운 방법입니다.


https://codepen.io/cssgrid/pen/WNpLKOJ 


https://css-tricks.com/using-performant-next-gen-images-in-css-with-image-set/