srcset·sizes 속성 계산기
이미지 후보 목록과 뷰포트별 표시폭을 입력하면 반응형 이미지의 srcset·sizes 속성 코드를 만들어 줍니다.
srcset 후보
w
w
w
sizes 규칙
코드
<img src="/photo-400.jpg" srcset="/photo-400.jpg 400w, /photo-800.jpg 800w, /photo-1200.jpg 1200w" sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw" alt="..." />
브라우저는 sizes로 필요한 표시폭을 먼저 정한 뒤, 그 표시폭×기기 화면밀도(DPR) 이상인 srcset 후보 중 가장 작은 파일을 고릅니다. sizes 조건은 좁은 뷰포트부터 순서대로 적고, 마지막에 조건 없는 기본값을 둡니다.
사용 방법
- 1같은 이미지의 서로 다른 크기 파일들(URL과 실제 폭)을 추가합니다.
- 2뷰포트 조건별로 이미지가 화면에서 차지할 표시폭(sizes)을 정합니다.
- 3완성된 srcset·sizes 속성을 img 태그에 그대로 붙여 씁니다.
자주 묻는 질문
srcset은 "이 이미지의 실제 폭이 몇 px인 후보 파일들이 있는지"를, sizes는 "이 이미지가 화면에서 실제로 차지할 폭이 뷰포트 조건별로 얼마나 되는지"를 알려줍니다. 브라우저는 sizes로 필요한 표시폭을 먼저 정한 뒤, 그 표시폭×기기 화면밀도(DPR) 이상인 srcset 후보 중 가장 작은 파일을 고릅니다. sizes가 없으면 브라우저가 실제 표시 크기를 몰라 불필요하게 큰 파일을 받을 수 있습니다.
srcset의 각 후보 뒤에 붙는 "400w"처럼, 그 이미지 파일의 실제 가로 폭이 몇 픽셀인지 나타내는 값입니다. 배율 디스크립터(1x, 2x)와는 다른 표기법으로, 너비를 알 때는 w가 더 정밀하게 대응할 수 있어 더 널리 씁니다.
브라우저는 위에서부터 조건을 확인해 처음 맞는 것을 쓰므로, 좁은 뷰포트 조건을 먼저, 마지막에 조건 없는 기본값을 적어야 합니다. 이 계산기는 규칙을 조건이 있는 것부터 나열하고 기본값을 맨 뒤에 자동으로 붙여 순서를 맞춰 줍니다.
전송되지 않습니다. 모든 계산은 브라우저 안에서 이뤄지고, 입력값은 이 기기에만 남습니다.
알아두면 좋은 점
- 너비 디스크립터(w)·sizes 문법과 브라우저의 파일 선택 규칙(표시폭×DPR 이상인 후보 중 가장 작은 파일)은 bitsofco.de·cloudfour.com의 반응형 이미지 가이드를 WebSearch로 교차 확인했습니다(2026-09-05).
- 이 도구는 값을 그대로 문자열로 조립하는 결정적 생성기입니다. 실제 이미지 파일을 여러 크기로 만드는 작업은 별도로 해야 합니다.
함께 보면 좋은 도구
CSS 그리드행·열과 간격을 고르면 CSS 그리드 코드를 만들어 주고 결과를 미리 보여줍니다.이미지 맞춤object-fit의 contain·cover·fill에서 이미지가 어떤 크기로 그려지고 얼마나 잘리는지 계산합니다.gitignore 판정.gitignore 규칙과 경로를 넣으면 그 파일이 무시되는지, 어느 줄이 마지막으로 이겼는지 알려줍니다.울프람 규칙규칙 번호 0~255를 8비트로 풀어 세 칸 이웃에 대응시키고 세대를 쌓아 무늬를 그립니다.2-SAT「둘 중 하나는 참」인 조건을 여럿 넣으면 참·거짓 배정이 가능한지 판정하고 배정을 하나 찾아 줍니다.
마지막 검증: 2026년 9월 5일 · 결과는 참고용 추정치입니다.