웹 성능: 이미지 압축 완전 가이드

누구나 겪어 본 일입니다. 휴대폰에서 링크를 누르고, 기다립니다. 글자는 바로 뜨는데 나머지는 하얀 화면이고, 커다란 이미지가 4G로 내려오느라 위에서부터 조금씩 채워집니다.

3초쯤 지나면 뒤로 가기를 누르고 경쟁사 사이트로 갑니다.

지금의 웹에서 속도는 전부라고 해도 지나치지 않습니다. 느린 사이트는 전환율을 무너뜨리고 사용자 경험을 망칩니다. 실제로 구글은 페이지 로딩 속도, 특히 LCP 같은 Core Web Vitals 지표를 검색 순위 요소로 명시하고 있습니다. 사이트가 느리면 트래픽과 매출을 함께 잃는 셈입니다.

그리고 한 가지 알려 드리면, 열에 아홉은 원인이 서버 구조나 무거운 자바스크립트가 아닙니다. 최적화되지 않은 거대한 이미지입니다.

1999년식 픽셀 덩어리로 만들지 않으면서 이미지를 압축하고 최적화하는 방법을 정리했습니다.

왜 중요한가: 숫자로 보기

HTTP Archive에 따르면 이미지는 일반적인 웹페이지 전체 용량의 **약 50%**를 차지합니다. 웹페이지 중앙값 크기는 2010년 약 500KB에서 오늘날 2.5MB 이상으로 커졌고, 그 증가에 가장 크게 기여한 것이 이미지입니다.

속도가 성과에 미치는 영향에 대한 연구 결과입니다.

로딩 시간 증가	영향
0 → 1초	이탈률 증가 거의 없음
1 → 3초	이탈률 32% 증가
1 → 5초	이탈률 90% 증가
1 → 6초	이탈률 106% 증가
1 → 10초	이탈률 123% 증가

출처: Google/SOASTA Research, 2017

최적화하지 않은 대문 이미지 하나가 로딩에 2~3초를 얹어 위험 구간으로 밀어 넣습니다. 다행인 것은, 이미지 최적화가 가장 손쉬우면서 효과가 큰 개선이라는 점입니다.

1단계: 형식을 제대로 고르기

모든 것을 PNG로 저장하는 실수를 자주 봅니다. 무손실이라는 이유로요. 형식만 제대로 골라도 절반은 해결됩니다.

• JPEG (.jpg): 사진과 인물, 복잡한 그러데이션에 쓰는 주력입니다. 손실 압축으로 사람 눈이 잘 알아채지 못하는 정보를 버려 파일을 크게 줄입니다. 투명도는 지원하지 않습니다.
• PNG (.png): 로고, UI 아이콘, 투명 배경이 필요한 평면 일러스트에 쓰세요. 무손실이라 경계가 또렷하지만, 일반 사진에는 파일이 지나치게 큽니다.
• WebP (.webp): 현대의 표준. 투명도와 애니메이션을 모두 지원하며 같은 화질의 JPEG·PNG보다 보통 25~35% 작습니다. 아주 오래된 브라우저를 지원할 필요가 없다면 기본값으로 삼으세요.
• AVIF (.avif): AV1 코덱 기반의 최신 형식으로 WebP보다도 좋습니다. 같은 화질에서 JPEG보다 약 50% 작습니다. 2026년 기준 브라우저 지원이 90%를 넘어 대부분의 프로젝트에서 실용적입니다.
• SVG (.svg): 아이콘과 로고, 단순한 도형에는 적수가 없습니다. 벡터라 어떤 크기로도 화질 손실 없이 확대되고 파일도 아주 작습니다.

빠른 선택 기준

콘텐츠	권장 형식	이유
사진	WebP 또는 AVIF	손실 압축, 작은 용량, 좋은 화질
스크린샷	WebP 또는 PNG	또렷한 글자와 UI 요소
로고·아이콘	SVG	완벽한 확대, 아주 작은 용량
투명도 필요	WebP 또는 PNG	둘 다 알파 채널 지원
애니메이션	WebP 또는 GIF	WebP가 GIF보다 훨씬 작음

2단계: 실제 표시 크기로 줄이기

블로그에 400×300으로 보일 이미지를 아이폰에서 나온 4000×3000 원본 그대로 올리지 마세요.

CSS로 작게 보이게 해도(max-width: 100%) 브라우저는 5MB짜리 원본을 모바일 데이터로 전부 내려받은 뒤에야 줄여서 그립니다. 사용자의 데이터와 배터리를 쓰고 성능 점수를 깎아먹습니다.

업로드 전에 실제로 표시될 최대 크기로 줄이세요. 반응형 사이트라면 여러 크기(400w, 800w, 1200w)를 만들고 srcset으로 브라우저가 고르게 하세요.

<img 
  src="photo-800.webp" 
  srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px"
  alt="설명"
