작품 사진 한 장을 여러 크기로 준비하면 웹 브라우저가 표시 조건에 맞는 파일을 고를 수 있다. [[이미지 비율을 유지하며 크기 줄이기]]로 파일을 준비한 뒤, HTML의 `srcset`과 `sizes`로 후보와 표시할 폭을 알려준다.
- `480w`는 파일의 실제 가로 픽셀 수다. 파일 이름이 480이라고 실제 크기도 480인 것은 아니므로 내보낸 결과를 확인한다.
- `sizes`는 이미지가 놓일 폭을 설명한다. CSS의 크기를 바꾸는 속성이 아니므로 실제 배치와 맞춰 적는다.
- 웹 브라우저는 화면의 픽셀 밀도 등도 고려한다. 작은 창이 언제나 가장 작은 파일을 선택하는 것은 아니다.
## 작은 예제
아래 코드를 UTF-8 형식의 `example-01.html`로 저장해 웹 브라우저에서 연다. 같은 구도의 3:2 이미지 세 장을 가로 480·960·1920픽셀로 준비해 예제와 같은 폴더에 둔다. 파일명과 대체 텍스트는 자신의 이미지에 맞게 바꾼다.
```html
작품 이미지의 여러 크기
작품 이미지의 여러 크기
```
예제의 본문은 최대 `60rem`, 양옆 여백은 각각 `1rem`이다. 개발자 도구의 네트워크 패널이나 이미지 요소의 `currentSrc`에서 실제 선택한 파일을 확인한다. 이미 받은 큰 파일은 창을 줄여도 그대로 쓸 수 있으므로 캐시 조건도 함께 본다. [[반응형 디자인]]에서 이미지의 구도까지 달라져야 한다면 [[화면에 따라 달라지는 이미지의 구도]]로 이어진다. 여러 판본의 이름과 크기를 관리하는 문제는 [[이미지 판본표]]에 남는다.
## 참고
- [Interneting Is Hard: 반응형 이미지](https://internetingishard.netlify.app/html-and-css/responsive-images/)
- [MDN: 반응형 이미지](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
#HTML #이미지 #웹제작