AVIF vs WebP vs JPEG XL: 이미지 포맷 대결

세 개의 이미지 포맷이 JPEG와 PNG 다음 자리를 두고 경합 중입니다: AVIF, WebP, JPEG XL. 셋 다 같은 품질에 더 작은 파일을 약속하고, 셋 다 실제 브라우저 지원을 가지고 있으며, 셋 다 적어도 하나의 큰 결함을 안고 있습니다. 이 글은 벤치마크를 다시 돌리지 않고도 옳은 선택을 할 수 있도록 실제 수치와 현실적인 트레이드오프를 정리합니다.

한 줄 평결

• 최강 압축: AVIF. 같은 시각적 품질에서 WebP보다 약 20%, JPEG보다 약 50% 작습니다.
• 최강 브라우저 지원: WebP. 2020년 이후 보편적.
• 최강 기술 설계: JPEG XL. JPEG에서 무손실 트랜스코드, 와이드 컬러, 디코드 비용 없음. 2023년 Google이 Chrome에서 지원을 빼면서 발이 묶였습니다.
• 히어로 이미지엔 AVIF, 나머지는 WebP.

압축 수치

Cloudinary, Mozilla, IETF가 사진 콘텐츠에 대해 독립적인 벤치마크를 돌렸습니다. 약 5,000장의 테스트 이미지 전반에 걸친 합의:

이미지마다 편차는 큽니다 — JPEG XL은 다이내믹 레인지가 큰 사진에서, AVIF는 평탄 영역과 그라데이션에서, WebP는 컨테이너 오버헤드가 영향을 주는 매우 낮은 비트레이트에서 강합니다. 그러나 순서는 안정적입니다: JPEG XL ≥ AVIF > WebP > JPEG.

브라우저 지원 — 결정적 요소

절반의 사용자가 깨진 이미지 아이콘을 본다면 압축은 의미가 없습니다. 2026년 각 포맷의 위치:

• WebP: 글로벌 98%+. 모든 에버그린 브라우저, 이미지를 렌더링하는 모든 모던 이메일 클라이언트. 예외는 오래된 기업용 Outlook.
• AVIF: 글로벌 약 96%. Chrome, Edge, Firefox는 2021년 이후, Safari는 16 (2022년 9월) 이후. 옛날 iOS와 한두 개 특수 브라우저는 디코드하지 않습니다.
• JPEG XL: 글로벌 약 25%. Safari (17 이후). Firefox는 플래그 뒤. Chrome은 2023년 "관심 부족"을 이유로 지원을 제거했습니다 — 채택을 얼린 논쟁적 결정. Chrome 없이 이 포맷은 기본값이 될 수 없습니다.

인코드/디코드 비용

압축은 런타임에서 공짜가 아닙니다:

• WebP: 양쪽 모두 빠릅니다. 1080p 이미지 디코드에 100ms는 평범합니다.
• AVIF: 인코드가 악명 높게 느립니다(기본 설정에서 한 장당 수 초). 디코드는 합리적. aom-av1 같은 모던 인코더가 개선했지만, WebP의 5~10배 인코드 시간을 예상하세요. CI에서 수천 자산을 트랜스코드할 때 중요합니다.
• JPEG XL: 양쪽 모두 WebP와 비슷.

색, 비트 깊이, 애니메이션

WebP는 채널당 8비트, sRGB 전용. 웹에는 충분하지만 사진에는 한계.

AVIF는 10비트, 12비트, 와이드 컬러(Display P3, Rec. 2020), HDR을 지원. 사진, 디자인 포트폴리오, 컬러 매니지드 디스플레이로 가는 모든 이미지에 의미 있습니다.

JPEG XL은 더 나아갑니다: 16비트, 기존 JPEG에서의 무손실 트랜스코드(JPEG → JPEG XL → JPEG를 재인코딩 없이 왕복 가능), 점진적 디코딩. 이 포맷의 기술적 명분 — JPEG 능력의 엄밀한 상위 집합 입니다.

애니메이션: AVIF 지원(AV1 비디오 코덱의 확장), WebP 지원. JPEG XL도 지원하지만 애니 JPEG XL 디코더를 출시한 브라우저가 없습니다.

결정 트리

• 브랜드 핵심 히어로 이미지: AVIF를 먼저, WebP fallback, 최후 수단으로 JPEG/PNG. <picture>를 쓰세요. 200KB 자산에서 20% 절감은 페이지 뷰당 40KB입니다.
• 일반 웹사이트 이미지: WebP. 인코드/디코드 스토리가 단순하고, 도구가 성숙 했고, JPEG/PNG 대비 절감만으로도 이미 충분합니다.
• 사진 포트폴리오: AVIF. 와이드 컬러와 비트 깊이가 의미 있고, 청중은 모던 브라우저를 씁니다.
• 이메일: 여전히 JPEG/PNG. 새 포맷 어느 것도 메일 클라이언트 커버리지가 없습니다.
• JPEG XL을 쓰고 싶은 모든 곳: 대신 AVIF를 쓰세요. 75%의 사용자가 디코드 못하면 기술적 장점은 의미가 없습니다.

<picture>를 쓰는 실전 셋업

가장 안전한 패턴은 셋 다 제공하고 브라우저가 고르게 하는 것:

<picture>
<source type="image/avif" srcset="hero.avif">
<source type="image/webp" srcset="hero.webp">
<img src="hero.jpg" alt="...">
</picture>

브라우저는 위에서 아래로 훑고, 디코드 가능한 첫 포맷을 선택해 그 변형만 다운로드합니다. CI에서 세 인코드 변형을 만드는 오버헤드는 실재하지만, 디스크는 싸고 자산당 한 번만 인코드 됩니다.

결론

2026년의 실용적 선택은 히어로는 AVIF, 나머지는 WebP, JPEG/PNG는 fallback입니다. JPEG XL은 우리가 승자였길 바랐던 포맷입니다 — 대부분의 지표에서 AVIF보다 측정 가능하게 우수합니다 — 그러나 주요 브라우저가 디코드하지 않으면 포맷이 아닙니다. 벤치마크 헤드라인이 아닌 지원 매트릭스를 기준으로 선택하세요.