이미지 포맷
디지털 이미지를 저장하는 방식으로, 압축 방식과 용도에 따라 다양한 포맷이 존재합니다.
포맷별 특징
| 포맷 | 압축 방식 | 투명도 | 애니메이션 | 주요 용도 |
|---|---|---|---|---|
| JPEG | 손실 압축 | X | X | 사진 |
| PNG | 무손실 압축 | O | X | 아이콘, 로고 |
| GIF | 무손실 압축 | O (1bit) | O | 단순 애니메이션 |
| WebP | 손실/무손실 | O | O | 웹 이미지 |
| SVG | 벡터 | O | O | 아이콘, 로고 |
| AVIF | 손실/무손실 | O | O | 차세대 웹 이미지 |
각 포맷 상세
JPEG (JPG)
- 손실 압축 → 파일 크기 작음
- 압축률 조절 가능 (품질 vs 용량 트레이드오프)
- 투명도 지원 안함
- 반복 저장 시 품질 저하
→ 사진, 배경 이미지에 적합
PNG
- 무손실 압축 → 품질 유지, 파일 크기 큼
- 투명도(알파 채널) 지원
- 반복 저장해도 품질 유지
→ 투명 배경 필요한 로고, 아이콘에 적합
GIF
- 최대 256색만 지원 (색상 제한)
- 투명도 지원 (단, 완전 투명/불투명만 가능)
- 애니메이션 지원
→ 단순한 애니메이션에 적합
복잡한 애니메이션은 WebP, APNG 권장
WebP
- Google이 개발한 차세대 포맷
- JPEG 대비 30%, PNG 대비 26% 용량 절감
- 투명도, 애니메이션 모두 지원
- 구형 브라우저 미지원 (IE 등)
→ 웹 성능 최적화에 적합
SVG
- 벡터 기반 → 크기 변경해도 품질 유지
- XML 텍스트 형식 → 코드로 직접 수정 가능
- CSS, JS로 스타일링/애니메이션 가능
- 복잡한 이미지는 파일 크기 커짐
→ 아이콘, 로고, 간단한 일러스트에 적합
AVIF
- AV1 코덱 기반 차세대 포맷
- WebP보다 뛰어난 압축률
- 투명도, 애니메이션 지원
- 인코딩 속도 느림
- 브라우저 지원 아직 확산 중
→ 차세대 웹 이미지 표준으로 주목
손실 vs 무손실 압축
| 손실 압축 | 무손실 압축 | |
|---|---|---|
| 파일 크기 | 작음 | 큼 |
| 품질 | 압축률에 따라 저하 | 원본 유지 |
| 재저장 | 품질 누적 저하 | 품질 유지 |
| 포맷 | JPEG, WebP(손실) | PNG, GIF, WebP(무손실) |
상황별 추천
사진, 배경 이미지 → JPEG or WebP
투명 배경 이미지 → PNG or WebP
아이콘, 로고 → SVG (벡터) or PNG
애니메이션 → WebP or GIF
웹 성능 최적화 → WebP or AVIF
웹 개발에서는 WebP를 기본으로 사용하고, 벡터 이미지는 SVG, 구형 브라우저 지원이 필요하면 JPEG/PNG 폴백을 제공하는 방식을 권장합니다.