AVIF, WebP

AVIF, WebP

AVIF와 WebP는 이미지 파일 포맷으로, 웹 환경에서 이미지를 더 효율적으로 전송하고 표시하기 위해 사용됩니다. 각각 장단점과 특징이 있으며, 최신 웹 퍼포먼스 최적화에서 중요한 역할을 합니다.

1. WebP (웹피)

• 구글(Google)이 개발한 이미지 포맷 (2010년 공개)
• 기반 기술: VP8 비디오 코덱을 이미지용으로 변형
• 장점:
  • JPEG보다 최대 25~34% 더 나은 압축률 (같은 품질 기준)
  • 손실/무손실 압축 지원
  • 투명도(알파 채널) 지원 (PNG 대체 가능)
  • 애니메이션 지원 (GIF 대체 가능)
• 단점:
  • AVIF보다는 압축 효율이 낮음
  • 일부 오래된 브라우저에서는 미지원

2. AVIF (AV1 Image File Format)

• AOM(Alliance for Open Media)가 개발 (2019년경부터 점차 확산)
• 기반 기술: AV1 비디오 코덱
• 장점:
  • JPEG, PNG, WebP보다 훨씬 뛰어난 압축 효율 (최대 50% 이상)
  • HDR, 10bit 색상, 넓은 색 영역 등 고급 이미지 표현 가능
  • 손실/무손실 압축, 투명도, 애니메이션 지원
• 단점:
  • 인코딩 속도가 느림 (CPU 리소스를 더 많이 사용)
  • 브라우저 및 툴 호환성이 WebP보다 아직은 떨어짐 (하지만 점차 개선 중)

 

사용 팁

• WebP는 대부분의 사이트에서 기본 최적화 포맷으로 사용되고 있음.
• AVIF는 최신 환경에서 더 나은 압축을 위해 점차 도입되고 있음.
• 브라우저 호환성을 고려해 <picture> 태그 등을 사용하여 다중 포맷 대응 가능:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="예시 이미지">
</picture>

압축 효율 & 화질 비교

포맷	압축 유형	파일 크기 (예시)	화질 유지력	투명도 지원	애니메이션 지원	색상 깊이
JPEG	손실 압축	120 KB	중간 (노이즈 있음)	❌	❌	8bit
PNG	무손실 압축	300 KB 이상	매우 우수	✅	❌	8bit 또는 24bit
WebP	손실/무손실	85 KB	우수	✅	✅	8bit
AVIF	손실/무손실	60 KB	매우 우수	✅	✅	10bit+

파일 크기 예시: 동일한 1000×600 이미지 기준
투명도(알파 채널) 및 애니메이션은 WebP, AVIF에서 모두 지원됨
AVIF는 HDR, 넓은 색역(P3) 등도 지원해 고화질 이미지에 유리

브라우저 지원 현황 (2025년 기준)

브라우저	JPEG	PNG	WebP	AVIF
Chrome (모바일/PC)	✅	✅	✅	✅
Firefox	✅	✅	✅	✅
Safari (macOS, iOS)	✅	✅	✅	✅ (macOS 13+, iOS 16+)
Edge	✅	✅	✅	✅
Opera	✅	✅	✅	✅
IE 11 이하	✅	✅	❌	❌

 

AVIF는 최근 몇 년 사이에 빠르게 확산되었으며, 2025년 현재 주요 브라우저 모두 지원 중입니다.
iOS 16 이상부터 AVIF 지원 → 구형 아이폰/아이패드는 확인 필요.

요약 가이드

용도	추천 포맷	이유
일반 웹 이미지	WebP	압축률 좋고 브라우저 호환성 우수
고품질/미래지향적 이미지	AVIF	최상의 압축 효율과 화질, HDR 지원
고정밀 투명 이미지 (UI 등)	PNG	무손실 압축, 픽셀 정확도 유지
레거시 지원이 필요한 경우	JPEG/PNG	구형 브라우저 호환성 확보용