AVIF vs WebP, 압축률보다 먼저 확인할 브라우저 호환성
AVIF가 WebP보다 압축률이 좋다는 글을 보고 사이트 이미지를 전부 AVIF로 바꿨는데, 정작 이메일로 보낸 이미지나 특정 브라우저에서 사진이 안 보인다는 얘기를 들었다면 포맷 자체보다 확인 순서가 잘못됐을 가능성이 큽니다. 이 글은 AVIF가 실제로 어떤 이미지에서 유리한지, 그리고 브라우저·플랫폼별 지원 여부를 직접 확인하는 방법을 정리합니다.
요약 ① AVIF는 사진처럼 색과 질감이 복잡한 이미지에서 WebP보다 작아지는 경우가 많지만, 단색·텍스트 위주 이미지에서는 오히려 더 커질 수 있습니다 ② 주요 브라우저 대부분이 AVIF를 지원하지만 이메일 클라이언트·인앱 브라우저·구형 기기는 별도로 확인해야 합니다 ③ picture 요소로 AVIF, WebP, 원본을 순서대로 나열해두면 어떤 환경에서도 이미지가 완전히 깨지지는 않습니다
압축률 좋다는 말만 믿고 전체 이미지를 바꾸면 생기는 문제
구글 페이지스피드 인사이트 같은 진단 도구에서 "차세대 이미지 포맷을 사용하세요"라는 경고를 받으면 검색부터 하게 됩니다. 검색 결과 상당수가 AVIF가 WebP보다 압축률이 좋다고 소개하기 때문에, 별다른 검증 없이 사이트 이미지를 전부 AVIF 하나로 교체하는 경우가 많습니다.
문제는 그다음입니다. 뉴스레터에 넣은 이미지가 일부 구독자에게 안 보인다거나, 특정 인앱 브라우저나 구형 기기에서 사진이 깨져 보인다는 문의가 들어오는데, 원인은 대부분 AVIF 단독으로만 넣어두고 다른 포맷으로의 대체 경로를 만들어두지 않았기 때문입니다.
더 헷갈리는 부분은 압축률 우위도 절대적이지 않다는 점입니다. AVIF가 항상 더 작은 것이 아니라 이미지 종류에 따라 결과가 뒤집히는 경우가 있는데, 이 차이를 모르고 전체 이미지에 일괄 적용하면 오히려 용량이 늘어나는 이미지도 섞여 들어갑니다.
브라우저 지원과 실제 압축률을 직접 확인하는 방법
가장 안전한 방법은 AVIF 하나만 믿지 않고 여러 포맷을 순서대로 제공하는 것입니다. 이미지 태그를 picture 요소로 감싸고 그 안에 source 태그를 type이 image/avif인 것, type이 image/webp인 것 순서로 나열한 뒤 마지막에 jpg나 png 원본을 img 태그로 넣어두면, 브라우저는 위에서부터 자신이 지원하는 형식을 찾아 사용하고 아무것도 지원하지 않으면 원본을 대신 보여줍니다.
브라우저 지원 현황은 시점마다 계속 바뀌므로 특정 버전 숫자를 외워두기보다는 caniuse 같은 사이트에서 avif와 webp를 각각 검색해 현재 기준으로 어떤 브라우저와 버전이 지원하는지 직접 확인하는 습관이 더 정확합니다. 또한 이메일 클라이언트, 사내 인트라넷, 특정 인앱 브라우저처럼 일반 브라우저 지원표에 안 잡히는 환경은 실제 사용 기기에서 직접 열어보고 별도로 확인해야 합니다.
압축률 비교도 마찬가지로 남의 글이 아니라 내 이미지로 직접 확인하는 편이 정확합니다. 같은 원본을 같은 화질 기준으로 AVIF와 WebP 각각으로 변환한 뒤 결과 파일 용량을 나란히 놓고 비교하면, 사진인지 아이콘인지에 따라 어느 쪽이 더 작은지 눈으로 바로 확인할 수 있습니다.
저희 도구로 확인하기. 페이지를 열어보면 지금 쓰는 브라우저가 AVIF 인코딩을 지원하는지부터 바로 알려줍니다. 지원하는 브라우저라면 JPG나 PNG를 업로드해 품질을 조정하며 원본 대비 용량이 얼마나 줄었는지 그 자리에서 확인할 수 있습니다.
가입 없이 무료로, 업로드한 이미지를 바로 AVIF로 변환해 용량을 비교해볼 수 있습니다.
자주 막히는 지점
| 상황 | 왜 그런지 |
|---|---|
| 이메일 뉴스레터에 넣은 이미지가 일부 수신자에게 깨짐 | 이메일 클라이언트는 자체 렌더링 엔진을 쓰며 AVIF 디코더가 없는 경우가 아직 많습니다 |
| 구형 사파리나 오래된 기기에서 이미지가 안 보임 | AVIF 디코딩 지원이 상대적으로 늦게 추가돼 그 이전 버전에서는 아예 표시하지 못합니다 |
| 카카오톡 등 인앱 브라우저에서만 유독 안 뜸 | 인앱 브라우저는 기기 기본 브라우저와 다른 자체 웹뷰 버전을 쓰기 때문에 지원 여부가 따로 갈립니다 |
| 로고나 아이콘 이미지를 AVIF로 바꿨더니 오히려 용량이 커짐 | AVIF의 블록 기반 압축은 사진 같은 복잡한 질감에 유리하고 단순한 도형·텍스트에는 비효율적일 수 있습니다 |
| 이미지 변환(빌드) 파이프라인이 유독 느려짐 | AVIF 인코딩은 WebP보다 계산량이 많아 같은 장수를 처리해도 시간이 더 걸립니다 |
정리
AVIF는 사진처럼 색과 질감이 복잡한 이미지에서 WebP보다 작아지는 경우가 많지만 절대적인 우위는 아닙니다. 단색이나 텍스트 위주 이미지는 오히려 WebP나 PNG가 더 작을 수 있으므로 이미지 종류별로 직접 비교하는 편이 안전합니다. 브라우저 지원은 이미 넓지만 이메일, 인앱 브라우저, 구형 기기는 예외가 있어 picture 요소로 AVIF, WebP, 원본을 순서대로 대체 제공해야 합니다. 최신 지원 현황은 고정된 숫자로 외우기보다 필요할 때마다 caniuse 같은 곳에서 직접 확인하는 것이 가장 정확합니다.
가입 없이 무료로, 업로드한 이미지를 바로 AVIF로 변환해 용량을 비교해볼 수 있습니다.
자주 묻는 질문
AVIF와 WebP를 둘 다 지원하지 않는 브라우저에서는 이미지가 아예 안 보이나요?
picture 요소의 마지막 img 태그에 원본 jpg나 png를 넣어두면 두 포맷을 모두 지원하지 않는 환경에서도 그 원본이 대신 표시되므로 완전히 깨지지는 않습니다. 다만 fallback 없이 img 태그의 src에 AVIF 파일 하나만 직접 넣어뒀다면 미지원 환경에서는 그대로 빈 자리로 보입니다.
AVIF가 WebP보다 항상 용량이 작나요?
아닙니다. 사진처럼 색상이 복잡하고 그라데이션이 많은 이미지에서는 AVIF가 더 작아지는 경우가 많지만, 단색이 많거나 글자·직선이 많은 이미지에서는 반대로 WebP나 PNG가 더 작을 수 있습니다. 포맷을 정하기 전에 같은 원본으로 두 결과물을 직접 만들어 용량을 비교하는 것이 가장 확실합니다.
지금 시점에 AVIF를 실무에 써도 괜찮은가요?
주요 데스크톱·모바일 브라우저 대부분은 이미 AVIF를 지원하지만 지원 시점과 범위는 계속 바뀌므로 caniuse 같은 사이트에서 현재 기준을 직접 확인하고, 이메일이나 사내 시스템처럼 브라우저가 아닌 환경도 함께 점검한 뒤 picture 요소로 원본 포맷을 대체 경로로 남겨두는 방식을 권장합니다.