이미지 포맷 완전 비교 가이드
JPG, PNG, WebP, AVIF, GIF… 다양한 이미지 포맷 중 어떤 것을 선택해야 할까요? 각 포맷의 특징과 최적 사용 사례를 알아봅니다.
한눈에 보는 포맷 비교표
| 포맷 | 압축 방식 | 투명도 | 애니메이션 | 브라우저 지원 | 상대 파일 크기 |
|---|---|---|---|---|---|
| JPG | 손실 압축 | ❌ | ❌ | 모든 브라우저 | 기준 (100%) |
| PNG | 무손실 압축 | ✅ | ❌ | 모든 브라우저 | 크다 (130~200%) |
| WebP | 손실/무손실 | ✅ | ✅ | Chrome/FF/Safari 14+ | 작다 (65~75%) |
| AVIF | 손실/무손실 | ✅ | ✅ | Chrome 85+/FF 93+/Safari 16+ | 매우 작다 (50~65%) |
| GIF | 무손실 (LZW) | ✅ (1비트) | ✅ | 모든 브라우저 | 보통 (애니메이션 시 큼) |
JPG (JPEG) – 사진의 표준
1992년에 등장한 JPG는 여전히 가장 널리 쓰이는 이미지 포맷입니다. 손실 압축 방식으로 파일 크기를 크게 줄일 수 있지만, 압축 시 원본 데이터의 일부가 버려집니다.
장점
- 모든 기기, 운영체제, 브라우저에서 지원
- 사진처럼 색상 변화가 많은 이미지에서 효율적
- 품질 설정으로 파일 크기와 화질 균형 조절 가능
단점
- 투명도(알파 채널) 미지원
- 반복 저장 시 화질 저하 누적
- 문자, 선 그래픽에서는 뭉개짐(아티팩트) 발생
권장 용도: 풍경 사진, SNS 이미지, 이메일 첨부, 뉴스 기사 이미지
PNG – 투명도와 무손실의 조합
PNG는 화질 손실 없이 이미지를 저장합니다. 투명도(알파 채널)를 완벽히 지원하며, 텍스트나 선이 포함된 그래픽에서 선명한 품질을 유지합니다.
장점
- 무손실 압축으로 화질 완벽 보존
- 알파 채널(0~255 단계 투명도) 완벽 지원
- 선명한 텍스트와 경계선
- 모든 브라우저에서 지원
단점
- 사진류 이미지에서 파일 크기가 매우 큼
- 애니메이션 미지원 (APNG는 별도)
권장 용도: 로고, 아이콘, UI 스크린샷, 투명 배경 필요 이미지
WebP – 웹의 미래 표준
Google이 2010년에 개발한 WebP는 JPG보다 25~35% 작은 파일 크기로 비슷한 품질을 제공합니다. 손실·무손실 압축 모두 지원하고 투명도와 애니메이션도 가능합니다.
장점
- JPG 대비 25~35% 파일 크기 절감
- 손실/무손실 압축 모두 지원
- 투명도 및 애니메이션 지원
- Chrome, Firefox, Safari(14+), Edge 등 주요 브라우저 모두 지원
단점
- 구형 브라우저(IE, 구형 Safari) 미지원
- 일부 이미지 편집 소프트웨어에서 직접 열기 불편
권장 용도: 웹사이트 이미지 최적화, Next.js/Nuxt 등 모던 웹 개발
AVIF – 차세대 최고 효율 포맷
AV1 비디오 코덱 기반의 AVIF는 현재 가장 높은 압축 효율을 자랑합니다. 동일 품질에서 WebP보다도 20~30% 작습니다.
장점
- 현재 가장 높은 압축 효율
- HDR(High Dynamic Range) 지원
- 10비트/12비트 색 심도 지원
단점
- 비교적 최신 브라우저에서만 지원 (Safari 16+)
- 인코딩 속도가 느릴 수 있음
권장 용도: 최신 웹 서비스, 고품질 이미지가 중요한 포트폴리오, 뉴스 미디어
GIF – 애니메이션의 고전
1987년에 등장한 GIF는 최대 256가지 색상만 지원하지만 애니메이션 기능 덕분에 아직도 밈, 이모티콘 등에 널리 사용됩니다.
장점
- 애니메이션 지원, 모든 환경에서 재생 가능
- 1비트 투명도 지원
- 단순한 그래픽에서 소용량
단점
- 최대 256색으로 색 표현 제한
- 애니메이션 시 파일 크기 매우 큼 (MP4/WebP 대비)
권장 용도: 짧은 애니메이션 클립, 이모티콘, 반복 효과