AVIF는 웹에서 사용되는 가장 최신 주류 이미지 포맷입니다. JPEG와 WebP 모두보다 뛰어난 압축률을 제공하며, 동일한 시각적 품질에서 JPEG보다 40~50% 작고 WebP보다 약 20% 작은 파일을 생성합니다. 현재 전 세계 브라우저의 92% 이상에서 지원됩니다. 2019년에 표준화되어 2023년까지 주요 브라우저에서 폭넓게 지원되면서, AVIF는 오늘날 모든 웹 프로젝트에서 고려할 만한 실용적인 선택지가 되었습니다.

AVIF란 무엇인가?

AVIF는 AV1 Image File Format의 약자입니다. AV1 비디오 코덱에서 파생된 정지 이미지 및 애니메이션 포맷으로, 이미지를 AV1 비디오 스트림의 단일 인트라 코딩 프레임으로 인코딩합니다. AV1은 Google, Mozilla, Microsoft, Apple, Netflix, Amazon 등이 참여하는 컨소시엄인 Alliance for Open Media(AOMedia)가 개발했습니다. 이 코덱은 완전히 로열티 무료입니다 — 이것이 HEVC(HEIF/HEIC의 기반 코덱)와 관련된 특허 라이선스 비용을 피하기 위해 개발된 핵심 이유입니다.

AVIF는 본질적으로 AV1 비디오에서 추출한 단일 프레임이기 때문에, AV1 개발자들이 수년간 비디오 전송을 위해 정제한 모든 고급 압축 기술을 그대로 물려받습니다. 이 연구 투자가 AVIF를 정지 이미지만을 위해 설계된 다른 포맷들보다 훨씬 효율적으로 만드는 이유입니다.

AVIF vs JPEG vs WebP: 파일 크기 비교

독립적인 벤치마크들은 이미지 압축 효율성에서 일관되게 동일한 순위를 보여줍니다:

AVIF vs JPEG — 동일한 시각적 품질에서 AVIF 파일은 일반적으로 JPEG보다 40~50% 작습니다. 500 KB JPEG의 경우, AVIF 동등본은 흔히 250~300 KB입니다.
AVIF vs WebP — 동일한 품질에서 AVIF는 WebP보다 약 20% 작습니다. WebP가 이미 JPEG보다 25~35% 작으니, AVIF는 그 장점을 더욱 심화시킵니다.
AVIF vs JPEG XL — 두 포맷은 경쟁적이며, 어느 쪽도 모든 이미지 유형에서 일관된 우위를 갖지 않습니다. JPEG XL은 사진 이미지의 무손실 성능이 더 뛰어나고, AVIF는 매우 낮은 비트레이트(고도로 압축된 이미지)에서 앞섭니다.

한 가지 중요한 주의사항: AVIF 인코딩은 WebP나 JPEG보다 훨씬 느립니다. 동등한 품질 설정에서 AVIF 인코딩은 10~50배 더 오래 걸릴 수 있습니다. 정적 에셋의 빌드 타임 사전 생성에는 허용 가능하지만 — 실시간 즉석 인코딩에는 종종 비실용적입니다.

AVIF가 더 나은 압축을 달성하는 방법

AVIF의 압축 장점은 AV1 인트라 프레임 예측 엔진에서 비롯됩니다. 이 엔진은 JPEG(예측 없음)나 WebP의 VP8 코덱(휘도 블록에 대해 10가지 예측 모드 제공)이 사용하는 예측 방법보다 실질적으로 더 발전되어 있습니다. AV1은 블록당 60개 이상의 방향성 인트라 예측 모드와 다양한 비방향성 모드를 지원하여 — 훨씬 적은 비트로 이미지 내용을 표현할 수 있습니다.

고급 인트라 예측 — AV1은 미세한 방향성 모드(더 큰 블록의 경우 3° 간격으로 0°~180°)를 사용해 이웃 블록에서 각 코딩 블록을 예측합니다. 예측 후 잔차가 훨씬 작아져 인코딩에 필요한 비트가 줄어듭니다.
가변 블록 크기 — AV1은 4×4부터 128×128픽셀까지의 블록 크기를 지원합니다. 인코더는 균일한 영역에는 큰 블록을, 세밀한 디테일에는 작은 블록을 선택하여 각 영역에 최적의 크기를 사용합니다.
색도 서브샘플링 지원 — AVIF는 4:2:0, 4:2:2, 4:4:4 색도 서브샘플링을 기본 지원합니다. 사진의 경우 4:2:0(JPEG와 동일)이 일반적이고, 텍스트와 선명한 그래픽에는 4:4:4가 색상 정확도를 보존합니다.
필름 그레인 합성 — AV1에는 인코딩 중 소스에서 자연스러운 그레인을 제거하고 작은 파라미터 세트에서 디코딩 시 재구성하는 내장 필름 그레인 합성 도구가 있습니다. 이를 통해 이미지가 인위적으로 매끄럽게 보이지 않으면서도 비트를 절약합니다.

