웹사이트가 느리다는 피드백을 받으면 개발자는 흔히 자바스크립트 번들 크기부터 의심합니다. 하지만 HTTP Archive의 최근 통계를 보면, 평균적인 페이지 용량에서 이미지가 차지하는 비중은 50~60%입니다. 코드를 아무리 최적화해도 이미지 한 장이 3MB라면 모바일 사용자는 로딩 화면부터 지칩니다.
이 글에서는 실제 프로젝트에서 이미지로 인한 속도 문제를 어떻게 푸는지, 단계별 체크포인트를 정리합니다.
1. 포맷부터 다시 고른다 — JPEG와 PNG의 시대는 끝났다
여전히 많은 사이트가 JPG, PNG만으로 운영되고 있습니다. 그러나 2026년 현재 모든 주요 브라우저는 더 가벼운 차세대 포맷을 지원합니다.
- WebP: JPEG 대비 약 25~35% 작은 용량. 거의 모든 환경에서 안전하게 사용 가능합니다.
- AVIF: JPEG 대비 약 50% 작은 용량. 품질이 가장 뛰어나지만 인코딩 시간이 깁니다.
- SVG: 로고, 아이콘, 일러스트처럼 벡터로 만들 수 있는 요소는 무조건 SVG가 답입니다.
사파리가 AVIF를 지원한 이후로는 <picture> 엘리먼트로 포맷을 다중 제공하는 것이 가장 안전합니다.
실무 팁: 이미 운영 중인 사이트라면 CDN 레벨에서 자동 포맷 변환을 켜는 것이 가장 빠른 해결책입니다. Cloudflare Images, Imgix, ImageKit 등이 원본 업로드만으로 WebP/AVIF를 자동 제공합니다.
2. 크기부터 맞추고 압축한다
실제 디자인에서 400px 너비로 보여줄 이미지를 2,000px 원본으로 올리는 경우가 생각보다 많습니다. 브라우저는 이를 축소해서 보여주지만 네트워크는 2,000px 용량 그대로 내려받습니다. 다음 순서를 지켜야 합니다.
- 디자인 시안에서 실제 표시될 최대 픽셀 크기를 확인합니다.
- 레티나 대응을 위해 2배까지만 준비합니다. 3배는 과합니다.
- 이후 포맷 변환과 품질 압축을 진행합니다.
반응형 이미지: srcset과 sizes
모바일 사용자에게 2,000px 이미지를 내려주는 것은 낭비입니다. srcset과 sizes를 함께 사용하면 브라우저가 뷰포트에 맞는 가장 작은 이미지를 알아서 선택합니다.
실무에서는 400w, 800w, 1200w, 1600w 정도로 네 단계만 준비해도 충분합니다. 이 기법 하나만으로 모바일 페이지 용량이 60~70% 줄어드는 경우가 흔합니다.
3. 지연 로딩 — 화면에 보이는 것만 먼저
페이지 하단의 이미지까지 한꺼번에 불러오는 사이트가 여전히 많습니다. loading="lazy" 속성 하나만 추가해도 브라우저가 뷰포트 진입 시점에 맞춰 자동으로 불러옵니다.
단, 첫 화면(above the fold)의 핵심 이미지에는 절대 lazy를 붙이면 안 됩니다. LCP(Largest Contentful Paint) 점수가 급락합니다. 오히려 첫 이미지에는 fetchpriority="high"를 주는 것이 최근 권장 방식입니다.
4. CLS를 막는 width, height 명시
이미지가 로드되는 순간 주변 텍스트가 아래로 밀려 내려가는 경험, 다들 있으실 겁니다. 이는 CLS(Cumulative Layout Shift) 점수를 망치는 주범이며, 사용자 경험을 가장 즉각적으로 해치는 요소입니다.
해결책은 단순합니다. 이미지 태그에 반드시 width와 height 속성을 명시하거나 CSS에서 aspect-ratio를 지정하는 것입니다. 브라우저가 미리 공간을 확보하면 레이아웃이 흔들리지 않습니다.
5. CDN과 캐시 — 한 번 보낸 이미지는 다시 만들지 않는다
이미지 파일은 자주 바뀌지 않습니다. 그런데도 매번 오리진 서버에서 내려오게 두면 서버 비용과 사용자 체감 속도 모두 손해입니다. 정적 이미지에는 1년 이상의 장기 캐시를 걸고, 파일명에 해시를 넣어 교체 시에만 URL이 바뀌게 설계합니다.
실제로 얼마나 달라지는가
저희 CYAN 에이전시에서 최근 리뉴얼한 한 병원 웹사이트는 원본 사이트의 LCP가 4.8초였습니다. 위 다섯 가지 원칙을 순서대로 적용했을 뿐인데 LCP 1.6초, 모바일 페이지 용량 3.2MB → 780KB로 개선됐습니다. 코드는 거의 손대지 않았고, 대부분이 이미지 파이프라인 재설계였습니다.
이미지 최적화는 가장 적은 노력으로 가장 큰 개선을 만들 수 있는 영역입니다. 내일 당장 운영 중인 사이트에서 개발자 도구의 네트워크 탭을 열어 이미지 크기부터 확인해 보시길 권합니다. 대부분 3~5분 안에 범인을 찾게 됩니다.
사이트 속도 진단이나 이미지 파이프라인 재설계가 필요하다면 CYAN 에이전시에서 무료 진단 리포트부터 받아보실 수 있습니다. 용량과 로딩 시간을 숫자로 확인하는 것이 개선의 첫걸음입니다.