생태계에서 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 이미지를 제공하고 있습니다. Imgix는 AVIF 지원을 발표하는 블로그 게시물에서 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-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 토론 메일링 리스트, AOM GitHub 커뮤니티, AVIF 위키를 통해 문의해 주시기 바랍니다.