AVIF 포맷 해설 — WebP 대비 30% 절감을 운영 가능하게 만드는 `<picture>` 패턴
Tomoda Hinata도구 작성자 및 유지 관리자게시 2026년 4월 26일약 4분 읽기
AVIF는 AV1 키프레임을 HEIF 컨테이너에 넣은 포맷으로 동일 화질 WebP보다 20–30% 더 작습니다. 다만 Outlook 데스크톱, Edge 메일, 일부 구형 Android Webview, macOS Mail 프리뷰 등에서 디코드되지 않으므로 단독이 아니라 `<picture>`로 WebP 폴백을 두고 사용하는 것이 표준입니다.
이 가이드에서 사용하는 도구
AVIF는 기술적으로 무엇인가?
AVIF는 AV1 키프레임 1장을 HEIF(iPhone HEIC와 같은) 컨테이너에 담은 포맷. AV1은 VP9·HEVC의 후계로 AOM이 로열티 프리를 목표로 설계. 비디오급 코덱이라 JPG의 1992년 DCT나 WebP의 VP8 인트라보다 더 풍부한 도구를 갖고 있고, 그것이 20–30% 추가 절감을 만든다.
브라우저 지원 — AVIF가 실패하는 곳
Chrome 85(2020), Firefox 93(2021), Safari 16.4(2023), Edge 121(2024)이 기본 디코드. 2026 글로벌 트래픽 ~92%. 나머지 8%는 Outlook 데스크톱(Word 기반, AVIF 디코더 없음), Edge 메일 프리뷰, 구형 Android Webview, macOS 13 이하 Mail.app, 그리고 일부 IoT/특수 브라우저.
`<picture>` 폴백 패턴
운영에 안전한 AVIF는 명시적 폴백을 갖춘 `<picture>` 안에 둡니다. AVIF→WebP→JPG 순서. 브라우저는 위에서 아래로 평가해 첫 번째 디코드 가능한 소스를 사용. JS 없이 모던 → AVIF, 구형 → WebP, 최악 → JPG의 3단계가 자동으로 작동.
AVIF가 가치 있는 경우
세 가지 적합 — 고트래픽 콘텐츠 사이트의 히어로(LCP 절감), e커머스 상품 갤러리(누적 대역폭), 사진 포트폴리오(작은 크기 화질). 과한 경우 — 저트래픽 블로그(인코딩 비용 > 절감), 이메일 템플릿(Outlook), 단명 SNS 업로드(플랫폼 재인코딩).
인코딩 비용과 빌드/런타임 분리
Q60 인코딩이 JPG Q82의 약 10배. 100장 워크스테이션 2–3분. 엣지 함수 10초 예산에선 타임아웃. 빌드/백그라운드 잡에서 굽고 업로드 임계 경로에는 두지 않음. 디코드는 50ms 이하로 빠름.
단계
약 2분 소요마스터 선택
가능하면 원본 PNG/RAW/TIFF. JPG만 있어도 무방 — AVIF는 중간 JPEG 입력에 강함.
AVIF 변환기 열기
파일을 드롭. 기본 품질 60이 사진에서 WebP를 이기는 적정점.
인코드
장당 5–15초 — WebP보다 느림.
`<picture>` 배선
AVIF 우선, WebP 폴백, JPG를 `<img>` 소스로.
| 포맷 | 파일 크기 | 인코딩 시간(M2) | 2026 브라우저 지원 |
|---|---|---|---|
| JPG 품질 82 | 245 KB | 0.1 초 | 100% |
| WebP 품질 82 | 165 KB | 0.4 초 | 98% |
| AVIF 품질 60 | 115 KB | 4.2 초 | 92% |
자주 묻는 질문
AVIF가 투명도 지원?
지원 — 풀 알파 + 10비트 알파.
애니메이션 AVIF가 있나요?
있지만(AVIS) 브라우저 지원은 정적 AVIF보다 좁아 현재 애니메이션은 WebP 우세.
HDR 지원?
지원 — 10/12비트 AVIF가 HDR10 메타데이터 운반.
여러 해상도는?
`<picture>` + 각 `<source>`의 srcset/sizes 결합.
AVIF가 JPG를 대체할까?
당분간 아니요. JPG의 만능 호환은 대체 불가.
브라우저 때문에 인코딩이 느린가요?
아니요. AV1 코덱 자체가 비쌉니다.
지금 사용해 보기
Ultra-light images with the modern AVIF format
AVIF Converter이 글은 AI 번역을 포함합니다. 오류가 있으면 알려 주세요.