💡 반응형 이미지 srcset으로 화면별 파일 나누기

메인 배너를 PC용 큰 파일 하나만 올리면, 스마트폰에서도 같은 용량을 받게 됩니다. 화면이 좁은데 무거운 이미지를 받으면 로딩이 길어지고 데이터도 낭비됩니다. 반응형 이미지 srcset은 가로폭이 다른 파일을 여러 장 준비해 두고, 브라우저가 지금 화면에 맞는 쪽을 고르게 하는 HTML 방식입니다. 위 도구에 기준 가로폭만 넣으면 0.5배·0.75배·1배·2배(·3배) 규격과 srcset·sizes 마크업을 만들 수 있습니다.

이 생성기는 이미지를 잘라 주지 않습니다. 포토샵·압축 툴로 나온 가로폭만큼 파일을 만든 뒤, 코드에 적힌 이름(또는 CDN 쿼리)과 같게 올려야 합니다.

📌 srcset과 sizes 역할

srcset에는 파일경로 600w처럼 “이 파일의 실제 가로 픽셀”을 적습니다. sizes는 “이 이미지가 레이아웃에서 대략 몇 CSS 픽셀을 차지하는지”를 알려 줍니다. 둘을 같이 써야 브라우저가 DPR(레티나 배율)까지 고려해 받을 파일을 고릅니다.

기본 sizes는 (max-width: 기준폭px) 100vw, 기준폭px입니다. 이미지가 본문 절반만 차지한다면 50vw처럼 프로젝트 레이아웃에 맞게 고쳐야 합니다.

⚙️ 파일 이름 · picture · lazy

• 접미사 방식(기본): hero.jpg → hero-600w.jpg처럼 폭을 붙입니다. 정적 호스팅에 맞습니다.
• CDN 쿼리: 이미지 CDN이 ?w=로 리사이즈할 때 켭니다. 이미 ?가 있으면 &w=를 붙입니다.
• picture + WebP: WebP를 쓸 때 <source type="image/webp"> 예시입니다. WebP 파일도 같은 규격으로 준비해야 합니다.
• loading="lazy": 화면 밖 이미지는 나중에 받습니다. 첫 화면 히어로는 빼는 편이 나을 수 있습니다.

📊 실무 팁

3배 규격은 파일이 매우 커질 수 있습니다. 트래픽이 부담되면 체크를 끄고 2배까지로 충분할 때가 많습니다. 미리보기 프레임의 PC·태블릿·모바일 버튼은 레이아웃 폭만 바꿔 보여 주는 참고용입니다. 브라우저가 실제로 어떤 후보를 고르는지는 기기 DPR·캐시·네트워크에 따라 달라질 수 있습니다.

워드프레스나 CDN이 이미 여러 크기를 만들어 준다면, 그 서비스의 URL 규칙을 이 도구의 접미사·쿼리 옵션에 맞추거나, 생성 코드를 그 규칙에 맞게 손보면 됩니다.