AVIF 이미지 포맷 이해 - 차세대 압축 기술의 모든 것

웹사이트가 느리다는 피드백, 한 번쯤 받아보셨을 겁니다. 원인을 파고들면 대부분 이미지에 닿습니다. 평균적인 웹페이지 용량의 절반 이상이 이미지이기 때문입니다. JPEG로 잘 압축했다고 생각해도, 고해상도 사진 한 장이 수백 KB를 차지하면 모바일 환경에서는 체감 속도가 확 떨어집니다. 이 문제를 정면으로 해결하려고 등장한 포맷이 AVIF입니다.

AVIF란 무엇인가

AVIF는 AV1 Image File Format의 약자입니다. 이름 그대로 AV1 동영상 코덱의 압축 기술을 정지 이미지에 적용한 포맷입니다. AV1은 구글, 아마존, 넷플릭스, 마이크로소프트 등이 참여한 비영리 단체 AOMedia(Alliance for Open Media)가 만든 로열티 프리 코덱입니다. 특허 비용 없이 누구나 자유롭게 사용할 수 있다는 점이 큰 강점입니다.

AVIF의 핵심은 동영상 한 프레임을 압축하는 정교한 기술을 사진 한 장에 그대로 쓴다는 데 있습니다. 그 결과 같은 화질을 유지하면서도 파일 크기를 크게 줄입니다. 단순히 용량만 작은 것이 아니라 다음 기능까지 한 포맷에 담고 있습니다.

• 투명도(알파 채널) 지원 - PNG처럼 배경이 투명한 이미지 표현 가능
• HDR과 와이드 컬러 개멋 - 10비트, 12비트 색상 심도로 더 풍부한 색 표현
• 애니메이션 지원 - GIF를 대체할 수 있는 움직이는 이미지
• 손실 압축과 무손실 압축 모두 지원

AVIF vs JPEG vs WebP 비교

이미지 포맷을 고를 때 가장 궁금한 건 결국 용량과 화질입니다. 대표적인 세 포맷을 같은 기준으로 비교하면 차이가 명확해집니다.

같은 사진을 비슷한 화질로 저장했을 때, AVIF는 JPEG의 절반 수준, WebP보다도 작은 용량을 보이는 경우가 많습니다. 특히 그라데이션이 많은 풍경 사진이나 색이 복잡한 이미지에서 차이가 두드러집니다.

이미지 한 장의 용량을 절반으로 줄인다는 건, 페이지 전체 로딩 시간과 모바일 데이터 사용량을 함께 줄인다는 뜻입니다. 화질 손해 없이 이게 가능하다는 점이 AVIF가 주목받는 핵심 이유입니다.

AVIF의 장점과 단점

분명한 장점

가장 큰 장점은 역시 압축 효율입니다. 같은 화질이라면 용량이 작고, 같은 용량이라면 화질이 더 좋습니다. 여기에 투명도, 애니메이션, HDR까지 한 포맷이 다 처리하니 PNG, GIF, JPEG를 상황별로 나눠 쓰던 번거로움이 줄어듭니다. 로열티가 없어 서비스 비용 부담도 없습니다.

알아둬야 할 단점

완벽한 포맷은 아닙니다. 실무에서 마주치는 단점은 다음과 같습니다.

• 인코딩 속도 - 압축이 정교한 만큼 변환에 시간이 더 걸립니다. 이미지가 수천 장이면 작업 시간이 길어집니다.
• 구형 환경 호환 - 오래된 브라우저나 일부 이미지 편집 프로그램은 AVIF를 열지 못합니다.
• 저용량 이미지에서는 이득이 작음 - 이미 아주 작은 아이콘 같은 경우 차이가 미미할 수 있습니다.

브라우저 지원 현황

2026년 기준으로 AVIF는 주요 브라우저 대부분에서 정상 동작합니다. 다만 지원이 시작된 시점은 제각각입니다.

• 크롬 - 2020년(85 버전)부터 지원, 현재 안정적
• 파이어폭스 - 2021년(93 버전)부터 지원
• 사파리 - 2023년(16.4 버전)부터 지원, 아이폰과 맥 포함
• 엣지 - 크롬 기반으로 동일하게 지원

즉 최근 몇 년 안에 출시된 기기와 브라우저라면 거의 문제가 없습니다. 다만 사파리는 비교적 늦게 합류한 만큼, 구형 아이폰 사용자가 많은 서비스라면 대체 포맷을 함께 준비하는 게 좋습니다. 실제 적용 전에는 자신의 방문자 환경 통계를 확인하고 결정하시길 권합니다.

AVIF 변환하고 활용하는 방법

AVIF로 바꾸는 방법은 여러 가지입니다. 가장 간편한 건 온라인 변환 도구입니다. JPEG나 PNG를 올리면 AVIF로 내려받을 수 있습니다. 더 많은 이미지를 다룬다면 명령줄 도구 avifenc나 이미지 처리 라이브러리(sharp 등)를 쓰면 일괄 변환이 가능합니다. 포토샵도 플러그인이나 최신 버전에서 AVIF 저장을 지원합니다.

웹에 적용할 때

실무에서는 아래처럼 <picture> 태그로 우선순위를 정해두는 방식이 가장 깔끔합니다.

• 첫 번째: AVIF 제공
• 두 번째: 미지원 시 WebP 제공
• 세 번째: 그것도 안 되면 JPEG 제공

이렇게 하면 최신 브라우저는 가벼운 AVIF를, 구형 환경은 익숙한 JPEG를 받아 누구도 깨진 이미지를 보지 않습니다.

이미지 데이터를 직접 다룰 때

아주 작은 이미지를 외부 파일 없이 HTML이나 CSS에 직접 박아 넣고 싶을 때가 있습니다. 이럴 때 이미지를 텍스트 문자열로 변환하는 Base64 인코더를 쓰면 데이터 URI 형태로 만들 수 있습니다. 다만 Base64는 변환 후 용량이 원본보다 약 33% 커지므로, 큰 AVIF 파일에는 적합하지 않고 작은 아이콘 정도에만 쓰는 게 좋습니다. 또 이미지 주소를 쿼리스트링에 담아 전달할 때 특수문자가 깨진다면 URL 인코더로 안전하게 처리할 수 있습니다.

지금 운영 중인 사이트가 무겁게 느껴진다면, 용량이 가장 큰 이미지 몇 장부터 AVIF로 바꿔보시길 권합니다. 그리고 <picture> 태그로 대체 포맷을 함께 걸어두면, 호환성 걱정 없이 로딩 속도만 챙길 수 있습니다.