이미지 압축으로 웹사이트 속도 2배 올리기
웹사이트의 로딩 속도는 사용자 경험과 검색 엔진 순위에 직접적인 영향을 미칩니다. Google의 연구에 따르면, 페이지 로딩 시간이 1초에서 3초로 늘어나면 이탈률이 32% 증가합니다. 그리고 웹 페이지 전송 데이터의 평균 50% 이상이 이미지입니다. 즉, 이미지만 제대로 압축해도 웹사이트 속도를 획기적으로 개선할 수 있습니다.
왜 이미지가 웹사이트 속도를 좌우하는가?
HTTP Archive의 2026년 데이터에 따르면, 평균 웹 페이지의 이미지 비중은 다음과 같습니다:
- 전체 전송 데이터의 52%: HTML, CSS, JavaScript를 합친 것보다 많습니다
- 평균 이미지 요청 수: 페이지당 20~30개의 이미지 요청
- 평균 이미지 총 용량: 압축되지 않은 상태에서 2~5MB
이미지를 압축하면 네트워크 전송량이 줄어들고, 브라우저의 디코딩 시간이 단축되며, 메모리 사용량이 감소합니다. 이 모든 것이 모여 사용자가 체감하는 속도 향상으로 이어집니다.
Core Web Vitals와 이미지의 관계
Google이 웹사이트 품질을 측정하는 핵심 지표인 Core Web Vitals에서 이미지는 중요한 역할을 합니다.
LCP (Largest Contentful Paint)
LCP는 페이지에서 가장 큰 콘텐츠 요소가 화면에 렌더링되기까지의 시간을 측정합니다. 많은 웹사이트에서 LCP 요소가 이미지입니다. 이미지 파일 크기를 줄이면 LCP 시간이 직접적으로개선됩니다.
- 좋은 LCP: 2.5초 이하
- 개선 필요: 2.5~4초
- 나쁨: 4초 이상
CLS (Cumulative Layout Shift)
CLS는 페이지 로딩 중 레이아웃이 얼마나 이동하는지를 측정합니다. 이미지의 크기(width, height)를 지정하지 않거나, 지연 로딩 시 placeholder 없이 이미지를 불러오면 CLS가 증가합니다. 이미지 압축과 함께 올바른 크기 속성 지정이 중요합니다.
INP (Interaction to Next Paint)
이미지가 존재하는 브라우저의 취약점이 커져 사용자 입력에 대한 응답이 있을 수 있습니다. 압축된 이미지는 느낌도 더 빠릅니다.
이미지 압축 실전 가이드
1단계: 현재 상태 진단
먼저 웹사이트의 현재 이미지 상태를 파악해야 합니다.
- Google PageSpeed Insights: 이미지 관련 권장 사항을 확인합니다
- Chrome DevTools Network 탭: 이미지 파일 크기와 로딩 시간을 분석합니다
- Lighthouse: "Serve images in next-gen formats", "Properly size images" 같은 제안을 확인합니다
2단계: 이미지 포맷 변환
가장 큰 효과를 볼 수 있는 조치는 WebP 또는 AVIF로의 변환입니다.
| 원본 포맷 | WebP 변환 시 절감 | AVIF 변환 시 절감 |
|---|---|---|
| JPG (80% 품질) | 25~34% | 40~50% |
| PNG (무손실) | 26% | 30~40% |
| GIF (애니메이션) | 40~60% | 50~70% |
3단계: 품질 수준 최적화
대부분의 이미지에서 품질 75~85%가 최적의 균형점입니다. 인간의 눈은 이 수준의 압축에서 화질 저하를 거의 인지하지 못합니다.
- 품질 90% 이상: 파일 크기가 급격히 커지지만 화질개선은 미미합니다
- 품질 75~85%: 대부분의 경우 최적의 균형점
- 품질 60% 이하: 눈에 보이는 화질 저하가 시작됩니다
4단계: 적절한 크기로 리사이즈
화면에 표시되는 크기보다 큰 이미지를 사용하는 것은 불필요한 낭비입니다. 반응형 이미지 속성(srcset)을 사용하여 디바이스에 맞는 크기를 제공하세요.
- 썸네일: 150~300px
- 본문 이미지: 600~1200px
- 히어로 이미지: 1200~1920px
- 2x 디스플레이용: 표시 크기의 2배
5단계: 지연 로딩 (Lazy Loading)
화면에 보이지 않는 이미지는 사용자가 스크롤하여 할 때까지 로드를 미루는 알림입니다. HTML의
실제 사례: Before & After
다음은 실제 웹사이트에서 이미지 최적화 전후를 비교한 결과입니다.
Before (최적화 전)
- 이미지 총 용량: 4.2MB
- 포맷: JPG, PNG 혼합
- LCP: 4.8초
- PageSpeed 점수: 45점
After (WebP 변환 + 압축 + 리사이즈)
- 이미지 총 용량: 1.1MB (74% 감소)
- 포맷: WebP 통일
- LCP: 1.9초 (60%개선)
- PageSpeed 점수: 89점
서버 사이드 vs 클라이언트 사이드 압축
서버 사이드 압축
빌드 시 또는 업로드 시 서버에서 이미지를 처리하는 방식입니다. Next.js의 Image 컴포넌트, Cloudinary, imgix 같은 서비스가 대표적입니다.
- 장점: 자동화 가능, CDN 연동 용이
- 단점: 서버 비용, 빌드 시간 증가
클라이언트 사이드 압축 (ZXZX 방식)
브라우저에서 직접 이미지를 처리하는 방식입니다. WASM 코덱을 사용하여 서버 수준의 압축 품질을 제공합니다.
- 장점: 무료, 서버 비용 없음, 프라이버시 보호, 설치 불필요
- 단점: 대량 처리 시 시간 소요
ZXZX로 이미지 압축하기
ZXZX의 이미지 압축 도구는 위의 모든 최적화를 브라우저에서 바로 수행할 수 있게 해줍니다.
- 압축 도구에 이미지를 업로드합니다
- 출력 포맷을 선택합니다 (WebP 권장)
- 품질 수준을 80%로 설정합니다
- 필요 시 리사이즈 크기를 지정합니다
- "모두 압축"을 클릭합니다
- 결과를 확인하고 다운로드합니다
체크리스트: 이미지 최적화 완료 기준
- ☐ 모든 이미지가 WebP 또는 AVIF 포맷으로 변환됨
- ☐ 품질 수준이 75~85%로 설정됨
- ☐ 화면 표시 크기에 맞게 리사이즈됨
- ☐ width, height 속성이 지정됨 (CLS 방지)
- ☐ 폴딩 아래 이미지에 loading="lazy" 적용됨
- ☐ srcset으로 반응형 이미지 제공됨
결론
이미지 압축은 웹사이트 속도 개선 중 가장 효과적인 단일 조치입니다. 복잡한 서버 설정이나 비용이 들지 않습니다. ZXZX의 무료 도구를 사용하면 지금 바로 시작할 수 있습니다. 이미지 한 장 한 장이 모여 사용자 경험과 검색 순위를 결정합니다.