웹페이지 용량의 평균 50% 이상이 이미지입니다. 이미지 포맷 하나만 잘 선택해도 페이지 로딩 속도가 극적으로 개선됩니다. 오늘은 가장 많이 쓰이는 3가지 포맷을 비교하고, 실전 최적화 전략을 알려드립니다.
3대 포맷 비교
| 특성 | PNG | JPEG | WebP |
|---|---|---|---|
| 압축 방식 | 무손실 | 손실 | 무손실 + 손실 모두 |
| 투명도 | O (알파 채널) | X | O |
| 애니메이션 | O (APNG) | X | O |
| 파일 크기 | 큰 편 | 작은 편 | 가장 작음 |
| 색상 | 1,670만 색 | 1,670만 색 | 1,670만 색 |
| 브라우저 지원 | 모든 브라우저 | 모든 브라우저 | 95%+ (IE 제외) |
| 최적 용도 | 로고, 아이콘, UI | 사진, 배경 | 거의 모든 용도 |
각 포맷의 특징
PNG — 선명함이 중요할 때
PNG는 무손실 압축을 사용합니다. 아무리 저장을 반복해도 화질이 떨어지지 않습니다.
적합한 경우:
- 로고, 아이콘 (선명한 경계선)
- 투명 배경이 필요한 이미지
- 스크린샷, 텍스트가 포함된 이미지
- 그래프, 차트
부적합한 경우:
- 사진 → 파일 크기가 불필요하게 큼
JPEG — 사진의 표준
JPEG는 손실 압축으로 파일 크기를 크게 줄입니다. 품질(quality) 값을 조절하여 크기와 화질의 균형을 맞출 수 있습니다.
적합한 경우:
- 사진, 풍경, 인물
- 배경 이미지
- 품질보다 용량이 중요한 썸네일
부적합한 경우:
- 텍스트가 포함된 이미지 (블록 노이즈 발생)
- 투명도가 필요한 경우
WebP — 차세대 표준
구글이 개발한 WebP는 PNG와 JPEG의 장점을 모두 갖고 있습니다.
- JPEG 대비 25~34% 더 작은 파일 크기 (같은 품질)
- PNG 대비 26% 더 작은 무손실 크기
- 투명도, 애니메이션 모두 지원
유일한 단점: IE11 미지원 (2025년 기준 점유율 0.5% 미만)
품질 설정 가이드
JPEG와 WebP는 품질(Quality) 값으로 파일 크기를 조절합니다.
| 품질 | 용도 | 파일 크기 (1920x1080 사진 기준) |
|---|---|---|
| 100% | 인쇄용, 원본 보존 | ~2MB |
| 80~85% | 웹 최적 (추천) | ~200KB |
| 60~70% | 썸네일, 프리뷰 | ~100KB |
| 40% 이하 | 극저용량 (품질 저하 눈에 띔) | ~50KB |
80~85%는 황금 비율입니다. 인간의 눈으로는 100%와 거의 구분할 수 없으면서 파일 크기는 10배 가까이 줄어듭니다.
실전 최적화 전략
1. 용도별 포맷 선택
사진/배경 → WebP (JPEG 폴백)
로고/아이콘 → SVG > PNG
스크린샷 → WebP (무손실)
2. 반응형 이미지
같은 이미지라도 모바일(640px)과 데스크톱(1920px)에서 같은 크기를 로드할 필요가 없습니다. srcset으로 해상도별 이미지를 제공하세요.
3. 지연 로딩(Lazy Loading)
화면에 보이지 않는 이미지는 스크롤할 때 로드하면 초기 로딩 속도를 크게 개선할 수 있습니다.
결론
이미지 포맷 선택은 웹 성능의 가장 기본이면서 효과가 큰 최적화입니다. 2026년 기준으로 WebP를 기본 포맷으로 사용하고, 필요 시 PNG/JPEG로 폴백하는 전략을 추천합니다.
지금 바로 이미지 변환기에서 기존 이미지를 WebP로 변환하고 용량 절감 효과를 확인해 보세요!
