차세대 이미지 포맷 avif webp jpeg 화질 용량 비교

이미지 파일 포맷으로 jpeg, png를 많이 쓰지만 기술의 발전으로 차세대 이미지 포맷이 나오고 있죠.

대표적으로 구글이 개발한 webp, Alliance for Open Media의 avif 등이 차세대 이미지 포맷으로 각광받고 있습니다.

 

webp는 2010년에 처음 배포되어서 요즘 한창 쓰이고 있고, avif는 2019년에 최초 버전이 배포된 가장 최신 포맷입니다.

 

MS Windows, MacOS 등의 메이저 OS에 둘 다 기본으로 채택되었고, 대부분의 브라우저에서도 다 지원하고 있어 이제는 대중적으로 사용이 가능한 상태입니다.

 

다만, 보다 오래된 webp는 좀 더 대중적으로 쓰이고 있고, avif는 아직 모르는 사람도 많은 것 같습니다.

 

적용 사례

webp와 avif 모두 압축 효율이 높고 움짤도 지원하여 jpeg, png, gif 파일을 대체할 수 있는 차세대 이미지 포맷입니다.

 

webp는 구글에서 만들어서 구글이 적극 활용하고 홍보하고 있고 유튜브 썸네일도 webp로 되어있다고 합니다.

 

여기 티스토리에서도 webp를 지원하여 정적 이미지나 움짤 이미지 모두 잘 지원하고 있네요.

 

다만 네이버 블로그에서는 webp 파일의 업로드를 지원하지만 내부적으로 jpeg이나 gif로 변환하고 있어서 제대로 지원한다고 할 수는 없습니다.

 

avif는 넷플릭스에서 2020년 초반부터 영화 썸네일 이미지용으로 준비하고 있다고 하고 (나무위키), CMS 1위 솔루션인 워드프레스는 2024년 2월 출시한 6.5 버전부터 avif를 지원해서 별도 plugin 이 없이도 이용할 수 있습니다.

 

용량 비교

Imagick를 이용해서 bmp 파일을 jpeg, webp, avif로 변환해 보았습니다.

$ magick mogrify -format jpeg -quality <q>

$ magick mogrify -format avif -quality <q>

$ magick mogrify -format webp -quality <q>

 

품질 parameter인 -quality의 q 값은 30, 50, 80으로 하였습니다.

 

※ 원본 bmp 파일 용량: 36,578,978 bytes (= 34.88MB)

 

	q10 bytes (원본 대비 비율)	q30 bytes (비율)	q50 bytes (비율)	q80 bytes (비율)
jpeg	219,139 (0.59%)	630,608 (1.72%)	837,479 (2.289%)	1,222,631 (3.34%)
webp	210,676 (0.57%)	349,422 (0.95%)	498,290 (1.362%)	935,392 (2.55%)
avif	66,271 (0.18%)	161,772 (0.44%)	455,154 (1.244%)	994,732 (2.71%)

 

Q10 (jpeg, webp, avif)

 

Q10에서 jpeg은 뭉개짐이 무척 심합니다. avif는 Q10에서도 봐줄만하고 이때의 파일 사이즈는 66KB 밖에 되지 않습니다.

 

Q30 (jpeg, webp, avif)

 

Q30부터는 전체적으로 괜찮지만 역시 JPEG 파일이 뭉개짐이 가장 심하네요.

Q50 (jpeb, webp, avif)

 

Q50부터는 모두 봐줄 만합니다.

 

Q80 (jpeb, webp, avif)

 

Q80에서는 포맷 별 화질의 차이를 잘 느낄 수 없습니다.

 

정리

이미지 샘플 하나로 해서 착오가 있을 수 있으나 avif 파일이 저품질에서도 화질이 매우 좋음을 확인할 수 있었습니다.

 

avif의 경우 q10에서는 조금 뭉개짐이 보이고, q20 만 되어도 인터넷 사진으로 쓰기에 전혀 무리가 없어 보입니다.

 

개인적으로 avif 지원이 된다면 q20 정도로 인코딩하여 용량을 극적으로 줄여서 디스크 공간과 네트워크 전송을 줄이고자 합니다.

 

네이버 블로그에서는 아직 webp, avif 모두 지원하지 않고, 이미지 업로드 시 리사이즈는 시스템이 알아서 해주고 있으니 사용자가 특별히 할 일은 없고,

 

티스토리에서는 webp를 제대로 지원하니 가급적 webp로 올리는 것을 추천드립니다.

 

워드프레스 사용자께서는 워드프레스에서 avif를 공식적으로 지원하니 avif 적극 이용을 하시면 SEO에 도움이 될 것입니다.