WebP vs AVIF: 2026년에는 어떤 이미지 형식을 써야 할까?
작성자: @SoNiceInfo · 게시일: 2026. 9. 22. (수정일: 2026. 9. 24.)
WebP와 AVIF 중 무엇을 쓸지에 대한 짧은 답은 둘 다 내보내서 <picture> 요소로 제공하는 것입니다. AVIF를 먼저, 그다음 WebP를 두고, 마지막 대체 이미지로 JPEG나 PNG를 지정하면, 지원하는 브라우저는 가장 작은 파일을 받고 그 밖의 환경에서도 이미지가 정상적으로 표시됩니다. 한 가지 형식만 제공할 수 있다면 호환성과 인코딩 속도를 중시할 때는 WebP를, 최대한의 절감과 HDR, 10/12비트 심도가 필요할 때는 AVIF를 고르세요.
WebP vs AVIF 비교표
WebP는 VP8 동영상 코덱을 바탕으로 한 Google의 이미지 형식이고, AVIF는 AV1 동영상 코덱을 바탕으로 한 이미지 형식입니다. 둘 다 손실 압축과 무손실 압축, 투명도, 애니메이션을 지원합니다. 차이는 압축 효율, 비트 심도, 인코딩 속도에 있습니다.
| 항목 | JPEG | WebP | AVIF |
|---|---|---|---|
| 압축률(손실, 같은 화질) | 기준 | 약 25~35% 작음 | 약 50% 작음 |
| 무손실 압축 | 불가 | 가능(PNG보다 약 26% 작음) | 가능 |
| 투명도 / 애니메이션 | 불가 | 가능 | 가능 |
| 10비트 / 12비트 심도 | 불가 | 불가(8비트) | 가능 |
| HDR / 광색역 | 불가 | 제한적 | 완전 지원 |
| 인코딩 속도 | 빠름 | 빠름 | 눈에 띄게 느림 |
| 최대 크기 | 65,535 × 65,535px | 16,383 × 16,383px | WebP보다 큰 이미지도 처리 가능 |
| 프로그레시브 렌더링 | 가능 | 불가 | 불가 |
| 브라우저 지원 | 전체 | 모든 주요 브라우저(Safari는 macOS 11 / iOS 14 이상) | 모든 주요 브라우저(Safari는 macOS 13 / iOS 16 이상) |
압축률 수치는 공개된 비교 연구에서 얻은 대략적인 기준이며, 이미지의 내용과 인코더 설정에 따라 달라집니다.
실측 예: JPEG 한 장을 WebP와 AVIF로
1600×1064px의 JPEG 사진(230KB)을 Mac에서 명령줄 인코더로 변환한 결과입니다.
# WebP (cwebp 1.6.0)
cwebp -q 80 in.jpg -o out.webp # 230 KB -> 112 KB
# AVIF (avifenc 1.4.2)
avifenc -q 60 -s 6 in.jpg out.avif # 230 KB -> 108 KB둘 다 원본 JPEG의 절반도 안 되는 크기가 되었습니다. 다만 이것은 이미지 한 장의 결과이며, 두 품질 설정은 보이는 화질을 맞춘 것이 아니라는 점에 유의하세요. 품질 값의 의미는 인코더마다 다르므로, 실제 사이트에서는 변환한 이미지를 눈으로 비교한 뒤 설정을 정하는 것이 확실합니다.
WebP를 골라야 하는 경우
- 오래된 브라우저와 OS 버전까지 지원해야 할 때 — Safari는 macOS 11 / iOS 14부터 WebP를 표시하므로 AVIF보다 지원 범위가 넓습니다.
- 많은 이미지를 자주 변환할 때 — 인코딩이 빨라서 빌드와 업로드 시간이 짧게 유지됩니다.
- 로고, 스크린샷, 선화를 무손실로 더 작게 만들고 싶을 때 — 무손실 WebP는 PNG보다 약 26% 작습니다.
- 애니메이션 GIF를 대체할 때 — 애니메이션 WebP는 풀컬러이며 폭넓게 지원됩니다.
Mac에서 PNG, JPG, HEIC, GIF 파일이 든 폴더를 WebP로 변환하려면 Mac용 WebP 일괄 변환 앱 WebP Converter.를 무료로 시작할 수 있습니다.
AVIF를 골라야 하는 경우
- 전송 크기를 최대한 줄이고 싶을 때 — 사진이 많은 페이지라면 비슷한 화질에서 JPEG보다 약 50% 작아질 것으로 기대할 수 있습니다.
- HDR이나 광색역 사진을 제공할 때 — 10비트와 12비트 심도는 8비트 WebP의 부드러운 그러데이션에 나타나는 밴딩을 막아 줍니다.
- 낮은 비트레이트에서의 화질이 중요할 때 — 강하게 압축해도 블록 노이즈가 적게 생깁니다.
- 미리 한 번만 변환할 때 — 느린 인코딩이 훨씬 덜 문제가 됩니다.
PNG, JPG, HEIC 파일을 AVIF로 일괄 변환하려면 Mac용 AVIF 일괄 변환 앱 AVIF Converter.를 사용해 보세요. 이 앱도 무료로 시작할 수 있습니다.
picture 요소로 AVIF와 WebP를 함께 제공하기
<picture> 안에 <source> 요소를 위에서부터 나열하면, 브라우저는 자신이 지원하는 첫 번째 형식을 고릅니다. 마지막의 <img>가 대체 이미지가 되므로 어떤 환경에서도 이미지가 표시됩니다.
<picture>
<source type="image/avif" srcset="/images/photo.avif" />
<source type="image/webp" srcset="/images/photo.webp" />
<img src="/images/photo.jpg" alt="Describe the photo" width="1600" height="1064" loading="lazy" />
</picture>width와 height를 지정하면 이미지를 불러오는 동안 레이아웃이 밀리는 현상(CLS)을 막을 수 있습니다. 첫 화면에 보이는 이미지가 LCP 요소라면 loading="lazy"를 붙이지 마세요.
WordPress의 지원 현황
WordPress는 버전 5.8부터 WebP 업로드를, 버전 6.5부터 AVIF 업로드를 지원합니다. 이전에 JPEG나 PNG로 업로드한 이미지는 자동으로 바뀌지 않으므로, 기존 자료는 따로 변환해서 교체해야 합니다. 또한 AVIF를 다루려면 서버의 이미지 라이브러리가 AVIF를 지원해야 합니다.
Mac에서 WebP와 AVIF로 변환하는 방법
가장 빠른 방법은 GUI 앱입니다. 이미지나 폴더를 드래그 앤 드롭해서 일괄 변환하고, 내보내기 전에 변환 전후의 화질을 눈으로 확인할 수 있습니다. 세 앱 모두 변환이 Mac 안에서 이루어지며, 아무것도 업로드할 필요가 없습니다.
- WebP가 필요할 때 — Mac용 WebP 일괄 변환 앱 WebP Converter.
- AVIF가 필요할 때 — Mac용 AVIF 일괄 변환 앱 AVIF Converter.
- 한 번에 WebP와 AVIF를 모두 만들고 싶을 때 — Mac용 이미지 일괄 변환 앱 Image Tool+는 여러 형식으로 동시에 내보낼 수 있습니다.
명령줄에서는 Homebrew로 cwebp와 avifenc를 설치합니다.
brew install webp libavif단계별 방법은 별도의 글에서 설명합니다.
모든 변환이 Mac 안에서 이루어집니다
용도별 추천
- 사진가와 포트폴리오 사이트 — AVIF를 먼저 두세요. 부드러운 그러데이션이나 HDR, 광색역 사진에서는 AVIF의 10비트 / 12비트 심도가 밴딩을 줄여 줍니다. 대체 이미지로 WebP를 준비하세요.
- 블로그와 기업 사이트 — 더 폭넓게 지원되고 인코딩이 빠른 WebP가 무난한 기본값입니다. 첫 화면에 보이는 큰 이미지에만 AVIF를 추가하면 전송 크기를 더 줄일 수 있습니다.
- 쇼핑몰 사이트 —
<picture>요소로 둘 다 제공하세요. 상품이 많으면 AVIF의 인코딩 시간이 쌓이므로, 대부분의 상품 이미지는 WebP로, 키 비주얼과 대표 이미지는 AVIF로 나누는 것이 현실적입니다. - 로고, 스크린샷, 선화 — 무손실 WebP(PNG보다 약 26% 작음)를 사용하거나 PNG를 그대로 두세요.
자주 묻는 질문
Q. WebP와 AVIF 중 어느 것을 써야 하나요?
둘 다 내보내서 picture 요소로 제공하세요. AVIF를 먼저, 그다음 WebP를 두고, 마지막 대체 이미지로 JPEG나 PNG를 지정합니다. 하나만 골라야 한다면 호환성과 인코딩 속도를 중시할 때는 WebP를, 파일 크기를 최대한 줄이고 싶거나 HDR과 10/12비트 심도가 필요할 때는 AVIF를 고르세요.
Q. AVIF는 WebP보다 얼마나 작나요?
비슷한 화질을 기준으로 한 대략적인 기준은, WebP가 JPEG보다 약 25~35%, AVIF가 JPEG보다 약 50% 작다는 것입니다. 실제 차이는 이미지와 인코더 설정에 따라 크게 달라집니다. 사진이나 부드러운 그러데이션에서는 AVIF가 유리한 경향이 있지만, 작은 아이콘이나 단순한 그래픽에서는 차이가 거의 없을 수도 있습니다.
Q. AVIF를 지원하지 않는 브라우저에서는 어떻게 되나요?
AVIF 파일만 가리키는 img 태그는 AVIF를 지원하지 않는 브라우저에서 아무것도 표시하지 않습니다. AVIF, WebP, JPEG 소스를 이 순서로 나열한 picture 요소를 쓰면 브라우저가 자신이 지원하는 첫 번째 형식을 고르므로, 모든 방문자에게 이미지가 표시됩니다.
Q. AVIF의 단점은 무엇인가요?
인코딩이 WebP나 JPEG보다 눈에 띄게 느리고, 프로그레시브 렌더링이 없으며, 오래된 OS나 앱에서는 파일을 열지 못할 수 있습니다. 빌드할 때마다 많은 이미지를 변환하는 작업 흐름에서는 인코딩 시간이 무시할 수 없게 됩니다.
Q. Mac에서 이미지를 WebP나 AVIF로 변환하려면 어떻게 하나요?
명령줄에서는 WebP에 cwebp, AVIF에 avifenc를 사용하며, 둘 다 Homebrew로 설치할 수 있습니다. 아무것도 업로드하지 않고 GUI로 일괄 변환하려면, WebP Converter.와 AVIF Converter.가 각각 한 가지 형식을 담당하고, Image Tool+는 하나의 앱에서 두 형식을 모두 내보냅니다.
정리
- 기본은
<picture>요소로 AVIF → WebP → JPEG/PNG 순서로 제공하는 것입니다. - 하나만 제공한다면 호환성과 인코딩 속도는 WebP, 파일 크기와 HDR / 10~12비트 심도는 AVIF입니다.
- 줄어드는 정도는 이미지마다 다르므로, 설정을 확정하기 전에 변환한 화질과 파일 크기를 확인하세요.