AVIF와 WebP, 실무자를 위한 선택 가이드

먼저 결론부터: 둘 중 하나만 고를 필요는 없습니다

AVIF와 WebP는 모두 JPEG·PNG보다 효율적인 웹용 래스터 포맷입니다. 하지만 포맷의 우열은 이미지의 종류, 목표 브라우저, CDN 또는 이미지 파이프라인에 따라 달라집니다.

실무에서 가장 안정적인 전략은 ‘단일 포맷 전환’이 아니라 콘텐츠 협상입니다. 지원하는 브라우저에는 AVIF를, 그렇지 않으면 WebP를, 마지막에는 원본 JPEG·PNG를 제공하면 각 사용자가 처리할 수 있는 최선의 파일을 받습니다.

AVIF와 WebP의 핵심 차이

AVIF는 AV1 코덱을 사용하는 이미지 포맷으로, 같은 시각 품질에서 더 작은 파일을 만들 가능성이 큽니다. 특히 사진, 그라데이션, 어두운 장면처럼 전송량의 영향이 큰 이미지에서 이점이 잘 드러납니다.

WebP는 손실·무손실 압축, 투명도, 애니메이션을 지원하면서도 브라우저와 도구 생태계가 성숙했습니다. 파일 크기 최저점보다 배포 예측 가능성과 빠른 인코딩이 중요한 경우 WebP가 좋은 기본값입니다.

• AVIF: 일반적으로 더 나은 압축 효율, 높은 인코딩 비용, 폴백 설계 필요
• WebP: 충분히 작은 파일, 빠른 처리, 넓은 호환성과 운영 편의

상황별 선택 가이드

사진 중심의 콘텐츠 사이트나 상품 상세 페이지라면 AVIF를 우선 시험해 보세요. 다만 품질 설정을 낮춰 파일 크기만 줄이면 윤곽선과 질감이 먼저 무너질 수 있으므로, 동일한 원본에서 AVIF·WebP·JPEG를 나란히 비교해야 합니다.

로고, 아이콘, UI 스크린샷처럼 투명 배경과 선명한 모서리가 중요한 이미지는 WebP 무손실 또는 SVG를 먼저 검토하세요. 텍스트가 들어간 이미지는 압축 아티팩트가 사용성 문제로 이어지기 쉽습니다.

`<picture>`로 폴백을 명시하는 방법

브라우저가 지원하지 않는 포맷을 만나면 이미지를 표시하지 못할 수 있습니다. `<picture>`의 `source` 순서를 AVIF → WebP → JPEG·PNG로 두면 브라우저가 이해하는 첫 번째 소스를 선택합니다.

`srcset`에는 실제 렌더링 크기에 맞는 여러 폭을 제공하고, `sizes`에는 레이아웃에서 이미지가 차지하는 폭을 알려주세요. 포맷만 바꿔도 원본이 화면보다 지나치게 크면 전송량 문제는 남습니다.

<picture>
  <source
    type="image/avif"
    srcset="hero-640.avif 640w, hero-1280.avif 1280w"
  />
  <source
    type="image/webp"
    srcset="hero-640.webp 640w, hero-1280.webp 1280w"
  />
  <img
    src="hero-1280.jpg"
    srcset="hero-640.jpg 640w, hero-1280.jpg 1280w"
    sizes="(max-width: 768px) 100vw, 70vw"
    width="1280"
    height="720"
    alt="제품을 사용하는 장면"
  />
</picture>

측정은 포맷이 아니라 사용자 경험을 기준으로

포맷 비교의 기준은 ‘몇 퍼센트 작아졌는가’ 하나가 아닙니다. LCP 이미지의 실제 전송 크기, 디코딩 시간, 인코딩 시간, 캐시 적중률, 깨진 이미지 비율을 함께 확인해야 합니다.

같은 품질이라는 말도 도구와 이미지에 따라 달라집니다. 팀에서 자주 쓰는 사진·상품 컷·투명 그래픽을 대표 샘플로 정하고, 품질 슬라이더를 고정한 뒤 시각 검수와 네트워크 측정을 함께 진행하세요.

배포 전 체크리스트

• ✓ 원본 JPEG·PNG를 별도로 보관했는가?
• ✓ 동일한 원본으로 AVIF와 WebP를 비교했는가?
• ✓ 모바일·데스크톱 렌더링 폭에 맞는 `srcset`을 제공했는가?
• ✓ AVIF → WebP → JPEG·PNG 폴백이 동작하는가?
• ✓ LCP, 전송 크기, 디코딩·인코딩 시간을 배포 전후로 확인했는가?
• ✓ 텍스트·로고·투명 영역의 시각 품질을 사람이 검수했는가?

자주 묻는 질문