srcset, sizes, picture로 화면과 이미지 형식에 맞는 파일을 선택합니다.
srcset의 폭 설명자와 sizes는 브라우저가 현재 레이아웃에 필요한 이미지 후보를 고르는 데 사용합니다. picture의 source는 화면 조건에 따라 다른 구도나 형식을 제공하고, 마지막 img는 기본 후보와 alt를 담당합니다.
화면 폭이 480px 이하이면 source의 media 조건이 맞아 노란 세로 구도의 Portrait 그림이 쓰이고, 그보다 넓으면 img의 src인 Wide 그림이 쓰입니다. source는 후보 주소만 제공할 뿐 화면에 그려지는 것은 언제나 img 요소 하나라서, alt와 CSS의 width: 100%도 고른 그림과 상관없이 그 img에 적용됩니다.
Portrait 그림은 4:3인데 img의 width=900과 height=360은 5:2 비율을 알려 주므로, 좁은 화면에서는 그림이 도착하기 전에 잡아 둔 자리와 실제 높이가 달라집니다. source에도 width와 height를 적을 수 있어 구도마다 비율이 다를 때 자리를 정확히 잡을 수 있고, type=image/avif 같은 source를 두면 브라우저가 지원하는 형식만 골라 받습니다.
CSS width만 줄이면 표시 크기만 작아지고 큰 원본을 그대로 내려받을 수 있습니다. srcset과 sizes는 전송할 파일 선택 문제를 해결합니다.
직접 바꿔보세요source의 media 기준을 바꾸고 width/height가 레이아웃 이동을 줄이는 이유를 설명하세요.