페이지에 넣은 너비 1920픽셀 이미지는 휴대폰 사용자도 통째로 내려받은 뒤, 화면에서는 390픽셀로 줄어들어 표시됩니다. 데이터는 5배 낭비되고 로딩만 느려질 뿐 얻는 것이 없습니다. srcset을 쓰면 브라우저가 화면에 맞는 버전을 골라 줍니다. 단, 그 버전들을 먼저 만들어 두어야 합니다.
이미지 한 장으로는 왜 부족한가
Core Web Vitals의 LCP는 대개 첫 화면 상단의 큰 이미지가 차지합니다. 휴대폰에 너비 1920, 400KB짜리 파일을 내려보내면 LCP가 2.5초 안에 들어오기 어렵습니다. 같은 회선에서 너비 480, 40KB짜리 버전이라면 자릿수가 달라질 만큼 빨라집니다. Google의 페이지 경험 신호는 이 수치를 직접 봅니다.
반대로, 큰 데스크톱 화면에 너비 768 이미지를 쓰면 뿌옇게 보입니다. 그래서 여러 크기를 만들어 두고 선택은 브라우저에 맡깁니다.
실전 브레이크포인트 표
브레이크포인트는 뷰포트가 아니라 이미지가 페이지에서 실제로 표시되는 너비를 따릅니다. 가장 흔한 두 경우, 전체 폭 배너와 본문 속 그림으로 정리하면 다음과 같습니다.
- 전체 폭 이미지(히어로, 배너): 480, 768, 1200, 1920. 휴대폰, 태블릿, 노트북, 대형 모니터에 대응합니다.
- 본문 그림(콘텐츠 영역 최대 800 안팎): 400, 800, 1200. 1200은 1.5x~2x 화면용입니다.
- 썸네일과 카드(표시 너비 300 안팎): 300과 600.
단계가 많다고 좋은 것은 아닙니다. 한 단계가 늘 때마다 내보내기 한 번, 보관할 파일 하나가 늘고, 브라우저는 크기가 조금 어긋나도 잘 처리합니다. 단계 사이를 1.5~2배로 벌리는 것이 적당하며, 4단계면 기기 조합의 90% 이상을 커버합니다.
2x 버전이 필요한가
Retina와 대부분의 휴대폰 화면은 2x~3x 밀도여서, 표시 너비 400인 이미지를 선명하게 보여 주려면 800픽셀이 필요합니다. 표의 큰 단계는 이미 작은 단계의 2x 버전 역할을 합니다. 768은 너비 390 휴대폰의 2x이고, 1200은 너비 600 콘텐츠 영역의 2x입니다.
따라서 별도의 "@2x" 세트를 만들 필요는 없습니다. 단계 간격을 2배 안팎으로 유지하면 브라우저가 밀도에 맞춰 한 단계 큰 쪽을 고릅니다.
형식: WebP를 기본으로, JPG는 대비용
같은 화질에서 WebP는 JPG보다 25~35% 작고, 최신 브라우저는 모두 지원합니다. 각 크기를 WebP로 내보내고, 오래된 브라우저를 위해 picture 요소로 JPG 대체본을 남기세요. 2020년 이전 브라우저가 방문자에게 더는 중요하지 않다면 WebP만 써도 됩니다.
AVIF는 더 작지만 브라우저에서 인코딩이 훨씬 느려서, 대량 일괄 작업에서는 손해입니다. 자세한 장단점은 AVIF vs WebP vs JPEG 비교에서 다룹니다.
한 세트를 일괄로 내보내기
원본 이미지를 이미지 일괄 처리에 넣고, 단계마다 한 번씩 너비와 접미사를 바꿔 실행합니다.
- 크기: 너비 480, "확대 허용" 끄기, WebP 품질 80%로 출력, 접미사 -480.
- 같은 설정으로 768(접미사 -768), 이어서 1200, 1920.
- JPG 대체본이 필요하면 출력을 JPG로 바꾸고 접미사는 그대로 둔 채 한 번 더 실행.
한 번 처리하는 데 몇 초면 되고, 만들어진 ZIP에는 hero-480.webp, hero-768.webp 같은 파일이 이미 들어 있어서 이미지 폴더에 그대로 올리면 됩니다. "확대 허용"은 반드시 꺼 두세요. 그러면 1000픽셀 원본이 1920으로 늘어나는 일이 없습니다.
한 장으로 단계별 용량 차이를 보고 싶다면 이미지 크기 조절기에 파일 하나만 넣어 시험해 보세요.
HTML에 적용하기
전체 폭 이미지의 경우:
<img src="hero-1200.jpg"
srcset="hero-480.webp 480w, hero-768.webp 768w, hero-1200.webp 1200w, hero-1920.webp 1920w"
sizes="100vw" width="1920" height="1080" alt="...">본문 그림은 sizes를 실제 너비에 맞춰 지정하세요. 예: sizes="(max-width: 840px) 100vw, 800px". width와 height는 항상 넣어야 브라우저가 공간을 미리 확보해 페이지가 튀지 않습니다.
여기까지 마쳤다면 이미지 로딩을 빠르게 만드는 방법의 지연 로딩과 압축 조언까지 더하세요. 성능 점수에서 이미지 부분은 사실상 만점입니다.