웹 이미지 최적화 가이드 — 사이트 속도를 높이는 방법

이미지가 웹사이트 속도를 결정한다

웹페이지를 느리게 만드는 가장 큰 원인 중 하나는 최적화되지 않은 이미지입니다. Google의 연구에 따르면 페이지 로드 시간이 1초에서 3초로 늘어나면 이탈률이 32% 증가합니다. 이미지는 일반적으로 웹페이지 전체 용량의 50~70%를 차지하므로, 이미지를 최적화하는 것만으로도 사이트 성능을 크게 향상시킬 수 있습니다.

이 글에서는 이미지 최적화의 핵심 원칙과 실전 방법을 소개합니다.

왜 이미지 최적화가 중요한가?

사용자 경험 (UX)

페이지 로드가 느리면 사용자가 이탈합니다
모바일 사용자는 데이터 요금과 배터리 수명에 민감합니다
Core Web Vitals(LCP, CLS)에 직접 영향을 미칩니다

검색엔진 최적화 (SEO)

구글은 2021년부터 Core Web Vitals를 검색 순위 요소로 반영했습니다. 이미지 최적화는 LCP(Largest Contentful Paint, 최대 콘텐츠 렌더링 시간)를 개선하는 가장 효과적인 방법 중 하나입니다.

서버 비용 절감

이미지 용량이 작아지면 서버에서 전송하는 데이터양이 줄어들어 대역폭 비용이 감소합니다. 트래픽이 많은 사이트일수록 절감 효과가 큽니다.

적절한 해상도 선택

이미지 최적화의 첫 번째 단계는 필요한 해상도로만 저장하는 것입니다. 4K 모니터용 이미지를 모바일 썸네일로 사용하는 것은 낭비입니다.

디스플레이 크기에 맞는 이미지 크기

용도	권장 너비
모바일 전체 너비 이미지	640px~750px
태블릿 이미지	1024px~1200px
데스크탑 전체 너비 이미지	1440px~1920px
블로그 본문 이미지	800px~1200px
썸네일/카드 이미지	400px~600px

실수로 과도한 해상도 사용하는 경우

사진 앱에서 직접 내보낸 4000×3000px 이미지를 300px 썸네일로 사용
디자인 파일을 Retina 해상도(2배)로만 내보내고 일반 화면용 없음
아이콘을 래스터(PNG) 이미지로 사용 (SVG가 훨씬 효율적)

압축 수준 가이드

이미지를 압축할 때는 품질과 파일 크기 사이의 균형을 찾아야 합니다. 너무 낮은 품질은 이미지를 흐릿하거나 아티팩트(계단 현상 등)가 생기게 합니다.

JPEG 압축 품질 기준

품질 (Quality)	용도	특징
90~100%	인쇄용, 원본 보관	파일 크기 큼
75~85%	웹 사진 일반	권장 범위
60~74%	썸네일, 미리보기	약간의 품질 손실 허용
60% 미만	권장하지 않음	품질 저하 뚜렷

PNG 압축 수준

PNG는 무손실 압축이므로 품질 손실 없이 파일 크기를 줄일 수 있습니다. 압축 레벨은 0(빠름, 큰 파일)~~9(느림, 작은 파일)로 설정하며, 보통 6~~8이 적당합니다.

실제 압축 효과

최적화 전후를 비교해보면:

원본 JPEG (100% 품질): 3.2MB
최적화 후 (80% 품질, 적절한 해상도): 280KB
파일 크기 91% 감소, 시각적 차이는 거의 없음

Lazy Loading — 필요할 때만 불러오기

Lazy Loading은 화면에 보이는 이미지만 먼저 로드하고, 스크롤하여 이미지가 뷰포트에 들어올 때 로드하는 기법입니다. 페이지 초기 로딩 속도를 크게 개선합니다.

HTML에서 Lazy Loading 적용

<!-- 간단하게 loading="lazy" 속성만 추가 -->
<img src="photo.jpg" alt="설명" loading="lazy" />

loading="lazy" 속성은 모던 브라우저에서 기본 지원됩니다. 추가 JavaScript 없이 한 줄로 적용 가능합니다.

주의사항

LCP 이미지에는 Lazy Loading 사용 금지: 페이지에서 가장 중요한 이미지(히어로 이미지, 첫 화면 메인 이미지)는 loading="eager" 또는 생략해야 합니다
Above the fold(첫 화면에 보이는 영역) 이미지에는 적용하지 않기

반응형 이미지 — 화면 크기에 맞는 이미지 제공

같은 이미지를 모든 기기에 제공하는 것은 비효율적입니다. srcset 속성을 활용하면 브라우저가 화면 크기에 맞는 최적의 이미지를 선택합니다.

<img
  src="image-800.jpg"
  srcset="image-400.jpg 400w,
          image-800.jpg 800w,
          image-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1200px) 800px,
         1200px"
  alt="반응형 이미지"
/>

이 방식을 사용하면 모바일 사용자는 400px 이미지를, 데스크탑 사용자는 1200px 이미지를 자동으로 받습니다.

이미지 압축기 도구로 손쉽게 최적화하기

이미지 최적화가 중요하다는 건 알겠는데, 어떻게 시작해야 할지 막막하신가요? 이미지 압축기를 사용하면 별도의 소프트웨어 설치 없이 브라우저에서 즉시 이미지를 압축할 수 있습니다.

주요 기능:

JPEG, PNG, WebP 등 주요 포맷 지원
압축 수준 조절로 품질과 크기 균형 맞추기
원본과 압축 결과 비교
압축 전후 파일 크기 확인

이미지 최적화 체크리스트

웹사이트에 이미지를 올리기 전에 다음을 확인하세요:

적절한 해상도인가? (표시 크기보다 2배 이상 크면 줄이기)
적절한 포맷을 사용하고 있는가? (사진 → JPEG/WebP, 투명도 → PNG/WebP, 아이콘 → SVG)
압축이 적용되었는가? (JPEG 75~85% 품질)
alt 속성이 있는가? (접근성 + SEO)
Lazy Loading이 적용되었는가? (첫 화면 이미지 제외)
반응형 이미지(srcset)가 필요한가?

이미지 최적화는 한 번 설정해두면 지속적으로 효과를 발휘합니다. 지금 당장 사이트의 이미지를 점검하고 최적화해보세요. 체감 가능한 속도 차이를 경험할 수 있을 것입니다.