/>

이 한 가지만으로 모바일에서 이미지 전송량을 60~80% 줄일 수 있습니다. 휴대폰이 데스크톱용 이미지를 내려받느라 데이터를 낭비하지 않기 때문입니다.

3단계: 눈에 띄지 않게 압축하기

형식과 크기를 맞췄다면 이제 압축입니다.

현대의 압축 알고리즘은 사실상 마법입니다. 카메라 모델, GPS 좌표, 저작권 정보 같은 숨은 메타데이터를 걷어 내고, 수학적으로는 유의미하지만 화면에서 사람 눈에는 보이지 않는 방식으로 색을 줄입니다.

실제로 통하는 품질 설정

JPEG와 WebP는 품질 75~85%가 대부분의 웹 이미지에 최적입니다. 70% 아래로 내려가면 아티팩트가 눈에 띄고, 90%를 넘으면 아무도 알아채지 못하는 화질을 위해 용량을 크게 치릅니다.

품질 설정	대략적 용량	시각적 영향
100%	2.5 MB	원본과 구별 불가
90%	800 KB	거의 완벽, 확대 시 미세한 차이
80%	400 KB	훌륭함, 대부분의 사진에 최적
70%	250 KB	양호, 세부에서 약간 뭉개짐
50%	120 KB	그러데이션과 경계에 아티팩트

비싼 데스크톱 소프트웨어 대신 무료 이미지 편집기와 이미지 압축기를 쓰세요. 이 도구들은 WebAssembly로 브라우저 안에서 직접 돌기 때문에 파일이 서버로 업로드되지 않습니다. 완전한 프라이버시와 즉각적인 처리 속도를 함께 얻습니다.

4단계: 메타데이터 제거

스마트폰으로 찍은 사진에는 EXIF 메타데이터가 들어 있습니다. 카메라 모델, 렌즈 사양, 셔터 속도, ISO, 촬영 위치의 GPS 좌표, 날짜와 시각, 때로는 기기 일련번호까지요.

이 메타데이터는 이미지마다 보통 10~50KB를 더하면서 웹페이지에서는 아무 역할도 하지 않습니다. 더 나쁜 것은 GPS 좌표가 사생활 정보를 의도치 않게 노출할 수 있다는 점입니다. 압축 도구는 대개 이를 기본으로 제거해 용량과 프라이버시를 동시에 챙깁니다.

5단계: 지연 로딩 적용

이미지를 완벽히 압축하고 크기를 맞췄더라도, 페이지가 열릴 때 50장을 한꺼번에 내려받게 하면 여전히 굼뜹니다.

해법은 아주 간단합니다. <img> 태그에 loading="lazy"를 넣으세요.

<img src="photo.webp" alt="설명" loading="lazy" />

이 속성 하나로 브라우저는 사용자가 그 근처까지 스크롤할 때만 이미지를 내려받습니다. 초기 로딩 시간과 네트워크 요청이 크게 줄어 첫 순간부터 페이지가 경쾌해집니다.

주의할 점: 대문 이미지나 첫 화면에 보이는 이미지에는 지연 로딩을 걸지 마세요. 이들은 즉시 로딩되어야 하고, 가능하면 <link rel="preload">로 미리 받는 편이 좋습니다. 첫 화면 이미지를 지연 로딩하면 오히려 LCP 점수가 나빠집니다.

6단계: CDN으로 전송

CDN은 전 세계에 분산된 서버에 이미지를 캐시해 둡니다. 도쿄의 사용자가 요청하면 버지니아의 원본 서버까지 가지 않고 일본의 가까운 서버에서 받습니다. 요청당 50~200밀리초를 줄일 수 있습니다.

Cloudflare Pages, Vercel, Netlify 같은 현대적 호스팅은 대부분 글로벌 CDN을 기본 제공합니다. 직접 호스팅한다면 형식 변환과 크기 조정까지 처리해 주는 이미지 전용 CDN을 고려해 보세요.

최적화 점검 목록

발행 전에 페이지의 모든 이미지에 대해 확인하세요.

1. 형식이 적절한가? (사진은 WebP·AVIF, 아이콘은 SVG)
2. 픽셀 크기가 표시 크기를 넘지 않는가?
3. 손실 형식의 품질이 75~85%인가?
4. 메타데이터를 제거했는가?
5. 첫 화면 아래 이미지에 loading="lazy"가 있는가?
6. 대문 이미지는 미리 받고 지연 로딩을 걸지 않았는가?
7. CDN에서 전송하고 있는가?

이 단계를 따르면 Core Web Vitals가 녹색으로 바뀌는 것을 보게 됩니다. 여러 장을 한 번에 줄이려면 이미지 압축기를, 크기 조정과 자르기, 형식 변환에는 이미지 편집기를 쓰세요. 모두 브라우저 안에서만 동작합니다.