Google에서는 이미지로 인한 웹사이트의 부풀림에 대해 자주 글을 쓰고 있으며, Lighthouse와 같은 도구는 이미지 로드가 사용자 환경에 부정적인 영향을 미치는 경우(예: 로드 시간 증가, 더 중요한 리소스에서 대역폭 사용) 이를 강조 표시합니다. 이 문제를 해결하는 한 가지 방법은 최신 압축을 사용하여 이미지의 파일 크기를 줄이는 것입니다. 웹 개발자를 위한 새로운 옵션은 AVIF 이미지 형식입니다. 이 블로그 게시물에서는 AVIF용 오픈소스 도구의 최근 업데이트에 대해 설명하고, libaom 및 libavif 인코딩 라이브러리를 소개하며, 이러한 라이브러리를 사용하여 AVIF 이미지를 효율적으로 인코딩하는 방법에 관한 튜토리얼을 제공합니다.
AVIF는 AV1 동영상 코덱을 기반으로 하며 Alliance for Open Media에서 표준화한 이미지 형식입니다. AVIF는 JPEG 및 WebP와 같은 다른 이미지 형식에 비해 상당한 압축 이점을 제공합니다. 정확한 절감량은 콘텐츠, 인코딩 설정, 품질 타겟에 따라 다르지만 Google 및 기타에서는 JPEG 대비 50% 이상의 절감 효과를 확인했습니다.
또한 AVIF는 HDR 및 넓은 색상 영역, 필름 그레인 합성, 프로그레시브 디코딩과 같은 새로운 이미지 기능에 관한 코덱 및 컨테이너 지원을 추가합니다.
새로운 기능
Chrome M85에서 AVIF 지원이 출시된 이후 오픈소스 생태계의 AVIF 지원이 여러 측면에서 개선되었습니다.
Libaom
Libaom은 개방형 미디어 연합에 소속된 회사에서 유지 관리하고 Google 및 기타 회원사의 여러 프로덕션 서비스에서 사용하는 오픈소스 AV1 인코더 및 디코더입니다. Chrome에서 AVIF 지원을 추가한 것과 거의 동시에 출시된 libaom 2.0.0 버전과 최근 3.1.0 버전 사이에 코드베이스에 상당한 정지 이미지 인코딩 최적화가 추가되었습니다. 예를 들면 다음과 같습니다.
- 멀티스레딩 및 타일 인코딩을 위한 최적화
- 메모리 사용량이 5배 감소했습니다.
- 아래 차트와 같이 CPU 사용량이 6.5배 감소했습니다.
이러한 변경사항은 특히 사이트에서 가장 자주 로드되거나 우선순위가 가장 높은 이미지의 AVIF 인코딩 비용을 대폭 줄입니다. 서버와 클라우드 서비스에서 AV1의 하드웨어 가속 인코딩을 사용할 수 있게 되면서 AVIF 이미지를 만드는 데 드는 비용은 계속 줄어들 것입니다.
Libavif
AVIF의 참조 구현인 Libavif는 Chrome에서 AVIF 이미지를 디코딩하는 데 사용되는 오픈소스 AVIF muxer 및 파서입니다. libaom과 함께 사용하여 기존 비압축 이미지에서 AVIF 이미지를 만들거나 기존 웹 이미지 (JPEG, PNG 등)에서 트랜스코딩할 수도 있습니다.
Libavif는 최근에 고급 libaom 인코더 설정과의 통합을 비롯하여 더 광범위한 인코더 설정을 지원하도록 추가했습니다. libyuv를 사용한 빠른 YUV-RGB 변환, 사전 곱한 알파 지원과 같은 처리 파이프라인의 최적화는 디코딩 프로세스의 속도를 더욱 높여줍니다. 마지막으로 libaom 3.1.0에 새로 추가된 전체 인트라 인코딩 모드 지원을 통해 위에 언급된 모든 libaom 개선사항이 적용됩니다.
avifenc로 AVIF 이미지 인코딩
AVIF를 빠르게 실험하는 방법은 Squoosh.app을 사용하는 것입니다. 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의 기본 매개변수는 다음과 같습니다.
| avifenc | |
|---|---|
| --min 0 | 색상의 최소 큐란트라이저를 0으로 설정 |
| --max 63 | 색상의 최대 큐란트라이저를 63으로 설정 |
| --minalpha 0 | 알파의 최소 퀀타이저를 0으로 설정 |
| --maxalpha 63 | 알파의 최대 큐나이저를 63으로 설정 |
| -a end-usage=q | 속도 제어 모드를 일정한 품질 (Q) 모드로 설정 |
| -a cq-level=Q | 색상과 알파 모두의 퀀타이즈 수준을 Q로 설정합니다. |
| -a color:cq-level=Q | 색상의 퀀타이즈 수준을 Q로 설정 |
| -a alpha:cq-level=Q | 알파의 퀀타이즈 수준을 Q로 설정합니다. |
| -a tune=ssim | SSIM에 맞게 조정 (기본값은 PSNR에 맞게 조정) |
| --jobs J | J 작업자 스레드 사용 (기본값: 1) |
| --speed 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
이렇게 하면 avifenc가 AVIF 이미지를 만들 때 8개 스레드를 사용하도록 지시하여 AVIF 인코딩 속도를 약 5배 높일 수 있습니다.
최대 콘텐츠 페인트 (LCP)에 미치는 영향
이미지는 최대 콘텐츠 렌더링 시간 (LCP) 측정항목의 일반적인 후보입니다. LCP 이미지의 로드 속도를 개선하기 위한 일반적인 권장사항 중 하나는 이미지를 최적화하는 것입니다. 리소스의 전송 크기를 줄이면 이미지인 LCP 후보를 처리할 때 타겟팅해야 하는 4가지 주요 단계 중 하나인 리소스 로드 시간이 개선됩니다.
이미지를 최적화할 때는 이미지 CDN을 사용하는 것이 좋습니다. 웹사이트의 빌드 프로세스에서 이미지 최적화 파이프라인을 설정하거나 인코더 바이너리를 수동으로 사용하여 이미지를 직접 최적화하는 것보다 훨씬 적은 노력이 들기 때문입니다. 그러나 일부 프로젝트의 경우 이미지 CDN이 비용이 많이 들 수 있습니다. 이 경우 avifenc 인코더로 최적화할 때 다음 사항을 고려하세요.
- 인코더에서 제공하는 옵션을 숙지합니다. AVIF의 사용 가능한 인코딩 기능 중 일부를 실험하여 충분한 이미지 품질을 유지하면서 추가로 절약할 수 있습니다.
- AVIF는 손실 있는 인코딩과 무손실 인코딩을 모두 제공합니다. 이미지의 콘텐츠에 따라 한 유형의 인코딩이 다른 유형보다 실적이 더 좋을 수 있습니다. 예를 들어 일반적으로 JPEG로 제공되는 사진은 손실 압축을 사용하는 것이 가장 좋을 수 있지만, 간단한 세부정보나 일반적으로 PNG로 제공되는 선화 이미지에는 무손실 압축이 가장 적합할 수 있습니다.
- imagemin에 대한 커뮤니티 지원이 있는 번들러를 사용하는 경우 imagemin-avif 패키지를 사용하여 번들러가 AVIF 이미지 변형을 출력하도록 하는 것이 좋습니다.
AVIF를 실험하면 LCP 후보가 이미지인 경우 웹사이트의 LCP 시간을 개선할 수 있습니다. LCP 최적화에 관한 자세한 내용은 LCP 최적화 가이드를 참고하세요.
결론
libaom, libavif 및 기타 오픈소스 도구를 사용하면 AVIF를 사용하여 웹사이트에 최적의 이미지 품질과 성능을 제공할 수 있습니다. 이 형식은 아직 비교적 새롭고 최적화 및 도구 통합이 활발하게 개발되고 있습니다. 질문, 의견 또는 기능 요청이 있는 경우 av1-discuss 메일링 리스트, AOM GitHub 커뮤니티, AVIF 위키로 문의하세요.