이미지 최적화, 웹 성능의 핵심

웹 페이지 로딩 속도 중 70~80%는 이미지 때문입니다. 이미지를 제대로 최적화하면 로딩 시간을 50% 이상 줄일 수 있고, SEO 순위도 올라갑니다.

실제로 1초 로딩이 늦어지면 전환율이 7% 감소한다는 연구결과가 있습니다. 이 가이드에서는 이미지 최적화의 모든 것을 알려드립니다.

1부: 이미지 형식 선택

주요 이미지 형식 비교

JPEG (.jpg)

용량: 작음 (손실 압축)
품질: 사진에 최적
투명도: 미지원
사용: 사진, 배경 이미지

PNG (.png)

용량: 중간 (무손실 압축)
품질: 그래픽에 최적
투명도: 지원
사용: 로고, 아이콘, 스크린샷

WebP (.webp)

용량: 매우 작음 (JPEG보다 25% 작음)
품질: 매우 좋음
투명도: 지원
사용: 모던 웹사이트
주의: 구형 브라우저 미지원

SVG (.svg)

용량: 매우 작음 (코드 기반)
품질: 확대해도 깨지지 않음
사용: 로고, 아이콘, 다이어그램

형식 선택 가이드

사진 → JPEG (또는 WebP)
로고 → SVG 또는 PNG
아이콘 → SVG 또는 PNG
그래픽 → PNG 또는 WebP
배경 이미지 → WebP 또는 JPEG

2부: 이미지 압축

손실 압축 vs 무손실 압축

손실 압축 (Lossy)

원본 데이터 일부 제거
용량 크게 감소 (50~70%)
육안으로 차이 거의 없음
예: JPEG

무손실 압축 (Lossless)

모든 데이터 유지
용량 감소 적음 (10~30%)
완벽한 품질 유지
예: PNG

JPEG 압축 품질 선택

품질 100 (원본): 1.2MB
품질 80: 200KB (권장)
품질 60: 100KB (낮지만 가능)
품질 40: 50KB (눈에 띄는 손상)

이미지 압축기 사용

이미지 압축기를 사용하면:

자동으로 최적 설정 적용
여러 이미지 일괄 처리
품질 슬라이더로 조절
실시간 미리보기

3부: 이미지 차원 최적화

올바른 이미지 크기

❌ 2000×2000px 이미지를 200×200px로 표시
✅ 200×200px 이미지를 만들어 사용

반응형 이미지 (Responsive Images)

<picture>
  <source srcset="image-large.webp" media="(min-width: 1024px)">
  <source srcset="image-medium.jpg" media="(min-width: 768px)">
  <img src="image-small.jpg" alt="설명">
</picture>

→ 화면 크기에 따라 최적 이미지 로드

srcset 속성

<img
  srcset="image-1x.jpg 1x, image-2x.jpg 2x"
  src="image-1x.jpg"
  alt="설명"
>

→ 고해상도 디바이스에는 @2x 이미지 로드

4부: 로딩 최적화

1. Lazy Loading

<img
  src="image.jpg"
  loading="lazy"
  alt="설명"
>

→ 사용자가 스크롤해서 보일 때만 로드

2. CDN 사용

Content Delivery Network를 사용하면:

지리적으로 가까운 서버에서 로드
로딩 속도 50~70% 감소
예: CloudFlare, Imgix

3. 캐싱

// 브라우저 캐싱 설정
Cache-Control: public, max-age=31536000
→ 1년간 브라우저에 저장

5부: SEO와 접근성

ALT 텍스트 (필수!)

❌ <img src="photo.jpg">
✅ <img src="photo.jpg" alt="서울 남산 야경">

이미지 메타데이터

EXIF 정보 제거 (개인정보 보호):

// 온라인 도구: Verexif, Online EXIF Remover
개인정보 제거 → 파일 크기 약간 감소

이미지 파일명

❌ "IMG_1234.jpg"
✅ "seoul-night-view.jpg"
→ SEO와 접근성 향상

6부: 실제 최적화 예시

Before (최적화 전)

파일명: image001.JPG
형식: JPEG (원본)
크기: 4000×3000px
용량: 5.2MB
로딩 시간: 3초

After (최적화 후)

파일명: sunset-beach-view.jpg
형식: WebP (또는 최적화된 JPEG)
크기: 1200×900px (데스크톱), 600×450px (모바일)
용량: 150KB (97% 감소!)
로딩 시간: 0.2초 (15배 빠름!)

최적화 방법

가장 적절한 형식 선택 (WebP 권장)
이미지 압축기로 압축 (품질 80)
올바른 차원으로 리사이징 (1200×900px 최대)
반응형 이미지 설정
Lazy loading 적용

자동화 도구

이미지 최적화 서비스

TinyPNG: PNG/JPEG 압축
Squoosh: Google의 온라인 압축기
ImageOptim: Mac 데스크톱 앱
Vercel Imagekit: 자동 최적화 API

개발 도구

// Webpack
npm install --save-dev image-webpack-loader

// Next.js
<Image
  src="/image.jpg"
  width={800}
  height={600}
  alt="설명"
/>
→ 자동 최적화

성능 측정

도구

Google PageSpeed Insights: 전체 페이지 성능
WebPageTest: 상세 분석
GTmetrix: 시각적 정보

목표

첫 콘텐츠풀 페인트 (FCP): 2초 이내
최대 콘텐츠풀 페인트 (LCP): 2.5초 이내
누적 레이아웃 이동 (CLS): 0.1 이하

자주 하는 실수

1. 과도한 압축

❌ 품질 20까지 압축 → 눈에 띄는 손상

✅ 품질 75~85 권장

2. 초고해상도 이미지 사용

❌ 5000×5000px 이미지를 웹에 사용

✅ 2000×2000px 이상은 불필요

3. ALT 텍스트 무시

❌ alt="image" 또는 alt=""

✅ alt="주제를 설명하는 명확한 텍스트"

4. 형식 미선택

❌ 모든 이미지를 PNG로 (크기 큼)

✅ 사진은 JPEG/WebP, 그래픽은 PNG/SVG

마무리

이미지 최적화는 사용자 경험과 SEO를 동시에 개선하는 가장 효과적인 방법입니다. 작은 최적화가 모여 큰 성능 향상을 만듭니다.

이미지 압축기로 당신의 이미지를 지금 바로 최적화해보세요!