WebP와 AVIF: 알맞은 이미지 형식을 선택하고 시험하는 방법

일부 이미지와 품질 목표에서는 AVIF가 WebP보다 나을 수 있고, WebP는 더 빨리 인코딩되며 폭넓은 기존 흐름에 더 잘 맞을 수 있습니다. 확장자만으로 결과가 보장되지는 않습니다. 대표 출력, 호환성, 파이프라인 비용을 비교하고 사용자에게 필요한 대체 형식을 제공하세요.

두 포맷 한눈에 보기

WebP와 AVIF 모두 비디오 코덱에서 탄생했습니다. Google은 2010년에 WebM 비디오 포맷의 기반 기술인 VP8을 활용해 WebP를 출시했습니다. Alliance for Open Media는 2019년에 Google, Mozilla, Apple, Netflix 등이 공동 개발한 차세대 비디오 코덱 AV1을 기반으로 AVIF를 출시했습니다.

AV1의 더 새로운 코딩 도구는 압축을 개선할 수 있고, 더 단순하고 성숙한 WebP 구현은 처리 비용을 줄일 수 있습니다. 실제 인코딩과 디코딩 동작은 코덱 구현, 설정, 이미지 특징, 기기에 달려 있습니다.

압축률: 파일이 얼마나 작아지는가

벤치마크 결과는 이미지 집합, 인코더, 작업량 설정, 원본 이력, 품질 지표에 따라 달라집니다. 책임 있는 시험은 크기와 메타데이터 정책을 일정하게 유지하고 여러 시각 지표와 사람의 검토를 함께 비교합니다.

• AVIF — 사진, 그라데이션, HDR, 높은 비트 심도 흐름에서 좋은 결과를 낼 수 있지만 인코딩 비용이 클 수 있음
• WebP — 성숙한 도구와 더 낮은 운영 복잡성으로 효율적인 손실 또는 무손실 출력을 만들 수 있음

형식의 홍보 평균치를 개별 파일의 예측으로 사용하지 마세요. 같은 원본에서 둘 다 내보내고 비슷한 시각 품질을 선택하며 인코딩 시간, 디코딩 동작, 메타데이터, 대체 파일 전송까지 판단에 포함하세요.

사진이 아닌 자산은 사진 벤치마크와 다르게 동작할 수 있습니다. 단순 그래픽, 아이콘, 평면 일러스트는 지원되는 무손실 또는 근무손실 후보를 비교하세요. 팔레트, 알파, 인코더, 설정에 따라 어느 쪽도 이길 수 있습니다.

브라우저와 소프트웨어 지원

지원 표는 변하고 세계 점유율이 내 사용자와 같지는 않습니다. 대상 브라우저와 브라우저 외 소비자를 확인하세요. <picture> 요소는 AVIF, WebP 순으로 제공하고 JPEG를 마지막 <img> 대체 형식으로 둘 수 있습니다.

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

인코딩 속도와 도구 지원

비슷한 작업량 설정에서 WebP 인코더는 AVIF보다 연산이 적게 필요한 경우가 많지만 비율은 크게 달라집니다. CMS가 업로드 때나 큰 묶음으로 변환한다면 실제 배포한 라이브러리와 설정으로 처리량, 메모리, 대기 시간, 출력 품질을 측정하세요.

인코더 성능은 라이브러리와 버전마다 변합니다. 디코딩 비용도 크기, 비트 심도, 기기, 브라우저, 구현에 달려 있습니다. 차이가 느껴지지 않을 것이라 가정하지 말고 성능이 낮은 대상 기기에서도 시험하세요.

도구 지원은 넓지만 고르지 않습니다. 실제 사용하는 편집기, CMS, CDN 요금제, 브라우저 환경에서 가져오기, 내보내기, 애니메이션, 색상 프로필, 메타데이터, 자동 협상을 확인하세요.

기능 비교

AVIF는 WebP의 8비트 코딩을 넘어 더 높은 비트 심도, 광색역, HDR 신호를 표현할 수 있습니다. 그 기능이 색 정확도를 보장하지는 않습니다. 마스터링, 프로필, 메타데이터, 브라우저 동작, 화면 성능, 시험이 여전히 중요합니다.

어떤 포맷을 언제 사용할까

AVIF를 선택할 때:

• 이미지 파이프라인을 제어할 수 있고 폴백을 서빙할 수 있을 때
• 대표 AVIF 출력이 중요한 전송 또는 품질 병목을 개선함
• 높은 비트 심도나 HDR 같은 AVIF 기능이 필요하고 전체 색상 경로를 시험함
• CDN 또는 빌드 파이프라인이 검증된 변형을 올바르게 생성, 캐시, 협상함

WebP를 선택할 때:

• 측정된 인코더 처리량이나 운영 단순성에서 WebP가 유리함
• 지원 클라이언트가 WebP를 받고 추가 AVIF 변형이 정당화되지 않음
• 대표 그래픽이 WebP에서 바이트와 품질 목표를 달성함
• 이미 WebP를 제공 중이고 마이그레이션 비용 대비 효과가 낮을 때

측정된 이점이 작업을 정당화할 때 둘 다 사용:

<picture> 구성은 생성, 저장, 캐시, 마크업, 품질 검토 작업을 늘리지만 전달을 개선할 수 있습니다. CDN이 협상을 자동화해도 요금제 동작, 캐시 키, Vary 처리, 품질 설정, 대체 출력을 확인하고 “최적” 전달이라고 가정하지 마세요.

이미지를 직접 변환하는 방법

Vizua는 소프트웨어 설치 없이 브라우저에서 지원되는 WebP와 AVIF 출력을 만들 수 있습니다. 선택한 파일은 이미지 처리 서버로 전송되지 않지만 필요한 코드와 사이트 서비스는 네트워크를 사용할 수 있습니다.

• WebP 압축 — 기존 WebP 파일 용량 줄이기
• AVIF로 변환 — 지원되는 입력 이미지에서 AVIF 만들기
• JPG를 WebP로 — JPEG 사진을 WebP로 변환
• PNG를 WebP로 — PNG 그래픽을 WebP로 변환

JPEG 원본을 다룬다면 화질을 잃지 않고 이미지를 압축하는 방법에서 시작 설정 선택과 실제 출력 비교 방법을 확인하세요.

자주 묻는 질문