웹 성능을 위한 이미지 최적화 가이드
웹사이트 로딩 속도의 핵심은 이미지 최적화입니다. WebP 변환, 적절한 해상도 설정, 지연 로딩까지 — 실제로 적용 가능한 이미지 최적화 기법을 단계별로 알아봅니다.
이미지가 웹 성능에 미치는 영향
50~70%
웹페이지 데이터 중 이미지 비중
3초
로딩 시간 초과 시 이탈률 급증
2.5초
구글 권장 LCP 목표치
40%
이미지 최적화로 줄일 수 있는 평균 용량
1단계: 올바른 포맷 선택 — WebP 우선 전략
이미지 최적화의 가장 빠른 방법은 포맷을 바꾸는 것입니다. JPG나 PNG를 WebP로 변환하면 품질 손실 없이 파일 크기를 25~35% 줄일 수 있습니다. 2024년 기준 WebP는 모든 주요 브라우저에서 98% 이상 지원됩니다.
포맷별 같은 화질 파일 크기 비교 (예시)
💡 구형 브라우저 대응 방법
IE11 같은 구형 브라우저가 있다면 HTML <picture> 태그를 활용하세요. WebP를 먼저 제공하고 지원하지 않는 브라우저에는 JPG 폴백을 제공할 수 있습니다.
2단계: 필요한 크기만큼만 — 해상도와 리사이즈
이미지 최적화에서 포맷보다 더 중요한 것이 해상도입니다. 2,000px 너비의 이미지를 600px 컨테이너에 표시하면 3.3배의 불필요한 데이터를 다운로드하게 됩니다.
화면 크기에 맞는 이미지 제공
컨테이너 최대 너비의 1.5~2배 크기로 이미지를 준비하세요. Retina 디스플레이(2x DPI)를 고려하면 컨테이너가 600px이라면 이미지는 1,200px이면 충분합니다.
썸네일은 별도 크기로 생성
목록 페이지의 썸네일에 원본 고해상도 이미지를 사용하지 마세요. 썸네일 전용(예: 300×200px)으로 리사이즈한 이미지를 별도 저장하면 로딩 속도가 크게 개선됩니다.
srcset으로 반응형 이미지
같은 이미지를 여러 크기(480w, 800w, 1200w)로 준비하고 srcset 속성으로 제공하면 브라우저가 현재 화면 크기에 맞는 최적 이미지를 자동 선택합니다.
3단계: 품질 설정 최적화 — 눈에 띄지 않는 품질 감소
이미지 품질을 100%에서 80%로 낮추면 파일 크기가 30~50% 줄어드는 경우가 많습니다. 대부분의 사용자는 화면으로 보는 이미지에서 80% 품질 이하도 차이를 인식하지 못합니다.
| 품질 설정 | 파일 크기 비율 | 시각적 품질 | 권장 용도 |
|---|---|---|---|
| 100% | 100% | 완벽 | 원본 보관, 재편집용 |
| 85~90% | ~60% | 원본과 동일 | 상세 페이지, 프로필 사진 |
| 75~80% | ~40% | 차이 거의 없음 | 블로그 본문 이미지, 일반 웹 |
| 60~70% | ~25% | 약간 차이 있음 | 썸네일, SNS 공유 |
| 50% 이하 | ~15% | 눈에 띄는 열화 | 권장하지 않음 |
4단계: 지연 로딩(Lazy Loading)으로 초기 로딩 개선
지연 로딩은 화면에 보이지 않는 이미지를 나중에 로딩하여 초기 페이지 로딩 속도를 개선하는 기법입니다. HTML의 loading="lazy" 속성 하나로 구현할 수 있습니다.
HTML 예시
<img src="image.webp" alt="이미지 설명" width="800" height="600" loading="lazy" />
loading='lazy' 적용 권장
- • 스크롤로 보이는 본문 이미지
- • 블로그 게시글 이미지
- • 제품 목록 썸네일
- • 소셜 공유 이미지
loading='eager' 유지 (기본값)
- • 히어로 이미지 (above the fold)
- • 페이지 상단 로고
- • LCP 대상 이미지
- • 중요한 첫 화면 이미지
이미지 최적화 체크리스트
JPG/PNG 이미지를 WebP(또는 AVIF)로 변환했는가?
컨테이너 크기에 맞게 이미지를 리사이즈했는가?
JPG 품질을 80% 이하로 설정했는가? (WebP: 75% 이하)
모든 이미지에 의미 있는 alt 텍스트를 추가했는가?
히어로 이미지에 width/height 속성을 명시했는가? (CLS 방지)
above the fold 이미지에 fetchpriority='high'를 설정했는가?
스크롤 하단 이미지에 loading='lazy'를 적용했는가?
파일명을 keyword-friendly하게 변경했는가? (예: red-shoes.webp)
Core Web Vitals와 이미지의 관계
구글은 2021년부터 Core Web Vitals를 SEO 순위 요소에 포함했습니다. 이미지는 세 가지 Core Web Vitals 지표에 모두 영향을 줍니다.
LCP (Largest Contentful Paint)
히어로 이미지가 LCP 대상이 되는 경우가 많습니다. WebP 변환, 적절한 크기, fetchpriority='high' 설정으로 LCP를 개선하세요.
CLS (Cumulative Layout Shift)
이미지에 width와 height 속성을 명시하면 브라우저가 이미지 로딩 전 공간을 미리 확보합니다. aspect-ratio CSS도 활용하세요.
INP (Interaction to Next Paint)
이미지 로딩 자체보다 이미지 디코딩이 메인 스레드를 차지할 때 영향을 줍니다. 큰 이미지는 decoding='async' 속성을 추가하세요.
자주 묻는 질문
이미지 최적화만으로 웹사이트 로딩 속도를 얼마나 개선할 수 있나요?
이미지는 일반적으로 웹페이지 총 데이터의 50~70%를 차지합니다. 이미지를 적절히 최적화하면 페이지 크기를 30~70% 줄일 수 있습니다. 구글 PageSpeed Insights 점수 기준으로 이미지 최적화만으로 20~40점을 올리는 경우도 흔합니다. 특히 LCP(Largest Contentful Paint) 지표 개선에 직접적인 영향을 줍니다.
이미지 최적화가 SEO에 영향을 주나요?
네, 직접적인 영향을 줍니다. 구글은 2021년부터 Core Web Vitals를 검색 순위 알고리즘에 반영합니다. LCP(가장 큰 콘텐츠 요소 로딩 시간)는 보통 히어로 이미지이며, 이 값이 2.5초 이하여야 '좋음' 등급을 받습니다. 또한 alt 태그, 파일명 최적화는 이미지 검색에서의 노출에도 영향을 줍니다.
next/image를 사용하면 이미지 최적화가 자동으로 되나요?
Next.js의 next/image 컴포넌트는 WebP 자동 변환, 반응형 이미지 제공, 지연 로딩(Lazy loading), 적절한 크기 자동 조정, blur placeholder 등을 자동으로 처리합니다. 다만 원본 이미지 크기 자체는 최적화하지 않으므로, 서버에 올리기 전 원본 이미지를 적절한 크기로 리사이즈하는 것이 좋습니다.
소셜 미디어 OG 이미지는 어떻게 최적화해야 하나요?
Open Graph(OG) 이미지는 공유 미리보기에 사용되는 이미지입니다. 권장 크기는 1200×630px이며, 파일 크기는 1MB 이하를 권장합니다. 카카오, 페이스북은 JPG/PNG를 권장하며 WebP 지원이 제한적일 수 있습니다. OG 이미지는 텍스트 가독성을 위해 단순한 배경과 큰 폰트를 사용하는 것이 좋습니다.
모바일 기기에서 이미지 최적화 방법이 따로 있나요?
모바일에서는 화면 해상도 기준으로 필요한 이미지 크기가 데스크탑보다 작습니다. srcset 속성이나 <picture> 태그를 활용하면 기기 해상도에 따라 적절한 크기의 이미지를 제공할 수 있습니다. 예를 들어 400px 너비 컨테이너에는 400px(1x) 또는 800px(2x Retina) 이미지면 충분합니다.
바로 이미지 변환하기
바로 변환하기
이미지 최적화의 첫 단계는 포맷 변환입니다. 지금 바로 변환해 보세요.