이커머스향 AVIF, WEBP 이미지 압축률 비교
마음에 드는 이미지 포맷(AVIF, WEBP, JPEG)의 비교 자료를 찾을 수 없었다. 그래서 컨설팅했던 브랜드몰의 실사례로 측정해보고, 개선시 고려해야할 점을 정리한다.
이커머스향 AVIF, WEBP 이미지 압축률 비교
마음에 드는 이미지 포맷(AVIF, WEBP, JPEG)의 비교 자료를 찾을 수 없었다. 그래서 컨설팅했던 브랜드몰의 실사례로 측정해보고, 개선시 고려해야할 점을 정리한다.
출처 — AVIF vs. WebP: How To Choose the Right Modern Image Format
TL;DR
- 원본 JPEG 기준 변환시 두 포맷 모두 최소 85% 이상 압축률 제공
- AVIF는 WEBP대비 30% 더 나은 압축률을 제공
- 열화된 JPEG 기준시 두 포맷 모두 50% 이상 압축률 제공
- WEBP는 해상도 제한, AVIF는 iOS/Safari 호환성 고려필요
들어가며
가장 보편적인 JPEG이라고 하더라도 대다수의 이커머스서는 이미 용인되는 수준의 열화 를 통해 가성비(?) 이미지를 제공하고 있다. (Optimize Images 참고)때문에 아래와 같이 비교군을 정리했다.
- 고객사에서 “원본”이라고 생각하는 이미지 기반 비교
- 매출이 높고 화질에 민감한 <여성의류>, <패션잡화> 카테고리 비교
- 불특정 이미지를 위해 불특정 셀러들이 제공하는 상품기술서 비교
여성의류
여성의류 는 모델의 피부톤, 원단, 색감 등 전시팀에서 가장 민감하게 보는 요소들 가득하다. 모바일 기준 BEST 50 상품의 첫번째 모델컷만 비교해 보았다.
원본 상태의 JPEG, AVIF, WEBP 압축률 비교
원본 JPEG 평균용량은 1,474 KB으로 화질 열화 없이 포맷 변환만 수행하였다.
- WEBP 변환시 -87.67%로 181KB 기대
- AVIF 변환시 -90.78%로 135KB 기대
원본 JPEG 기준 AVIF가 3% 더 높은 압축률을 보여준다.
이 결과로 WEBP, AVIF의 차이가 미비하다고 속단하면 안된다. 왜냐하면 우리가 보는 이미지는 대부분 눈치 못챌만큼 적당히 열화된 상태의 JPEG이기 때문이다.
최적화 상태의 JPEG, AVIF, WEBP 압축률 비교
90%에 육박할만큼의 압축률이 체감되지 않는 이유는 기준 이미지가 최적화된 JPEG이기 때문이다. 최적화된 JPEG은 385KB로, 원본 기준 72.33%가 절감된 상태로 노출된다. 이 이미지를 기준으로 해야 프로덕션 환경에서 이미지 포맷을 고도화하는 의사 결정을 할 수 있다.
- 원본을 WEBP 변환시, 최적화 JPEG보다 -57.94%로 161KB 기대
- 원본을 AVIF 변환시, 최적화 JPEG보다 -69.05%로 119KB 기대
원본 포맷변환만으로 최적화된 JPEG보다 50% 이상의 압축률을 얻을수 있다.
WEBP/AVIF 도 최적화 기법을 제공한다. 최적화된 포맷끼리의 비교가 프로덕션에서 트래픽 비용을 결정한다.
- WEBP 최적화 변환시 -68.50%로 121KB 기대 (최적화 효과: 24.8%)
- AVIF 최적화 변환시 -77.79%로 85KB 기대 (최적화 효과: 28.5%)
프로덕션 환경에서 AVIF포맷은 WEBP대비 약 30%(29.75%) 더 나은 압축률을 제공한다.
쿠팡/상품기술서
쿠팡 “패션의류/잡화” 기준 (25년 7월 30일) BEST 50 상품기술서의 첫 번째 이미지 컷만 비교해 보았다. 모두 쿠팡에 의해 최적화된 JPEG이다.
상품 대표이미지를 클릭하면 상품기술서가 노출된다.
WEBP 해상도 제한
먼저 맞닥뜨린 상황은 WEBP 최대 해상도 제한 이었다. 당초 목표로 했던 50개 중 9개의 상품이미지를 로 변환할 수 없었다.
최대 해상도 16K x 16K
상품기술서는 대부분 세로로 매우 길게 작성되기 때문에 해상도 제한은 치명적인 단점이 아닐 수 없다.
AVIF, WEBP 최적화 압축률 비교
WEBP 변환이 실패하지 않는 차순위 9개 상품을 보강하여 측정하였다. 다양한 셀러로부터 규격화되지 않은 이미지이기에 용량은 무의미하며 이미 최적화된 이미지를 기반으로 하였기 때문에 바로 최적화 비교를 수행하였다.
- WEBP 최적화 변환시 -59.1% 절감
- AVIF 최적화 변환시 -61.19% 절감
두 포맷 모두 제각각 열화된 JPEG 을 기준으로 했지만 50% 이상 월등한 압축효과를 확인할 수 있었다. WEBP 대비 AVIF 개선효과가 5%에 그친 것은 개발 단계에서 우리 팀이 “열화의 열화”를 막기 위한 정책을 넣었던 까닭도 있다. (아래 다시 다룬다.)
호환성과 디테일
많은 개발팀은 호환성=안정성을 이유로 다소 모호한 결정을 하지만 우리는 솔루션 관점에서 공격적인 접근을 취한다. 호환성은 최소 수년이 소요되는 빅벤더간의 “정략적인” 합의의 과정이고, 이 시간동안 비용은 우리 솔루션을 도입하는 고객에게 전가되기 때문이다.
열화의 열화
우리 고객들은 화질에 매~~~우 민감하다. “이번 버전 화질이 느낌적으로 구려요~ 회의시간 언제가 좋으세요? ^^” 실재로 이런 전화를 받는다.
- 80%로 열화된 JPEG을 80%의 WEBP/AVIF로 변환하면 0.8 X 0.8 = 0.64% 품질의 이미지가 도출된다.
원본 열화를 고려하지 않은 단순한 이미지 최적화는 끔찍한 결과를 낳는다. 때문에 원본 이미지에 따른 최적화 정도를 조정할 수 있도록 프로파일을 선택할 수 있도록 두고 블라인드 테스트를 진행한다.
WEBP 해상도 제한과 Fallback
WEBP는 분명 안전한 접근이지만 해상도 제한은 근본적인 한계다. 특히 앞서도 살펴봤지만 상품기술서나 리뷰, 고해상도, 파노라마 이미지등에서는 문제가 될 수 있다. 때문에 전면적용은 꺼림칙하다.
다행히 AVIF가 있어 이를 최우선으로 제안하지만, AVIF가 안될 때는 WEBP, WEBP가 안되면 JPEG으로 넘어가는 Fallback 시나리오가 존재해야 한다. 이미지를 열어보기 전까지 해상도 초과여부를 알 수 없기 때문에 생각보다 난이도가 있는 편이다. 우리 팀은 2가지 Fallback 접근을 진행하였다.
- 이미지를 분석할 여유(10~50ms 내외)과 <HTML> 수정시점이 주어 진다면 <Picture> 태그로 Fallback을 구현한다. 주로 상품 기술서처럼 불특정 고용량 이미지를 처리하는데 사용된다.
- 그렇지 않다면 <JavaScript + 실시간 이미지 엔진> 조합으로 실시간 Fallback 처리한다. 주로 메인 페이지나 검색처럼 상품 이미지가 나열된 페이지에 사용된다.
AVIF와 iOS/Safari
AVIF는 분명 이미지의 미래다. 언젠가 개선이 되리라 기대하지만 iOS/Safari에서는 호환성이 문제가 된다. 항상 이런 문제는 머리가 아닌 몸으로 배우게 된다.
요주의 인물
우리도 아직 iOS/Safari에는 의문이 있기에 Fallback 과정을 통해 WEBP를 제공한다. 행여나 “클라이언트 Accept 헤더만 보면 되는데?” 라고 의문을 가지실 수 있겠는데 세상은 그렇게 단순하지 않으니 다른 글에서 따로 풀도록 하겠다.
메타데이터
- post_id
- fe033904dae4
- slug
- 이커머스향-avif-webp-이미지-압축률-비교-fe033904dae4
- url
- https://medium.com/@woosikmoon/%EC%9D%B4%EC%BB%A4%EB%A8%B8%EC%8A%A4%ED%96%A5-avif-webp-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%95%95%EC%B6%95%EB%A5%A0-%EB%B9%84%EA%B5%90-fe033904dae4
- canonical_url
- https://medium.com/@woosikmoon/%EC%9D%B4%EC%BB%A4%EB%A8%B8%EC%8A%A4%ED%96%A5-avif-webp-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%95%95%EC%B6%95%EB%A5%A0-%EB%B9%84%EA%B5%90-fe033904dae4
- author_url
- https://medium.com/@woosikmoon
- status
- ok
- fetched_at
- 2026-07-18 06:54:35
