작품 사진 한 장을 여러 크기로 준비하면 웹 브라우저가 표시 조건에 맞는 파일을 고를 수 있다. 이미지 비율을 유지하며 크기 줄이기로 파일을 준비한 뒤, HTML의 srcset과 sizes로 후보와 표시할 폭을 알려준다.
480w는 파일의 실제 가로 픽셀 수다. 파일 이름이 480이라고 실제 크기도 480인 것은 아니므로 내보낸 결과를 확인한다.sizes는 이미지가 놓일 폭을 설명한다. CSS의 크기를 바꾸는 속성이 아니므로 실제 배치와 맞춰 적는다.- 웹 브라우저는 화면의 픽셀 밀도 등도 고려한다. 작은 창이 언제나 가장 작은 파일을 선택하는 것은 아니다.
작은 예제
아래 코드를 UTF-8 형식의 example-01.html로 저장해 웹 브라우저에서 연다. 같은 구도의 3:2 이미지 세 장을 가로 480·960·1920픽셀로 준비해 예제와 같은 폴더에 둔다. 파일명과 대체 텍스트는 자신의 이미지에 맞게 바꾼다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>작품 이미지의 여러 크기</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; padding: 1rem; font-family: sans-serif;
line-height: 1.6; color: #222; background: #fff; }
main { max-inline-size: 60rem; margin-inline: auto; }
h1 { font-size: 1.7rem; line-height: 1.3; }
a { color: #174fa0; }
:focus-visible { outline: 3px solid #174fa0; outline-offset: 3px; }
img { display: block; inline-size: 100%; block-size: auto; }
</style>
</head>
<body>
<main>
<h1>작품 이미지의 여러 크기</h1>
<img src="work-960.png"
srcset="work-480.png 480w, work-960.png 960w, work-1920.png 1920w"
sizes="(min-width: 62rem) 60rem, calc(100vw - 2rem)"
width="960" height="640"
alt="흰 벽 앞에 빨간 의자 하나가 놓인 작품 사진">
</main>
</body>
</html>예제의 본문은 최대 60rem, 양옆 여백은 각각 1rem이다. 개발자 도구의 네트워크 패널이나 이미지 요소의 currentSrc에서 실제 선택한 파일을 확인한다. 이미 받은 큰 파일은 창을 줄여도 그대로 쓸 수 있으므로 캐시 조건도 함께 본다. 반응형 디자인에서 이미지의 구도까지 달라져야 한다면 화면에 따라 달라지는 이미지의 구도로 이어진다. 여러 판본의 이름과 크기를 관리하는 문제는 이미지 판본표에 남는다.