AVIF 기능적 장점

순수한 압축 외에도, AVIF는 구형 포맷들이 갖지 못한 기능들을 지원합니다:

HDR 및 광색역 — AVIF는 10비트 및 12비트 색심도를 지원하여 Display P3 및 Rec. 2020 색상 공간의 HDR 콘텐츠를 구현합니다. JPEG는 8비트로 제한되고, WebP도 웹 전달에서 8비트까지만 지원합니다.
알파 투명도 — WebP 및 PNG와 마찬가지로(JPEG와 달리), AVIF는 완전한 알파 채널 투명도를 지원합니다. 알파 플레인은 동일한 AV1 코덱으로 인코딩되어 PNG의 무손실 알파보다 더 나은 압축 효율을 제공합니다.
무손실 및 손실 모드 — AVIF는 두 가지 모두 지원합니다. 무손실 AVIF는 일반적인 이미지의 경우 무손실 WebP나 PNG보다 거의 작지 않지만, 옵션은 존재합니다.
애니메이션 — AVIF는 AVIS(AV1 Image Sequence) 컨테이너를 사용해 다중 프레임 애니메이션을 지원합니다. 애니메이션 AVIF 파일은 애니메이션 WebP나 GIF보다 훨씬 작을 수 있지만, 정지 AVIF보다도 인코딩이 더 느립니다.
색도 서브샘플링 모드 — 4:2:0, 4:2:2, 4:4:4 모두 지원되어 색상 디테일의 품질/크기 트레이드오프를 제어할 수 있습니다.

AVIF 브라우저 지원

2026년 현재, AVIF는 현대 플랫폼 전반에 걸쳐 폭넓은 브라우저 지원을 갖추고 있습니다:

Chrome — 버전 85부터 지원 (2020년 8월)
Firefox — 버전 93부터 지원 (2021년 10월)
Safari — 버전 16부터 지원 (2022년 9월, macOS Ventura / iOS 16)
Edge — 버전 121부터 지원 (2024년 1월, Chromium 기반)

2026년 현재 전 세계 브라우저 지원율은 약 92~93%입니다. AVIF를 지원하지 않는 브라우저는 Internet Explorer(더 이상 지원 안됨), 버전 16 이전의 구형 Safari, 그리고 일부 구형 Chromium 기반 모바일 브라우저입니다. 대부분의 웹 프로젝트에서 92% 지원은 충분합니다 — 특히 <picture> 요소에 WebP 또는 JPEG 폴백을 사용할 때 더욱 그렇습니다.

AVIF 인코딩 속도 트레이드오프

AVIF의 주요 실질적 단점은 인코딩 속도입니다. 압축 효율을 극대화하는 품질 설정에서 AVIF는 WebP보다 10~50배 느리게 인코딩될 수 있습니다. WebP 변환에 100ms가 걸리는 작업이 AVIF로는 1~5초가 걸릴 수 있습니다.

이것은 AVIF를 어떻게 사용해야 하는지에 대한 명확한 의미를 갖습니다:

빌드 타임 생성에 적합 — 빌드 프로세스 중에 AVIF 파일을 사전 생성한다면 (예: Next.js 빌드에서 sharp 사용), 인코딩 시간은 한 번만 지불하고 결과 파일은 캐싱됩니다. 이것이 이상적인 시나리오입니다.
실시간 즉석 인코딩에는 적합하지 않음 — 첫 번째 요청 시 이미지를 변환하는 이미지 CDN과 프록시는 WebP를 빠르게 처리할 수 있지만, AVIF는 허용할 수 없는 지연을 일으킬 수 있습니다. 대부분의 이미지 CDN은 이제 백그라운드 처리 및 캐싱과 함께 AVIF를 지원합니다.
속도 프리셋 사용 — libaom-av1과 libsvtav1 같은 인코더는 속도 프리셋(0~10)을 제공합니다. 더 빠른 프리셋(예: 6~8)을 사용하면 인코딩 시간을 3~10배 줄이고 파일 크기 패널티는 적습니다 — 대부분의 콘텐츠에 합리적인 트레이드오프입니다.

