성능 개선을 위한 AVIF 이미지 포맷 - (1) (ft. 인프콘)

 

 

 

 

인프콘에 나오더라


인프콘 2024의 이동욱 개발자님은 인프런 레거시 작업을 하며 여러 개선 사례를 공유했다.

초반에 인프런의 국제화를 목표로 함을 언급하는데, 이때 트래픽은 동일한데 계속해서 상승하는 환율로 인한 서버 문제를 언급한다.

이어서 따라서 비용을 줄이고자 트래픽을 가만히 둘 수 없어 시도한 작업 중 하나가 이미지 트래픽을 줄이는 방식이었고 이를 통해 avif 확장자를 언급한다.

 

 

AVIF 확장자란


AV1 비디오 코텍을 기반으로 한 차세대 이미지 포맷이다. 

압축 방식이 효율적인지라, 높은 품질을 유지하면서도 상대적으로 작은 파일 크기를 저장할 수 있게 한다. 얼만큼 효율적이고 얼만큼 높은 품질을 유지해주냐면

 

- JPEG 대비 최대 50% 까지의 파일 크기 감소와 더불어 동일 화질 유지

- PNG에서만 가능하던 투명도 조절 가능, GIF와 유사한 애니메이션 이미지 제작 가능

- HDR 및 WCG(넓은 색 영역) 지원

 

위와 같은 장점으로 특히 넷플릭스에서 AVIF가 JPEG보다 더 나은 압축 효율성 뿐만 아니라 더 나은 세부 묘사 보존, 더 적은 차단 아티팩트, 자연 이미지 .. 등등을 보였다

 

그러나 단점이 있다면

1. 완벽하지 못한 플랫폼 지원

포맷인지라 모든 브라우저와 플랫폼에서 완벽하게 지원되지 않는다. 크롬, 파이어폭스, 오페다 등 주요 브라우저에서는 지원이 되지만 사파리 같은 경우 지원이 제한적이다. 하지만 2020년 크롬 지원 이후 연달아 파이어폭스, IOS, Sfari 일부 등등.. 계속해서 확장되고 있는 상황이다.

2. 압축기술로 인한 자원 요구

 압축 기술이 오히려 인코딩, 디코딩 시 연산 자원을 요구하므로써 처리 시간을 증가시킬 수 있으므로, 저사양의 서버가 이미지 처리를 맡았거나 저사양 디바이스에서 해당 이미지의 압축을 풀게 된다면 오히려 병목의 원인이 될 것이다.

 

 

 

SpringBoot에서 쓰고자한다면

 

 

ImageMagick – Mastering Digital Image Alchemy

ImageMagick is a powerful, open-source software suite for creating, editing, converting, and manipulating images in over 200 formats. Ideal for web developers, graphic designers, and researchers, it offers versatile tools for image processing, including ba

imagemagick.org

 

이미지 처리 라이브러리가 있다. ImageMagick(IM4Java)를 사용하거나, Skaffold를 쓸 수 있다. 그러니까 주말에 한 번 써보쟈.

 

 

 

 

 

 

 

Refence

 

 

AVIF 이미지 제공  |  Google Codelabs

이 페이지는 Cloud Translation API를 통해 번역되었습니다. AVIF 이미지 제공 1. 소개 이미지는 웹페이지를 로드하는 데 필요한 평균 바이트의 60%이상을 차지합니다. AVIF를 사용하면 이미지를 더 작게

codelabs.developers.google.com

 

 

AVIF for Next-Generation Image Coding

By Aditya Mavlankar, Jan de Cock, Cyril Concolato, Kyle Swanson, Anush Moorthy and Anne Aaron

web.archive.org