웹사이트가 느린 가장 흔한 원인은 코드가 아니라 이미지입니다. HTTP Archive의 2025년 통계에 따르면 웹 페이지 전체 용량의 50%에서 80%를 이미지가 차지합니다. 아무리 JavaScript를 최적화하고 서버 응답 속도를 높여도, 최적화되지 않은 5MB짜리 배경 이미지 하나가 모든 노력을 무로 만듭니다.

좋은 소식은 이미지 최적화가 가장 적은 노력으로 가장 큰 효과를 얻을 수 있는 영역이라는 것입니다.

이미지 포맷부터 바꾸세요

아직도 모든 이미지를 JPEG이나 PNG로 사용하고 있다면, 그것만 바꿔도 용량이 30% 이상 줄어듭니다. WebP는 구글이 만든 차세대 이미지 포맷으로 JPEG 대비 약 25%에서 35% 작은 용량에 동일한 화질을 제공합니다.

2025년 기준 전 세계 브라우저의 97% 이상이 WebP를 지원하므로 호환성 걱정도 없습니다. 더 나아가 AVIF 포맷은 JPEG 대비 최대 50%까지 용량을 줄일 수 있지만, 아직 인코딩 속도가 느리고 일부 브라우저에서 지원이 불완전하여 WebP를 주력으로, AVIF를 보조로 사용하는 전략이 현실적입니다.

PNG는 투명도가 필요한 아이콘이나 로고에만 사용하고, 사진은 반드시 WebP로 변환해야 합니다. 변환 도구는 무료로 많이 있고, 빌드 과정에서 자동 변환도 가능합니다.

보이지 않는 이미지는 로딩하지 마세요

페이지를 열었을 때 화면에 보이는 영역을 "Above the fold"라고 합니다. 사용자가 스크롤하기 전에는 아래쪽 이미지가 필요 없습니다. 하지만 기본적으로 브라우저는 페이지의 모든 이미지를 한 번에 다운로드합니다.

Lazy Loading은 이미지가 뷰포트에 가까워질 때 비로소 로딩을 시작하는 기법입니다. HTML에서 loading="lazy" 속성 하나만 추가하면 됩니다. 20장의 이미지가 있는 페이지에서 처음에 3장만 로딩하면 초기 페이지 로딩 속도가 극적으로 빨라집니다.

사용자가 절대 스크롤하지 않는 하단 이미지는 아예 다운로드되지 않으므로 데이터 사용량도 절약됩니다. 단, 첫 화면에 보이는 히어로 이미지에는 Lazy Loading을 적용하면 안 됩니다. 오히려 우선 로딩(priority loading)을 설정해야 합니다.

반응형 이미지는 선택이 아니라 필수

데스크톱에서 1920px 너비의 이미지가 필요하더라도 모바일에서는 400px이면 충분합니다. 하지만 반응형 처리를 하지 않으면 모바일 사용자도 1920px 원본 이미지를 그대로 다운로드합니다. 모바일 사용자는 대부분 셀룰러 네트워크를 사용하므로 속도 저하가 더 심각합니다.

HTML의 srcset 속성을 사용하면 디바이스 화면 크기에 맞는 이미지를 브라우저가 자동으로 선택해서 제공할 수 있습니다. 데스크톱용 500KB 이미지가 모바일에서는 80KB로 줄어듭니다. 같은 이미지를 400px, 800px, 1200px, 1920px 네 가지 크기로 준비해두면 모든 디바이스에서 최적의 경험을 제공합니다.

모던 프레임워크의 내장 이미지 최적화

Next.js, Nuxt, SvelteKit 같은 모던 프레임워크는 자동 WebP 변환, 요청 시 자동 리사이징, Lazy Loading 기본 적용, 레이아웃 시프트 방지(CLS 최적화)를 내장 컴포넌트로 제공합니다. 별도 이미지 CDN 서비스를 붙이지 않아도 상당한 수준의 최적화가 가능합니다.

이미지 최적화의 실제 성과

한 프로젝트에서 이미지 최적화만으로 페이지 용량과 로딩 시간을 큰 폭으로 줄인 적이 있습니다. Google PageSpeed Insights 점수도 큰 차이로 개선됐습니다.

코드는 한 줄도 바꾸지 않았습니다. 이미지 포맷을 WebP로 변환하고, Lazy Loading을 적용하고, 디바이스별 적절한 크기를 지정한 것이 전부입니다. 이 세 가지만으로 사용자 체감 속도가 눈에 띄게 빨라졌습니다.

프로덕트 메이커는 모든 프로젝트에서 이미지 최적화를 기본 프로세스로 포함하고 있으며, 빌드 파이프라인에 자동 최적화를 내장합니다.