WEBP, AVIF 리소스 비교

우선 각 파일 형식에 대한 설명이 필요하다.

WEBP는 무엇이고 AVIF는 무엇일까?

 

이 두 가지를 설명하기 전 가장 흔하게 봐왔던 JPG, PNG의 특징을 나열하겠다.

JPG는 손실압축방식으로 손실로 인해 PNG보다 작은 사이즈를 가진다.

PNG는 무손실압축방식으로 알파 채널(투명도)을 지원한다.

 

WEBP는 2010년에 구글이 개발한 이미지 포맷이다.

AVIF는 2019년에 구글, 아마존, 마이크로소프트, Cisco, Mozilla, Netfilx 등의 대기업들이 공동 개발한 형식이다.

AV1의 동영상 압축 기술을 이미지의 적용한 것으로 HDR 색상을 지원한다.

 

레퍼런스를 찾아본 결과는 AVIF가 비교적 최근에 나와 범용성은 떨어지나 전체적으로 성능이 좋다고 되어있어 정말로 그런지 확인해보았다.

 

우선 첫 번째로 범용성은 하단 링크를 통해 확인하였다.

https://caniuse.com/?search=AVIF → 94.35%

https://caniuse.com/?search=webp → 96.81%

해당 링크에 따르면 WEBP는 모든 브라우저 중 96.81% 호환이 되며,

AVIF는 94.35% 호환이 된다.

 

그래도 비교적 높은 호환성을 가지고 있고, ALT로 WEBP를 선택한다고 하더라도 대체될 가능성이 적어보인다.

따라서 범용성을 기준으로는 메리트가 높지 않았고 WEBP와 AVIF의 성능 차이에 따라 채택하면 될 것 같았다.

 

그래서 두 번째로 성능 테스트를 진행하였다.

아래 표처럼 Lossless, 100%, 75%, 50% 손실률로 나누어 용량을 비교해보았다.

 

TEST 1 (149KB, png)

구분 (단위: KB)	Lossless	100%	75%	50%
AVIF	399 (+162%)	140 (-8%)	81.5 (-47%)	59.5 (-61%)
WEBP	57.3 (-62%)	174 (+14%)	88.8 (-42%)	76.1 (-50%)

 

TEST 2 (561KB, png)

구분 (단위: KB)	Lossless	100%	75%	50%
AVIF	2549 (+334%)	526 (+8%)	285 (-50%)	206 (-64%)
WEBP	146 (-75%)	877 (+53%)	466 (-19%)	409 (+29%)

 

 

두 번의 테스트에서 흥미로운 점을 발견하였다.

손실압축률이 높아질수록 AVIF의 효율이 더 좋았으나 무손실압축에서는 WEBP가 더 우세한 성능을 보였다.

해당 이유를 찾고 싶어 여러모로 서치를 해보았는데, 미숙한 탓인지 근거를 알지 못했다.

 

테스트가 우연의 일치로 일관성을 보여주었을 가능성이 있으니 대량의 데이터로 테스트해본 자료를 찾아보았다.

https://www.reddit.com/r/AV1/comments/aabqdc/lossless_compression_test_png_vs_webp_vs_avif/

From the AV1 community on Reddit: Lossless compression test: PNG vs WebP vs AVIF dataset

 

상단의 링크를 보면 총 304개의 스크린샷으로 각 확장자별 Lossless 기준 용량 테스트를 진행한 자료가 있다.

 

자료를 자세히 들여다보면, Input PNG가 원본이고 우측의 초록, 빨간색이 있는 표가 원본 용량과 비교했을 때 배율을 뜻한다.

2.000은 원본 용량보다 2배 더 높게 변환되었다는 것이고, 0.500은 원본보다 1/2로 줄었다는 의미이다.

 

이 표를 보고 자체적으로 진행한 테스트와 일관성이 있다고 보였다.

내가 진행했던 테스트에서도 Lossless에선 AVIF 용량이 확 튀는 현상이 있었는데, 여기에서도 마찬가지로 AVIF 용량이 높게 변환되었다.

 

레퍼런스만 보고 'AVIF가 가장 최근에 나왔으니 성능이 제일 좋구나'라고 생각하고 AVIF 확장자를 채택하였으면 오히려 더 많은 리소스를 투입하게 되는 악영향을 줄 수도 있었다.

 

대량의 테스트가 손실압축 50%로 진행이 되었다면 AVIF가 더 좋은 퍼포먼스를 내었을 수도 있겠다는 생각이 들었다.

하지만 WEBP Lossless와 AVIF 50%의 용량 차이가 크지 않기 때문에 원본 화질을 고려한다면 WEBP Lossless로 채택하는 게 효율적으로 보여진다.