AVIF vs WebP - 더 작은 파일이 늘 정답은 아닙니다

한번은 부끄러울 만큼 긴 저녁을 같은 히어로 이미지를 WebP와 AVIF로 놓고 A/B 하며 보냈습니다. 브라우저 탭 두 개를 왔다 갔다 하며 눈으로 잡아낼 수 있는 차이를 찾으려 했습니다. AVIF가 31% 작았습니다. 저는 둘을 구분할 수 없었습니다. 공짜 돈을 주운 기분으로 앉아 있다가, 이미지 200장짜리 폴더에 일괄 작업을 돌리고서 함정을 다시 떠올렸습니다.

AVIF는 대부분의 경우 더 작은 파일입니다. 이건 사실이고 알아 둘 값어치가 있습니다. 하지만 「작다」는 스프레드시트의 한 열일 뿐이고, 결정은 사실 다른 열들에 살고 있습니다.

AVIF가 이기는 곳

AVIF는 AV1 영상 코덱 위에 세워졌고, WebP보다 진짜로 더 새롭고 영리한 설계입니다. 사진 계열 콘텐츠에서는 같은 화질을 기준으로 WebP보다 보통 15~30% 작게 나옵니다. 하늘, 피부, 부드러운 그림자 같은 매끄러운 그러데이션을, 옛 코덱들이 뭉개 놓는 블록 잡티 없이 처리합니다. WebP가 못 하는 HDR과 넓은 색역도 지원합니다. WebP와 마찬가지로 완전한 알파 채널도 유지합니다.

앞서 말한 그 폴더에서 뽑은 대략적인 수치입니다. 모두 제가 차이를 못 잡아낸 품질 설정에서요.

마지막 줄을 다시 보세요. 평평하고 단순한 그래픽에서는 AVIF가 오히려 더 커질 때가 있습니다. AVIF의 영리함은 사진의 복잡함에 맞춰져 있어서, 2색 일러스트에서는 씹을 게 없습니다. 거기서는 WebP나 심지어 PNG가 이길 수 있습니다.

AVIF가 대가로 요구하는 것

용량 이득은 공짜가 아닙니다. 실제 대가 두 가지입니다.

인코딩 시간. AVIF는 압축이 극적으로 느립니다. 같은 이미지라도 AVIF 인코딩은 WebP보다 몇 배 오래 걸릴 수 있습니다. 「즉시」와 「파일마다 몇 초씩 기다림」의 차이가 되기도 합니다. 히어로 이미지 한 장이면 상관없습니다. 200장 일괄이면 매 초가 느껴집니다. WebP는 인코딩이 너무 빨라서 사실상 공짜입니다.

디코딩과 지원. 이제 사람들이 실제로 쓰는 모든 브라우저가 AVIF를 디코딩합니다. Chrome은 2020년부터, Firefox는 얼마 지나지 않아, Safari는 2022년 말 16 버전부터요. 2026년 기준 실제 트래픽의 대다수를 덮습니다. 하지만 「지원됨」과 「보편적」은 같은 말이 아닙니다. WebP는 몇 년 더 긴 보급 기간을 등에 업고 있고, 저사양 폰에서 더 빠르게 디코딩됩니다. 저사양 폰에서 AV1 디코딩은 눈에 띌 만큼 배터리와 CPU를 잡아먹을 수 있습니다. 일부 메일 클라이언트와 오래된 임베디드 웹뷰는 여전히 AVIF를 아예 못 다룹니다.

20%라는 질문

그래서 진짜 결정은 이걸로 좁혀집니다. 그 추가 약 20%가 이 이미지, 이 자리에서 중요한가.

랜딩 페이지의 큰 히어로 이미지, 즉 방문자마다 내려받는 하나의 무거운 자원이라면, 그렇습니다. 첫 화면 그리기를 좌우하는 그 파일에서 100KB를 깎는 일은, 한 번만 치르면 되는 느린 인코딩과 바꿀 값어치가 있습니다. 제가 아는 AVIF의 가장 뚜렷한 사례입니다.

썸네일 격자, 블로그 본문의 스크린샷, 또는 이미 WebP로 약 50KB 아래인 것이라면, 답은 보통 아니오입니다. 작은 수의 20%는 더 작은 수입니다. 인코딩 시간과 약간의 호환성을 내주고, 아무도 기다리지 않던 바이트를 아낀 셈입니다. 거기서는 WebP가 더 차분한 기본값입니다.

제가 AVIF를 굳이 안 쓰는 때

파일이 최신 브라우저 바깥 어딘가로 간다면, 즉 메일 뉴스레터, 낡은 CMS, 제가 통제하지 못하는 협력사 시스템이라면, AVIF에 걸지 않습니다. WebP를 쓰거나, 위험을 아예 없애고 싶으면 평범한 JPG를 씁니다. 렌더링되지 않는 가장 작은 파일은 아무 값어치가 없습니다.

그리고 평평한 그래픽, 로고, 선화는 AVIF로 인코딩하지 않습니다. 코덱이 그걸 위한 게 아니고, 거기서 WebP에 지는 걸 충분히 봐서 이제 시도하지 않습니다.

제가 실제로 판단하는 방법

솔직한 작업 흐름은 이렇습니다. 무겁고 사진 계열인 건 AVIF로 변환하고, 가볍고 단순하며 널리 뿌려지는 건 WebP로 둡니다. 모든 걸 지배하는 하나의 형식은 없습니다. 이미지마다 고르는 겁니다.

직접 비교해 보고 싶다면 둘 다 여기 브라우저 안에서 돌아갑니다. 기존 WebP 자원을 더 짜내려면 WebP를 AVIF로, 원본에서 곧장 가려면 PNG를 AVIF로 쓰면 됩니다. 어디로도 업로드되지 않고, 인코딩은 내 기기에서 일어납니다. 그래서 AVIF의 느림도 직접 체감하게 됩니다. 그건 결함이 아닙니다. 더 작은 파일을 위해 코덱이 눈앞에서 더 많은 일을 하는 것입니다.

자기 히어로 이미지를 둘 다에 넣어 돌려 보세요. 차이가 안 보이고 AVIF가 눈에 띄게 작다면, 답이 나온 겁니다. 다만 다음 200장에도 답이 같으리라고 지레짐작하지는 마세요.