기술

브라우저에서 AVIF 압축이 작동하지 않을 수 있는 이유 — 그리고 배후에서 일어나는 일

March 31, 2026·7분 분량

AVIF이미지 형식브라우저 호환성Canvas API이미지 압축

AVIF는 JPEG보다 50% 더 작고 품질이 더 좋은 파일을 약속하는 차세대 이미지 형식입니다. 하지만 AVIF를 출력 형식으로 선택했는데 파일이 작아지기는커녕 더 커진다면 — 브라우저가 실제로 AVIF 인코딩을 지원하지 않는 것입니다.

AVIF란?

AVIF(AV1 Image File Format)는 AV1 비디오 코덱에 기반한 현대 이미지 형식입니다. Alliance for Open Media(AOMedia)가 개발했으며, 정말 인상적인 압축 능력을 제공합니다:

동급의 시각적 품질에서 JPEG보다 50% 더 작음
동급의 품질에서 WebP보다 20% 더 작음
HDR(하이 다이내믹 레인지) 콘텐츠 지원
투명도(알파 채널) 지원
애니메이션 지원 (GIF 대체)
로열티 프리 및 오픈소스

모든 면에서 AVIF는 웹 이미지의 미래입니다. 하지만 디코딩(보기)과 인코딩(만들기) 사이에는 중요한 구분이 있습니다.

디코딩 vs 인코딩: 핵심 차이

대부분의 현대 브라우저는 AVIF 이미지를 문제없이 표시할 수 있습니다. Chrome, Firefox, Safari, Edge 모두 AVIF 디코딩을 지원합니다 — 즉 웹 페이지에서 AVIF 이미지를 아무 문제 없이 보여줄 수 있습니다.

하지만 인코딩 — 실제로 처음부터 AVIF 파일을 만드는 것 — 은 완전히 다른 이야기입니다. 이는 브라우저가 Canvas API에서 AVIF 인코딩을 구현해야 하며, 계산 비용이 많이 들고 디코딩보다 구현하기 훨씬 어렵습니다.

브라우저 AVIF 인코딩 지원 (2026년 3월 기준)

브라우저	AVIF 디코딩	AVIF 인코딩 (canvas.toBlob)
Chrome 121+	✅ 예	✅ 예
Firefox	✅ 예	❌ 아니오
Safari	✅ 예	❌ 아니오
Edge	✅ 예	✅ 예 (Chromium 기반)
모바일 Chrome	✅ 예	✅ 예
모바일 Safari	✅ 예	❌ 아니오

브라우저가 AVIF 인코딩을 지원하지 않을 때 실제로 일어나는 일

여기서 일이 흥미롭고 — 혼란스러워집니다. AVIF를 출력 형식으로 선택했지만 브라우저가 AVIF를 인코딩할 수 없을 때, 다음이 일어납니다:

조용한 폴백

Canvas API의 canvas.toBlob(callback, 'image/avif', quality) 메서드는 AVIF 인코딩이 지원되지 않을 때 오류를 던지지 않습니다. 대신 몰래 다음을 합니다:

PNG 형식으로 조용히 폴백합니다
결과 blob의 MIME 유형이 image/avif 대신 image/png가 됩니다
파일은 .avif 확장자로 저장되지만 실제 내용은 PNG입니다

즉 당신의 "AVIF" 파일은 실제로 변장한 PNG입니다 — 그리고 PNG는 무손실 형식으로 일반적으로 원본 JPEG보다 3-5배 더 큰 파일을 생성합니다. 그래서 이미지가 5배 커진 것처럼 보이는 것입니다!

실제 영향

이런 시나리오를 상상해 보세요: 500KB JPEG 사진을 업로드하고 출력 형식으로 AVIF를 선택하며 약 250KB 파일을 기대합니다. 하지만 대신:

브라우저가 조용히 PNG 출력 → 파일이 2.5MB로
확장자는 .avif라고 하지만 내용은 PNG
확장자와 내용이 일치하지 않아 다른 도구가 열지 못할 수 있음
AVIF가 끔찍한 형식이라고 생각할 수 있지만, 실제로는 브라우저가 지원하지 않을 뿐

