WebP vs AVIF: 인코딩, 압축 및 브라우저 지원

WebP는 예측 잔차 코딩을 기반으로 하는 VP8 인트라 인코딩을 사용합니다. 이미지를 16x16 휘도 블록과 해당 색차 블록으로 나누고 4가지 인트라 예측 모드만 제공하며, 인코딩 과정이 비교적 단순하고 계산 복잡도가 낮습니다.

AVIF는 AV1 인트라 인코딩을 사용하며 4x4부터 64x64까지 가변 크기 블록 분할을 지원하고 최대 56개의 인트라 예측 방향을 제공하며 각도 예측, 방향성 예측 등 새로운 모드를 추가하여 이미지의 로컬 텍스처 디테일을 더 정확하게 맞출 수 있습니다.

VP8 인트라 인코딩은 인루프 필터링 최적화를 사용하지 않습니다. AV1 인트라 인코딩은 인루프 디블로킹 필터링과 노이즈 감소를 추가하여 압축으로 인한 블록 아티팩트와 등선 왜곡을 줄일 수 있으며, 동일 비트레이트에서 더 부드러운 주관적 화질을 얻을 수 있습니다.

국내 CDN 벤더의 공개 측정 데이터에 따르면, 동일한 주관적 화질에서 AVIF 파일 크기는 WebP보다 15% ~ 30% 더 작습니다. 자연 사진 이미지의 압축률 개선 효과가 벡터 및 그래픽 이미지보다 높습니다.

WebP 파일 크기는 기존 JPEG보다 25% ~ 35% 더 작습니다. AVIF는 고화질 사진 및 대형 이미지 시나리오에서 더 명확한 압축률 이점을 가집니다. 저품질 미리보기 시나리오에서는 두 형식의 압축률 차이가 10% 미만으로 좁아집니다.

현재 공개된 테스트 결과에서 동등 화질에서 AVIF가 WebP보다 파일 크기가 더 큰 사례는 기록되지 않았습니다. 단색 블록이 면적의 80% 이상을 차지하는 그래픽 이미지에서만 두 형식의 압축률 차이가 5% 미만입니다.

두 형식 모두 알파 채널과 애니메이션을 지원하지만 세부 구현에 차이가 있습니다. WebP는 8비트 알파 투명도를 지원하는 반면, AV1은 10비트 및 12비트 알파 투명도를 지원하여 더 부드러운 투명도 그라데이션을 구현합니다.

HDR 지원 측면에서 WebP는 정적 HDR의 기본 저장만 지원하며 전체 PQ 및 HLG 디코딩 적응이 널리 구현되지 않았습니다. AVIF는 기본적으로 10비트 색상 심도, HDR10 및 넓은 색 영역을 지원하며 현재의 넓은 색 영역 디스플레이 장치에 적합합니다.

애니메이션 지원 측면에서 WebP는 단일 프레임 인코딩 복잡도가 낮고 재생 디코딩 리소스 사용량이 AVIF 애니메이션보다 낮습니다. 동일 화질에서 AVIF 애니메이션의 파일 크기는 WebP 애니메이션보다 약 20% 더 작습니다.

2024년 기준 전 세계 WebP의 브라우저 지원 커버리지는 96%를 초과하며 대부분의 주류 브라우저 버전에서 WebP 이미지를 정상적으로 파싱하고 표시할 수 있습니다.

AVIF의 브라우저 지원 커버리지는 약 84%로 WebP보다 낮습니다. 16.4 미만의 Safari 버전을 실행하는 구형 macOS 및 iOS 장치에서는 AVIF 이미지가 정상적으로 표시되지 않습니다.

전자상거래 제품 대형 이미지 및 마케팅 배너 시나리오에서는 WebP 폴백 솔루션과 함께 AVIF를 우선 사용하십시오. 이 방법은 구형 브라우저 사용자를 커버하면서 스토리지 및 대역폭 비용을 줄이고 고트래픽 시나리오에서 비용 제어를 보장합니다.

제품 목록 썸네일 및 제품 상세 페이지 아이콘 시나리오에서는 WebP로도 요구 사항을 충분히 충족합니다. 이 시나리오에서는 개별 이미지 크기가 이미 작아 압축률 개선으로 인한 이득이 제한적이며 WebP가 디코딩 속도가 더 빠릅니다.

제품 표시 애니메이션 이미지 및 광고 애니메이션 이미지의 경우 대역폭이 우선이고 호환성 요구 사항이 낮으면 AVIF를 선택하고 넓은 커버리지와 높은 디코딩 성능이 필요하면 WebP를 선택하십시오. 사전 변환 형식 테스트를 완료하려면 OKfmt의 WebP to AVIF 변환기를 사용할 수 있습니다.