생태계에서 AVIF를 채택한 방식에 대한 업데이트
AVIF는 높은 압축률, 효율적인 성능, 광범위한 채택 기술로 인해 웹에서 빠르게 인기를 얻고 있는 새로운 이미지 형식입니다. AVIF는 Alliance for Open Media(오픈 미디어 연합)에서 표준화한 AV1 동영상 코덱을 기반으로 하는 로열티가 없는 공개 이미지 형식입니다. 이 블로그 게시물에서는 생태계에서 AVIF를 채택하는 방법과 개발자가 정지 이미지 및 애니메이션에 대해 AVIF를 통해 기대할 수 있는 성능 및 품질상의 이점을 간략하게 설명합니다.
AVIF 생태계의 새로운 소식
Chrome, Firefox, Safari에 AVIF가 도입된 이후 웹에서 AVIF의 사용이 꾸준히 증가하고 있으며 현재 거의 모든 브라우저에서 AVIF를 지원합니다.
Chrome만 보더라도 Chrome이 안정화 버전으로 AVIF 지원을 추가한 이후 1년이 조금 지나 AVIF 사용량이 약 1%까지 증가했습니다.
현재 Akamai, Cloudflare, Cloudinary, Imgix와 같은 여러 이미지 CDN에서 AVIF 이미지를 제공하고 있습니다. AVIF 지원을 알리는 블로그 게시물에서 Imgix는 파일 크기를 JPEG에 비해 60%, WebP를 사용하면 35% 줄일 수 있다고 보고했습니다. 파일 크기를 줄이면 스토리지가 크게 절약될 뿐만 아니라 페이지 로드 속도가 빨라져 콘텐츠가 포함된 최대 페인트 (LCP) 시간을 단축할 수 있습니다. LCP는 코어 웹 바이탈 중 하나로 페이지에서 가장 큰 콘텐츠 블록이 로드되는 속도를 나타냅니다. 최신 코덱을 사용하여 이미지를 압축하는 것은 LCP를 줄이는 주요 기술 중 하나입니다. Lighthouse는 웹사이트를 테스트하고 AVIF를 통해 얻을 수 있는 절감 효과를 확인할 수 있는 훌륭한 Chrome 개발자 도구입니다.
WordPress는 전 세계에서 가장 인기 있는 웹사이트 플랫폼이며, 개발자가 이미지를 AVIF로 변환하는 데 사용할 수 있는 다음과 같은 다양한 플러그인이 있습니다.
실무형 개발자의 경우 ImageMagick 및 FFmpeg와 같은 도구로 시작하는 것이 좋습니다.
AVIF 인코딩 속도
이미지 압축을 대규모로 배포하려면 빠른 인코딩 속도와 높은 시각적 품질이 중요합니다. 지난 2년 동안 AVIF 소프트웨어 인코딩 속도가 크게 개선되었습니다. 다른 최신 스틸 이미지 형식에 비해 AVIF는 비슷한 시각적 품질의 작은 파일을 생성하지만 (다음 그래프 참고, 낮을수록 좋음) 인코딩 속도가 더 빠릅니다.
아래 차트 (높을수록 좋음)는 AVIF 인코딩 속도가 다른 이미지 형식과 어떻게 다른지 보여줍니다. WebP와 같은 이전 세대 코덱은 덜 복잡하지만 덜 효율적인 압축 알고리즘의 이점을 누릴 수 있습니다. AVIF는 멀티스레드 인코딩 방식을 사용하여 일반적인 사용 사례와 유사한 성능을 달성하는 동시에 상당한 압축 이득을 제공합니다.
더 자세한 인코딩 속도와 시각적 품질 비교에 관심이 있는 개발자를 위해 이미지 코딩 비교 사이트에 재현 가능한 벤치마크 결과가 포함되어 있습니다.
AVIF 및 WebP와 같은 최신 이미지 코덱을 위한 소프트웨어 구현은 x86 및 ARM 프로세서 아키텍처에 최적화되어 있지만, 방대한 양의 이미지를 대규모로 압축하는 작업은 계산 비용이 많이 들 수 있습니다. 압축 비용을 절감하는 한 가지 대안은 하드웨어 가속을 살펴보는 것입니다. Bluedot는 AMD의 Alveo U250과 같이 프로그래밍 가능한 FPGA에서 실행되는 하드웨어 가속 Pulsar-AVIF 인코더를 개발했습니다. Pulsar-AVIF는 소프트웨어 기반 avifenc와 비교할 때 비슷한 압축 효율성으로 속도가 7~23배 향상되었습니다.
- 테스트 세트: Kodak (768x512 이미지 24개)
- 이미지 24개 동시 인코딩 (프로세스 24개)
- 각 소프트웨어 인코딩 프로세스는 4개의 스레드로 실행됩니다. (-j 4)
개발자는 Azure NP-Series와 같은 클라우드 가상 머신에 Pulsar-AVIF 인코더를 배포할 수 있습니다.
반응형 웹페이지를 위한 AVIF 기능
AVIF에는 웹 페이지의 응답성을 높이는 데 도움이 되는 몇 가지 흥미로운 기능이 있습니다. 이번에는 웹에서 멋진 애니메이션을 제공하는 가장 효율적인 방법인 애니메이션 AVIF에 대해 자세히 알아보겠습니다.
애니메이션 AVIF
애니메이션 GIF는 35세임에도 불구하고 여전히 애니메이션 이미지에서 널리 사용되는 형식입니다. 애니메이션 GIF의 가장 큰 단점은 256가지 색상만 지원한다는 점과 낮은 압축률로 파일 크기가 매우 커지는 동시에 실제 사용 사례에서는 해상도나 프레임 속도를 제한한다는 점입니다. 반면에 애니메이션 AVIF 코딩은 실제로 애니메이션 GIF에 비해 파일 크기를 상당히 단축하는 AV1 동영상 코딩 스킴과 동일합니다.
우리는 애니메이션 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는 AVIF 이미지를 인코딩하는 데 기본적으로 libaom을 사용하지만 가능한 경우 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 위키를 통해 문의해 주세요.