이미지 압축 완전 가이드
이미지 압축이 중요한 이유
웹페이지 평균 크기의 60~70%가 이미지입니다. 이미지를 최적화하면: - 페이지 로딩 속도 향상 - Google Core Web Vitals(LCP) 점수 개선 - 서버 대역폭 및 CDN 비용 절감 - 모바일 사용자 데이터 절약
손실 압축 vs 무손실 압축
손실 압축(Lossy) - 사람의 눈이 인식하기 어려운 데이터를 버림 - 포맷: JPG, WebP(손실 모드), AVIF - 파일 크기를 크게 줄일 수 있음 (70~90%) - 같은 파일을 반복 저장하면 품질이 계속 저하됨
무손실 압축(Lossless) - 데이터를 완전히 보존하면서 중복 정보만 제거 - 포맷: PNG, GIF, WebP(무손실 모드) - 압축률이 낮음 (10~30%) - 반복 저장해도 품질 변화 없음
용도별 최적 포맷 선택
| 이미지 유형 | 권장 포맷 | 이유 |
|---|---|---|
| 사진 | JPG/WebP | 손실 압축으로 크기 최소화 |
| 로고/아이콘 | SVG/PNG | 선명도와 투명도 보존 |
| 스크린샷 | PNG/WebP | 텍스트 선명도 유지 |
| 애니메이션 | WebP/MP4 | GIF보다 훨씬 작은 크기 |
| HDR 사진 | AVIF | 넓은 색 영역 지원 |
실전 압축 팁
JPG 품질 설정 - 웹용: 75~85%가 최적 - 인쇄용: 90~95% - 썸네일: 60~70%
PNG 최적화 - pngcrush, oxipng 등 도구로 메타데이터 제거 - 색상이 256개 이하면 PNG-8 사용 (PNG-24 대비 4~5배 작음)
WebP 변환 효과 - JPG → WebP: 약 25~34% 추가 절감 - PNG → WebP: 약 26% 절감
이미지 크기(해상도) 최적화
파일 포맷뿐만 아니라 해상도도 중요합니다. 200px 너비로 표시되는 이미지를 2000px로 저장하면 낭비입니다.
반응형 이미지:
```html
```
OBSCURA로 최적화하기
OBSCURA에서 JPG/PNG를 WebP 또는 AVIF로 변환하는 것이 가장 효과적인 즉시 압축 방법입니다. 별도의 품질 조정 없이도 자동으로 최적화된 파일을 받을 수 있습니다.