Img Zip이 AVIF 지원을 감지하는 방법

Img Zip은 브라우저가 AVIF 인코딩을 지원하는지 사전에 감지합니다. 1×1 픽셀의 작은 캔버스를 만들어 AVIF로 인코딩을 시도합니다:

canvas.toBlob(blob => {
  if (blob !== null && blob.type === 'image/avif') {
    // AVIF 인코딩이 지원됩니다!
  } else {
    // 지원되지 않음 — 경고 표시
  }
}, 'image/avif');

브라우저가 다른 유형(image/png 등)의 blob이나 null을 반환하면, AVIF 인코딩이 불가능하다고 판단하여 형식 선택기에 "브라우저 미지원" 경고를 명확히 표시합니다.

ICO 형식은요?

ICO(아이콘) 파일에도 비슷한 문제가 있습니다. Canvas API는 ICO 인코딩을 전혀 지원하지 않습니다 — 어떤 브라우저도 구현하지 않습니다. ICO를 출력으로 선택하면 브라우저는 PNG로 폴백하여, .ico 확장자지만 PNG 내용인 파일이 됩니다.

파비콘 용도로는 현대 브라우저가 실제로 .ico 확장자를 가진 PNG 파일을 받아들이므로, 이 우회 방법이 종종 작동합니다. 하지만 진정한 ICO 파일은 아닙니다.

브라우저가 AVIF를 지원하지 않으면 어떻게 해야 할까?

옵션 1: 대신 WebP 사용

WebP는 모든 현대 브라우저에서 디코딩과 인코딩 모두 지원됩니다. JPEG보다 25-35% 더 나은 압축을 제공합니다 — AVIF의 50%에는 못 미치지만 여전히 우수하며 보편적으로 지원됩니다.

옵션 2: Chromium 기반 브라우저로 전환

AVIF 인코딩이 중요하다면, Chrome 121+와 Edge(Chromium 기반)가 현재 최고의 지원을 제공합니다. 둘 다 Canvas API를 통해 AVIF를 인코딩할 수 있습니다.

옵션 3: 데스크톱 소프트웨어 사용

전문 AVIF 인코딩을 위해서는 squoosh(Google 자체 도구), libavif, 또는 AVIF 플러그인이 있는 Photoshop 같은 전용 데스크톱 도구가 브라우저 지원 여부와 관계없이 안정적인 인코딩을 제공합니다.

AVIF 브라우저 지원의 미래

좋은 소식은 AVIF 인코딩 지원이 확대되고 있다는 것입니다. AV1 코덱이 (비디오 스트리밍 채택에 힘입어) 더 보편화됨에 따라, 브라우저 공급업체들이 인코딩 지원에 더 많이 투자하고 있습니다. Firefox와 Safari가 향후 업데이트에서 AVIF Canvas 인코딩을 추가할 것으로 예상합니다.

모든 주요 브라우저가 AVIF 인코딩을 지원하게 되면, Img Zip 같은 브라우저 기반 도구가 모두에게 AVIF 압축을 제공할 수 있을 것입니다 — 소프트웨어 설치 없이 절대적으로 최고의 이미지 최적화를요.

결론

AVIF는 놀라운 형식이지만, 브라우저 인코딩 지원은 아직 따라잡는 중입니다. AVIF를 선택할 때 "브라우저 미지원" 경고가 나와도 걱정하지 마세요 — 버그가 아니라 현재 브라우저의 한계입니다. 신뢰할 수 있는 대안으로 WebP를 사용하거나, 완전한 AVIF 인코딩 지원을 위해 Chromium 기반 브라우저로 전환하세요.

Img Zip은 항상 브라우저가 할 수 있는 일과 없는 일을 투명하게 알려주어, 예상치 못한 결과를 겪지 않도록 합니다.

지금 바로 이미지 압축해 보세요 — 브라우저가 지원하는 것을 자동으로 감지합니다.

Ready to compress your images?

Try Img Zip — free, private, and no sign-up required.

Start Compressing →