AVIF : 보다 최적화된 이미지 포맷

 

 

 

AV! 이미지 포맷 로고

 

 

AV1(.avif) 이미지 파일 포맷
기본적으로 초압축된 이미지 타입이다.
이미 넷플릭스는 JPEG, PNG, 심지어 WebP 이미지 포맷 보다 퀄리티나 압축률이 뛰어난 .avif 를 고려해왔다.

 

Alliance for Open Media 에서 Google, Cisco 및 Xiph.org(Firefox 제작사인 Mozilla와 함께 작업)와 공동 으로 개발했으며, 이 형식은 오픈 소스이고 로열티가없는 이미지 형식으로 만들어졌다.

 

 

 

JPEG 및 WebP 와 비교

AVIF는 JPEG, WebP에 비해 이미지 파일 크기를 크게 줄여준다.
(JPEG 대비 50%, Webp 대비 20% 절감)

 

출처 :  https://reachlightspeed.com/blog/using-the-new-high-performance-avif-image-format-on-the-web-today/

 

모든 이미지 코덱 지원, 손실/무손실, 알파 채널(투명) 가능, GIF 같은 애니메이션 가능! 하다는 점에서 굉장히 사용폭이 넓다.

또한 HDR 색상을 지원하는 최초의 이미지 형식 중 하나다. 더 높은 밝기, 심도(color bit depth), 색역(color gamut)을 제공한다.

 

 

 

좋아 보인다. 그래서 사용 가능한가?

2020년 8월 25일 기준, 크롬85 버전에서 AVIF가 지원된다.
파이어폭스80 에서 사용하고 싶다면 feature flag 를 활성화 하면 된다. (곧 디폴트로 적용될 예정)

 

 

 

 

라이언 머리 위에 (JPEG나 WebP 말고) AVIF 라는 글자가 보인다면 지원하는 브라우저다.
크롬이나 파폭에서 안보인다면 크롬을 최신 버전으로 업데이트 하거나, 파이어폭스에서 about:config 로 들어가 image.avif.enabled 를 true 로 바꿔주자.

 

파이어폭스에서 AVIF 활성화

 

 

 

 

어떻게 만들 수 있는가?

다양한 옵션을 지원하는 이미지 압축 앱 Squoosh 를 이용하면 쉽게 만들 수 있다.

최근 구글 크롬 랩팀에서 AVIF 지원을 추가했다.

 

 

 

 

커맨드 라인에 익숙하다면 AOMedia 공식 라이브러리 libavif 를 사용해 인코딩/디코딩할 수 있다.
또한 Homebrew 와 MacOS를 사용하는 유저라면,

 

$ brew install joedrago/repo/
$ avifencavifenc --help

 

로 빠르게 설치 가능하다.

 

 

 

어떻게 사용하면 되는가?

모든 브라우저에서 AVIF 를 아직 사용할 수 있는것은 아니지만,

<picture> 를 사용하면 HTML 에서 구현할 수 있다.

 

<picture>
  <source srcset="img/photo.avif" type="image/avif">
  <source srcset="img/photo.webp" type="image/webp">
  <img src="img/photo.jpg" alt="Description of Photo">
</picture> 

 

<picture> 는 단계적 지원을 허용하기 때문에 순서대로 소스를 로드하고 브라우저가 지원하지 않을경우 fallback 으로 디폴트로 설정된 <img> 를 보여준다.

 

 

 

정리

당장 모든 이미지 소스를 .avif 로 바꾸긴 힘들것이다. 브라우저 지원율도 아직은 높지 않고..(사파리는 언급조차 되지 않았다.) 하지만

picture 를 사용해서 avif > webp > jpg 형태로 점진적으로 적용해보는건 좋은 방식인것 같다. 모바일웹 작업 할때 조금이라도 리소스를 줄이기 위해 노력해보자.