srcset, sizes, picture는 어떻게 반응형 이미지를 제공하나요?

• **srcset**은 후보 이미지를 그 고유 너비와 함께 나열합니다(400w = 400px 너비).
• **sizes**는 다양한 브레이크포인트에서 이미지가 표시될 너비를 브라우저에 알려줍니다(여기서는 600px 미만에서 전체 뷰포트 너비, 그렇지 않으면 절반).
• 브라우저는 sizes와 기기의 픽셀 밀도를 결합하여 무엇이든 다운로드하기 전에 여전히 선명해 보이는 가장 작은 이미지를 선택합니다.

휴대폰은 small.jpg를 고를 수 있고, 50% 너비로 표시하는 Retina 노트북은 large.jpg를 고를 수 있습니다.

picture — 아트 디렉션 / 다른 포맷

브라우저는 지원/일치하는 첫 번째 <source>를 사용합니다. 다른 포맷이 필요하거나(JPEG 대체와 함께 AVIF/WebP 제공) 화면 크기별로 다른 크롭(아트 디렉션)이 필요할 때 <picture>를 사용하십시오. 이는 srcset만으로는 할 수 없는 것들입니다.

srcset vs picture — 어느 것?

• 같은 이미지, 크기만 다름 → srcset + sizes.
• 다른 포맷 또는 다른 크롭 → <picture>.

왜 중요한가

적절한 크기의 최신 포맷 이미지를 제공하는 것은 웹에서 가장 큰 성능 향상 중 하나입니다. 모바일 데이터 사용량을 극적으로 줄이고 Largest Contentful Paint를 개선합니다.

이 네이티브 도구들은 브라우저가 자동으로 최적의 선택을 하게 하며, 구형 브라우저를 위한 우아한 대체 수단을 제공합니다.