AVIF를 사용해야 하는 경우

AVIF가 올바른 선택인 경우:

빌드 타임에 정적 에셋을 사전 생성하는 경우 — 배포 중에 이미지 변형을 생성하는 e커머스 사이트, 블로그, 마케팅 페이지가 AVIF로 가장 큰 혜택을 받습니다. 파일 크기 절감이 직접 페이지 무게와 대역폭 비용을 줄입니다.
현대 브라우저를 사용하는 사용자층 — 분석 데이터가 트래픽의 95% 이상이 Chrome, Firefox, 최신 Safari에서 온다는 것을 보여준다면, 92%의 전 세계 지원 수치가 특정 사용자층에 더욱 유리해집니다.
사진 중심 사이트 — AVIF의 압축 이점은 사진 콘텐츠에서 가장 두드러집니다. 갤러리 사이트, 포트폴리오 페이지, 미디어가 많은 블로그에서 가장 큰 파일 크기 감소를 경험합니다.
e커머스 상품 이미지 — 상품 페이지는 종종 수십 개의 고품질 이미지를 제공합니다. 상품 이미지를 AVIF로 변환하면 페이지 뷰당 수백 킬로바이트의 페이지 무게를 줄여 Core Web Vitals 점수를 향상시킬 수 있습니다.

WebP를 사용해야 하는 경우

WebP가 더 나은 선택인 몇 가지 시나리오가 있습니다:

실시간 변환 — 즉석에서 이미지를 변환해야 하는 경우(예: 사용자 업로드, 동적 크기 조정), WebP의 인코딩 속도가 훨씬 더 실용적입니다.
더 넓은 호환성 요구사항 — 사용자층에 구형 Safari(16 이전) 사용자가 상당 비율 포함되어 있거나 97~98%에 가까운 브라우저 지원이 필요한 경우, WebP가 더 안전한 선택입니다. 2026년 현재 전 세계 지원율이 97% 이상입니다.
더 간단한 도구 체인 — WebP 인코딩은 거의 모든 이미지 처리 라이브러리에서 지원됩니다. ImageMagick이나 Pillow의 구형 버전에서 AVIF 지원은 없거나 제한적일 수 있습니다.

이미지를 AVIF로 변환하는 방법

PNG, JPEG, WebP 이미지를 AVIF로 변환하는 가장 쉬운 방법은 Picovert의 PNG to AVIF 변환기를 사용하는 것입니다. 완전히 브라우저에서 실행되며 — 어떤 서버에도 파일이 업로드되지 않고 — 몇 초 안에 변환됩니다. 다른 소스 포맷의 경우 일반 이미지 변환기를 사용하면 지원되는 모든 입력 포맷에서 AVIF를 출력 포맷으로 선택할 수 있습니다.

빌드 파이프라인에서 이미지를 처리하는 개발자에게는 sharp 라이브러리(Node.js)가 가장 일반적인 선택입니다:

const sharp = require('sharp')
await sharp('input.jpg')
  .avif({ quality: 60, effort: 4 })
  .toFile('output.avif')

effort 파라미터(0~9)는 속도/압축 트레이드오프를 제어합니다. 낮은 값은 빠르고 높은 값은 더 작은 파일을 생성합니다. 정적 빌드 파이프라인의 경우 effort 6~8이 합리적인 균형점입니다.

점진적 향상을 위한 HTML picture 요소

웹에서 AVIF를 제공할 때 권장되는 패턴은 폴백과 함께 HTML <picture> 요소를 사용하는 것입니다. 브라우저는 지원하는 첫 번째 소스를 선택합니다:

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="설명" width="800" height="600" />
</picture>

이 방식은 AVIF 가능 브라우저에게 가장 작은 파일을 제공하고, AVIF를 지원하지 않는 Chrome과 Firefox 사용자에게는 WebP로 폴백하며, 레거시 환경에서는 최종적으로 JPEG로 폴백합니다. <img> 태그의 width와 height 속성은 항상 레이아웃 이동(Core Web Vitals 지표)을 방지하기 위해 설정해야 합니다.

Next.js를 사용한다면 내장된 <Image> 컴포넌트가 Next.js 설정에 formats: ["image/avif", "image/webp"]를 설정하면 자동으로 AVIF 제공을 처리합니다.

오늘 이미지를 AVIF로 변환하려면 Picovert의 이미지 변환기로 포맷 변환을 하거나 이미지 압축기로 파일 크기를 줄이세요. 두 도구 모두 업로드 없이 브라우저에서 실행됩니다.