AVIF는 AV1 Image File Format의 약자로, 차세대 고효율 이미지 포맷입니다.
동영상 코덱 AV1을 이미지에 적용한 형식으로, 용량 대비 화질이 매우 뛰어난 것이 가장 큰 특징입니다.
4
📌 AVIF 핵심 요약
| 항목 | 설명 |
|---|---|
| 정식 명칭 | AV1 Image File Format |
| 기반 기술 | AV1 비디오 코덱 |
| 표준화 | Alliance for Open Media (AOMedia) |
| 확장자 | .avif |
| 목적 | 최소 용량 + 최고 화질 |
🚀 주요 장점
1️⃣ 압도적인 압축 효율
- JPEG 대비 약 40~60% 더 작은 용량
- WebP보다도 평균적으로 더 작음
- 모바일 트래픽 절감에 매우 유리
2️⃣ 고화질 지원
- HDR (10bit / 12bit)
- Wide Color Gamut (BT.2020 등)
- 색 계조(Banding) 현상 최소화
3️⃣ 알파 채널 지원
- PNG처럼 투명 배경(Transparency) 가능
- UI 아이콘, 로고에 적합
4️⃣ 무손실(Lossless) / 손실(Lossy) 모두 지원
🔄 다른 포맷과 비교
| 포맷 | 압축 효율 | 투명도 | HDR | 브라우저 |
|---|---|---|---|---|
| JPEG | ❌ 낮음 | ❌ | ❌ | ✅ |
| PNG | ❌ 매우 큼 | ✅ | ❌ | ✅ |
| WebP | ✅ 좋음 | ✅ | ❌ | ✅ |
| AVIF | ⭐⭐⭐⭐⭐ | ✅ | ✅ | ⭐⭐⭐⭐ |
🌐 브라우저 지원 현황 (2025 기준)
- ✅ Chrome
- ✅ Edge
- ✅ Firefox
- ⚠️ Safari (macOS / iOS 최신 버전에서 지원, 구버전 미지원)
➡️ 실무에서는 fallback 전략 필수
🛠️ 실무 사용 예 (웹)
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="example">
</picture>
⚠️ 단점 / 주의점
- ❌ 인코딩 속도 느림 (AV1 특성)
- ❌ 서버 사이드 실시간 변환엔 부담
- ❌ 일부 구형 브라우저 미지원
✈️ 실무 관점 팁 (웹·문서·메일)
Smith님처럼 PDF / HTML / 이메일 렌더링을 다루는 경우:
- 📧 이메일: 아직 AVIF ❌ → JPEG/PNG 유지
- 🌐 웹(PC/모바일): AVIF + WebP fallback 적극 추천
- 📄 PDF 생성(wkhtmltopdf 등): AVIF 지원 안 되는 경우 많음
✅ 언제 AVIF를 쓰면 좋은가?
✔ 고해상도 이미지
✔ 모바일 웹 / CDN 트래픽 절감
✔ 이미지 중심 서비스
✔ 차세대 웹 프로젝트
❌ 이메일
❌ 레거시 시스템
❌ 실시간 이미지 생성