반응형 이미지는 브라우저가 기기에 가장 적합한 이미지를 고르게 해줍니다. 휴대폰에서 대역폭을 절약하고 고밀도(high-DPI) 화면에는 선명한 이미지를 제공합니다.
<img
src="small.jpg"
srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="A landscape"
/>
srcset**은 후보 이미지를 그 고유 너비와 함께 나열합니다(400w = 400px 너비).sizes**는 다양한 브레이크포인트에서 이미지가 표시될 너비를 브라우저에 알려줍니다(여기서는 600px 미만에서 전체 뷰포트 너비, 그렇지 않으면 절반).sizes와 기기의 픽셀 밀도를 결합하여 무엇이든 다운로드하기 전에 여전히 선명해 보이는 가장 작은 이미지를 선택합니다.휴대폰은 small.jpg를 고를 수 있고, 50% 너비로 표시하는 Retina 노트북은 large.jpg를 고를 수 있습니다.
<picture>
<source srcset="hero.avif" type="image/avif" /> <!-- 최신 포맷 -->
<source srcset="hero.webp" type="image/webp" />
<source media="(max-width: 600px)" srcset="hero-cropped.jpg" /> <!-- 모바일에서 다른 크롭 -->
<img src="hero.jpg" alt="Hero" /> <!-- 필수 대체 이미지 -->
</picture>
브라우저는 지원/일치하는 첫 번째 <source>를 사용합니다. 다른 포맷이 필요하거나(JPEG 대체와 함께 AVIF/WebP 제공) 화면 크기별로 다른 크롭(아트 디렉션)이 필요할 때 <picture>를 사용하십시오. 이는 srcset만으로는 할 수 없는 것들입니다.
srcset + sizes.<picture>.적절한 크기의 최신 포맷 이미지를 제공하는 것은 웹에서 가장 큰 성능 향상 중 하나입니다. 모바일 데이터 사용량을 극적으로 줄이고 Largest Contentful Paint를 개선합니다.
이 네이티브 도구들은 브라우저가 자동으로 최적의 선택을 하게 하며, 구형 브라우저를 위한 우아한 대체 수단을 제공합니다.