Google에서는 이미지로 인한 웹사이트의 팽창에 대해 자주 작성하며, Lighthouse와 같은 도구는 이미지 로드가 사용자 환경에 부정적인 영향을 미칠 때(예: 로드 시간 증가, 더 중요한 리소스의 대역폭 감소 등) 강조합니다. 이 문제를 해결하는 한 가지 방법은 최신 압축을 사용하여 이미지의 파일 크기를 줄이는 것이며, 웹 개발자를 위한 새로운 옵션은 AVIF 이미지 형식입니다. 이 블로그 게시물에서는 AVIF용 오픈소스 도구의 최신 업데이트에 대해 설명하고, libaom 및 libavif 인코딩 라이브러리를 소개하고, 이러한 라이브러리를 사용하여 AVIF 이미지를 효율적으로 인코딩하기 위한 가이드를 포함합니다.
AVIF는 AV1 동영상 코덱을 기반으로 하는 이미지 형식으로, Alliance for Open Media에 의해 표준화되었습니다. AVIF는 JPEG 및 WebP와 같은 다른 이미지 형식에 비해 상당한 압축 이득을 제공합니다. 정확한 절감 효과는 콘텐츠, 인코딩 설정 및 품질 타겟에 따라 다르지만 Google을 비롯한 기타 기업은 JPEG에 비해 50% 넘게 절감되었습니다.
또한 AVIF는 High Dynamic Range 및 Wide Color Gamut, 필름 입자 합성, 프로그레시브 디코딩과 같은 새로운 이미지 기능을 위한 코덱과 컨테이너 지원을 추가합니다.
새로운 기능
Chrome M85에서 AVIF 지원을 도입한 이후 오픈소스 생태계의 AVIF 지원이 여러 측면에서 개선되었습니다.
리바움
Libaom은 오픈소스 AV1 인코더 및 디코더로, Alliance for Open Media(Open Media)의 기업에서 유지관리하며 Google 및 기타 회원 기업의 여러 프로덕션 서비스에 사용됩니다. Chrome에 AVIF 지원이 추가된 시점과 비슷한 libaom 2.0.0 버전과 최근 3.1.0 버전 사이에 코드베이스에 상당한 정지 이미지 인코딩 최적화가 추가되었습니다. 수정된 사항은 다음과 같습니다.
- 멀티스레딩 및 타일식 인코딩 최적화
- 메모리 사용량 5배 감소
- 아래 차트와 같이 CPU 사용량이 6.5배 감소합니다.
이러한 변경사항은 AVIF, 특히 사이트에서 가장 자주 로드되거나 우선순위가 가장 높은 이미지를 인코딩하는 비용을 크게 줄여줍니다. 서버와 클라우드 서비스에서 AV1의 하드웨어 가속 인코딩을 더 많이 사용할 수 있게 됨에 따라 AVIF 이미지를 만드는 비용은 계속 감소합니다.
리바비프
AVIF의 참조 구현인 Libavif는 Chrome에서 AVIF 이미지를 디코딩하는 데 사용되는 오픈소스 AVIF Muxer 및 파서입니다. 또한 기존 비압축 이미지에서 AVIF 이미지를 생성하거나 기존 웹 이미지 (JPEG, PNG 등)에서 트랜스코딩하기 위해 libaom과 함께 사용할 수도 있습니다.
Libavif는 최근 고급 libaom 인코더 설정과의 통합을 포함하여 더 광범위한 인코더 설정에 대한 지원을 추가했습니다. libyuv를 사용한 빠른 YUV-RGB 변환과 같은 처리 파이프라인에서의 최적화 및 사전 곱셈 알파 지원을 통해 디코딩 프로세스의 속도가 더욱 빨라집니다. 마지막으로, libaom 3.1.0에 새로 추가된 all-intra 인코딩 모드 지원으로 위에서 언급한 모든 libaom 개선사항이 제공됩니다.
avifenc로 AVIF 이미지 인코딩
Squoosh.app을 사용하면 AVIF를 빠르게 실험할 수 있습니다. Squoosh는 libavif의 WebAssembly 버전을 실행하고 명령줄 도구와 동일한 여러 기능을 노출합니다. 이렇게 하면 AVIF를 다른 기존 형식과 최신 형식과 쉽게 비교할 수 있습니다. Node 앱을 대상으로 하는 Squoosh의 CLI 버전도 있습니다.
그러나 WebAssembly는 아직 CPU의 모든 성능 프리미티브에 액세스할 수 없으므로 libavif를 가장 빠르게 실행하려면 명령줄 인코더 avifenc를 사용하는 것이 좋습니다.
AVIF 이미지를 인코딩하는 방법을 이해하기 위해 위의 예시에서 사용된 동일한 소스 이미지를 사용하는 튜토리얼을 제공합니다. 시작하려면 다음 항목이 필요합니다.
zlib, libpng, libjpeg용 개발 패키지도 설치해야 합니다. Debian 및 Ubuntu Linux 배포판용 명령어는 다음과 같습니다.
sudo apt-get install zlib1g-dev
sudo apt-get install libpng-dev
sudo apt-get install libjpeg-dev
명령줄 인코더 avifenc 빌드
1. 코드 가져오기
libavif의 출시 태그를 확인합니다.
git clone -b v0.9.1 https://github.com/AOMediaCodec/libavif.git
2. 디렉터리를 libavif로 변경
cd libavif
avifenc 및 libavif를 빌드하여 구성하는 방법에는 여러 가지가 있습니다. 자세한 내용은 libavif를 참조하세요. AV1 인코더 및 디코더 라이브러리 libaom에 정적으로 연결되도록 avifenc를 빌드합니다.
3. libaom 가져오기 및 빌드
libavif 외부 종속 항목 디렉터리로 변경합니다.
cd ext
다음 명령어는 libaom 소스 코드를 가져와서 정적으로 libaom을 빌드합니다.
./aom.cmd
디렉터리를 libavif로 변경합니다.
cd ..
4. 명령줄 인코딩 도구인 avifenc를 빌드합니다.
avifenc 용 빌드 디렉터리를 만드는 것이 좋습니다.
mkdir build
빌드 디렉터리로 변경합니다.
cd build
avifenc의 빌드 파일을 만듭니다.
cmake -DCMAKE_BUILD_TYPE=Release -DBUILD_SHARED_LIBS=0 -DAVIF_CODEC_AOM=1 -DAVIF_LOCAL_AOM=1 -DAVIF_BUILD_APPS=1 ..
avifenc를 빌드합니다.
make
avifenc를 빌드했습니다.
avifenc 명령줄 매개변수 이해
avifenc는 명령줄 구조를 사용합니다.
./avifenc [options] input.file output.avif
이 튜토리얼에 사용되는 avifenc의 기본 매개변수는 다음과 같습니다.
| 아비페크 | |
|---|---|
| --최소 0 | 색상의 최소 양자화기를 0으로 설정 |
| --최대 63자 | 색상의 최대 양자화기를 63으로 설정 |
| --minalpha 0 | 알파의 최소 양자화기를 0으로 설정 |
| --maxalpha 63 | 알파의 최대 양자화기를 63으로 설정 |
| -a end-usage=q | 속도 제어 모드를 상수 품질 (Q) 모드로 설정합니다. |
| -a cq-level=Q | 색상과 알파의 양자화 수준을 Q로 설정 |
| -색상:cq-level=Q | 색상의 양자화 수준을 Q로 설정 |
| -a alpha:cq-level=Q | 알파의 양자화 수준을 Q로 설정 |
| -tune=ssim | SSIM에 맞게 조정 (기본값은 PSNR에 맞게 조정) |
| --jobs J | J 작업자 스레드 사용 (기본값: 1) |
| --속도 S | 인코더 속도를 0~10 사이로 설정 (가장 느린 기본값: 6) |
cq-level 옵션은 양자화 수준 (0~63)을 설정하여 색상 또는 알파의 품질을 제어합니다.
기본 설정으로 AVIF 이미지 만들기
avifenc를 실행하기 위한 가장 기본적인 매개변수는 입력 및 출력 파일을 설정하는 것입니다.
./avifenc happy_dog.jpg happy_dog.avif
다음 명령줄을 사용하여 이미지를 인코딩하는 것이 좋습니다(예: 양자화 수준 18에서).
./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim happy_dog.jpg happy_dog.avif
Avifenc에는 품질과 속도에 영향을 미치는 다양한 옵션이 있습니다.
옵션을 확인하고 자세히 알아보려면 ./avifenc를 실행하세요.
이제 자체 AVIF 이미지가 만들어졌습니다.
인코더 속도 향상
머신에 있는 코어 수에 따라 변경하기에 적합한 매개변수 중 하나는 --jobs 매개변수입니다.
이 매개변수는 avifenc에서 AVIF 이미지를 만드는 데 사용할 스레드 수를 설정합니다.
명령줄에서 실행해 보세요.
./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim --jobs 8 happy_dog.jpg happy_dog.avif
이렇게 하면 AVIF 이미지를 만들 때 8개의 스레드를 사용하도록 avifenc에 알려 주므로 AVIF 인코딩 속도가 약 5배 빨라집니다.
최대 콘텐츠 렌더링 시간 (LCP)에 미치는 영향
이미지는 최대 콘텐츠 렌더링 시간 (LCP) 측정항목의 일반적인 후보입니다. LCP 이미지의 로드 속도를 개선하기 위한 일반적인 권장사항 중 하나는 이미지를 최적화하는 것입니다. 리소스의 전송 크기를 줄이면 이미지인 LCP 후보를 처리할 때 대상으로 삼아야 하는 4가지 주요 단계 중 하나인 리소스 로드 시간을 개선할 수 있습니다.
이미지를 최적화할 때는 이미지 CDN을 사용하는 것이 좋습니다. 웹사이트의 빌드 프로세스에서 이미지 최적화 파이프라인을 설정하거나 인코더 바이너리를 수동으로 사용하여 이미지를 직접 최적화하는 것보다 훨씬 적은 노력이 듭니다. 그러나 일부 프로젝트의 경우 이미지 CDN이 비용 제약이 있을 수 있습니다. 이 경우 avifenc 인코더로 최적화할 때 다음 사항을 고려하세요.
- 인코더에서 제공하는 옵션을 숙지합니다. AVIF의 사용 가능한 인코딩 기능 중 일부를 실험하면 충분한 이미지 품질을 유지하면서도 추가로 비용을 절감할 수 있습니다.
- AVIF는 손실 있는 인코딩과 무손실 인코딩을 모두 제공합니다. 이미지 콘텐츠에 따라 인코딩 유형이 다른 인코딩 유형보다 성능이 뛰어날 수 있습니다. 예를 들어 일반적으로 JPEG로 제공되는 사진은 손실이 있는 인코딩에서 가장 잘 작동하는 반면, 무손실 인코딩은 단순한 세부사항이 포함된 이미지나 일반적으로 PNG로 제공되는 라인 아트에 가장 적합합니다.
- 커뮤니티에서 imagemin에 대한 지원이 포함된 번들러를 사용하는 경우 번들러에서 AVIF 이미지 변형을 출력할 수 있도록 imagemin-avif 패키지를 사용하는 것이 좋습니다.
AVIF로 실험하면 LCP 후보가 이미지인 경우 웹사이트의 LCP 시간을 개선할 수 있습니다. LCP 최적화에 관한 자세한 내용은 LCP 최적화 가이드를 참고하세요.
결론
libaom, libavif, 기타 오픈소스 도구를 사용하면 AVIF를 통해 웹사이트에 최고의 이미지 품질과 성능을 얻을 수 있습니다. 이 형식은 아직 비교적 새로운 형식이며 최적화 및 도구 통합이 활발하게 개발되고 있습니다. 질문, 의견 또는 기능 요청이 있는 경우 av1-discuss 메일링 리스트, AOM GitHub 커뮤니티, AVIF 위키를 통해 문의하세요.