생태계에서 AVIF가 채택된 방식에 관한 업데이트입니다.
AVIF는 높은 압축률, 효율적인 성능, 광범위한 채택으로 인해 웹에서 빠르게 인기를 얻고 있는 새로운 이미지 형식입니다. AVIF는 Alliance for Open Media에서 표준화한 AV1 동영상 코덱을 기반으로 하는 개방형 로열티 없는 이미지 형식입니다. 이 블로그 게시물에서는 AVIF가 생태계에 어떻게 채택되고 있는지, 그리고 개발자가 정지 이미지와 애니메이션에 AVIF를 사용할 때 어떤 성능 및 품질 이점을 기대할 수 있는지 간략히 설명합니다.
AVIF 생태계의 새로운 기능
Chrome, Firefox, Safari에 AVIF가 도입된 이후 웹에서 AVIF 사용이 꾸준히 증가하고 있습니다. 현재 거의 모든 브라우저가 AVIF를 지원합니다.
Chrome에서만 AVIF 사용량이 Chrome이 안정화 버전에서 AVIF 지원을 추가한 후 1년이 조금 넘는 기간 동안 약 1%로 증가했습니다.
Akamai, Cloudflare, Cloudinary, Imgix와 같은 여러 이미지 CDN에서 현재 AVIF 이미지를 제공하고 있습니다. AVIF 지원을 발표하는 블로그 게시물에서 Imgix는 JPEG에 비해 파일 크기가 60%, WebP에 비해 35% 절감되었다고 보고했습니다. 이러한 파일 크기 절감은 저장용량을 크게 절약할 뿐만 아니라 페이지 로드 속도를 높여 최대 콘텐츠 페인트 (LCP) 시간을 단축하는 데도 도움이 됩니다. LCP는 Core Web Vitals 중 하나이며 페이지에서 가장 큰 콘텐츠 블록이 얼마나 빨리 로드되었는지를 나타냅니다. 최신 코덱을 사용하여 이미지를 압축하는 것은 LCP를 줄이는 핵심 기법 중 하나입니다. Lighthouse는 웹사이트를 테스트하고 AVIF를 통해 얼마나 절약할 수 있는지 확인하는 데 유용한 Chrome 개발자 도구입니다.
WordPress는 전 세계에서 가장 인기 있는 웹사이트 플랫폼이며, 개발자가 이미지를 AVIF로 변환할 수 있는 다양한 플러그인이 있습니다. 예를 들면 다음과 같습니다.
직접 작업하는 개발자의 경우 ImageMagick 및 FFmpeg과 같은 도구를 사용하는 것이 좋습니다.
AVIF 인코딩 속도
빠른 인코딩 속도와 높은 시각적 품질은 이미지 압축을 대규모로 배포하는 데 매우 중요합니다. AVIF 소프트웨어 인코딩 속도는 지난 2년 동안 크게 개선되었습니다. 다른 최신 정지 이미지 형식과 비교할 때 AVIF는 시각적 품질이 유사하면서도 파일 크기가 더 작고 (다음 그래프 참고, 낮을수록 좋음) 인코딩 속도도 더 빠릅니다.
아래 차트 (높을수록 좋음)는 AVIF 인코딩 속도를 다른 이미지 형식과 비교한 것입니다. WebP와 같은 이전 세대 코덱은 덜 복잡하지만 효율성도 떨어지는 압축 알고리즘을 사용합니다. AVIF는 멀티 스레드 인코딩 스키마를 사용하여 일반적인 사용 사례에서 유사한 성능을 달성하는 동시에 상당한 압축 이점을 제공합니다.
더 자세한 인코딩 속도와 시각적 품질 비교에 관심이 있는 개발자를 위해 이미지 코딩 비교 사이트에서 재현 가능한 벤치마크 결과를 제공합니다.
AVIF 및 WebP와 같은 최신 이미지 코덱의 소프트웨어 구현은 x86 및 ARM 프로세서 아키텍처에 최적화되어 있지만, 대량의 이미지를 대규모로 압축하는 작업은 컴퓨팅 비용이 많이 들 수 있습니다. 압축 비용을 줄이는 한 가지 대안은 하드웨어 가속을 살펴보는 것입니다. Bluedot은 AMD의 Alveo U250과 같은 프로그래밍 가능한 FPGA에서 실행되는 하드웨어 가속 Pulsar-AVIF 인코더를 개발했습니다. 소프트웨어 기반 avifenc와 비교할 때 Pulsar-AVIF는 유사한 압축 효율로 7~23배 빠른 속도를 제공합니다.
- 테스트 세트: Kodak (768x512 이미지 24개)
- 24개의 이미지를 동시에 인코딩 (24개 프로세스)
- 각 소프트웨어 인코딩 프로세스는 4개의 스레드로 실행됩니다. (-j 4)
개발자는 Azure NP 시리즈와 같은 클라우드 가상 머신을 사용하여 Pulsar-AVIF 인코더를 배포할 수 있습니다.
반응형 웹페이지를 위한 AVIF 기능
AVIF에는 더 반응성이 뛰어난 웹페이지를 제공하는 데 도움이 되는 몇 가지 흥미로운 기능이 있습니다. 이번에는 웹에서 멋진 애니메이션을 제공하는 가장 효율적인 방법인 애니메이션 AVIF에 대해 자세히 알아보겠습니다.
애니메이션 AVIF
애니메이션 GIF는 35년이 지났지만 여전히 애니메이션 이미지에 널리 사용되는 형식입니다. 애니메이션 GIF의 가장 큰 단점은 256색만 지원하고 압축률이 낮아 파일 크기가 매우 크며 실제 사용 사례의 해상도나 프레임 속도도 제한된다는 점입니다. 반면 애니메이션 AVIF 코딩은 실제로 AV1 동영상 코딩 스킴과 동일하므로 애니메이션 GIF에 비해 파일 크기가 크게 줄어듭니다.
애니메이션 GIF 세트를 AVIF와 JPEG XL로 인코딩하는 간단한 벤치마크를 실행했습니다. 테스트 세트에서 파일 크기 절감 비율의 중앙값은 원본 GIF 파일에 비해 약 86%, 애니메이션 JPEG XL 파일에 비해 약 73% 였습니다*.
Chrome, Firefox, Safari는 모두 애니메이션 AVIF 재생을 지원합니다.
FFmpeg는 애니메이션 AVIF 파일을 만드는 데 사용할 수 있는 도구입니다. 다음은 FFmpeg를 사용하여 GIF를 AVIF로 변환하는 기본적인 예입니다.
ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"
$CRF는 0에서 63 사이의 원하는 출력 품질입니다. 값이 작을수록 품질이 우수하고 파일 크기가 커집니다. 0은 무손실 압축을 사용합니다. 작은 애니메이션 AVIF 파일의 경우 23 값으로 시작합니다.
FFmpeg는 기본적으로 libaom을 사용하여 AVIF 이미지를 인코딩하지만, 가능한 경우 rav1e 또는 SVT-AV1을 사용할 수도 있습니다. 인코더 선택, 속도/품질 절충을 위한 인코딩 매개변수 조정에 관한 자세한 내용은 FFmpeg의 AV1 인코딩 가이드를 참고하세요.
또 다른 사용 사례는 원본 파일을 다시 인코딩하지 않고 AV1 동영상을 AVIF로 다시 패키징하는 것입니다. 이는 원래 AV1 파일을 디코딩/인코딩하는 것보다 훨씬 저렴하며 AV1 동영상을 <img> 요소와 함께 사용할 수 있게 합니다. -c:v copy를 FFmpeg에 전달하면 이 작업을 실행할 수 있습니다.
ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"
결론
웹에서 AVIF 사용은 출시 이후 꾸준히 증가해 왔으며 브라우저, 이미지 CDN, WordPress 플러그인, 인코딩 도구에서 널리 지원됩니다. 전반적으로 AVIF는 웹에서 이미지를 제공하는 데 적합한 선택입니다. AVIF는 인코딩과 디코딩이 빠르며, 웹사이트에 가장 적합한 품질 또는 가장 작은 파일 크기를 제공합니다. AVIF는 웹에서 애니메이션을 전송하는 가장 효율적인 방법입니다. 질문, 의견 또는 기능 요청이 있는 경우 av1-discuss 메일링 리스트, AOM GitHub 커뮤니티, AVIF 위키를 통해 문의하세요.