이미지 로드가 사용자 환경에 부정적인 영향을 미칠 때(예: 로드 시간이 증가하거나 더 중요한 리소스에서 대역폭을 빼내는 등) Lighthouse 강조 표시와 같은 도구와 이미지로 웹사이트의 팽창에 대한 정보를 자주 작성합니다. 이 문제를 해결하는 한 가지 방법은 최신 압축을 사용하여 이미지의 파일 크기를 줄이는 것입니다. 웹 개발자를 위한 새로운 옵션은 AVIF 이미지 형식입니다. 이 블로그 게시물에서는 AVIF용 오픈소스 도구의 최신 업데이트 내용을 설명하고, libaom 및 libavif 인코딩 라이브러리를 소개하고, 이러한 라이브러리를 사용하여 AVIF 이미지를 효율적으로 인코딩하기 위한 튜토리얼을 포함합니다.
AVIF는 AV1 동영상 코덱을 기반으로 하는 이미지 형식이며 Open Media 연합에 의해 표준화되었습니다. AVIF는 JPEG 및 WebP와 같은 다른 이미지 형식에 비해 상당한 압축 이득을 제공합니다. 정확한 절감 효과는 콘텐츠, 인코딩 설정, 품질 타겟에 따라 다르지만 Google을 비롯한 다른 업체에서는 JPEG에 비해 50% 넘게 절감되는 효과를 얻었습니다.
또한 AVIF는 High Dynamic Range 및 Wide Color Gamut, 필름 입자 합성 및 프로그레시브 디코딩과 같은 새로운 이미지 기능을 위한 코덱 및 컨테이너 지원을 추가합니다.
새로운 기능
Chrome M85에 AVIF 지원이 도입된 이후 오픈소스 생태계의 AVIF 지원이 여러 측면에서 개선되었습니다.
리바옴
Libaom은 Alliance for Open Media에 소속된 기업에서 유지관리하는 오픈소스 AV1 인코더 및 디코더로, Google 및 기타 회원사의 여러 프로덕션 서비스에 사용됩니다. libaom 2.0.0 출시(Chrome에서 AVIF 지원을 추가했을 때와 거의 동시에)와 최신 3.1.0 출시 사이에서 코드베이스에 상당한 정지 이미지 인코딩 최적화가 추가되었습니다. 예를 들면
- 멀티스레딩 및 타일 인코딩이 최적화되었습니다.
- 메모리 사용량 5배 감소.
- 아래 차트에 표시된 것처럼 CPU 사용량이 6.5배 감소합니다.
이러한 변화로 인해 AVIF, 특히 사이트에서 가장 자주 로드되거나 우선순위가 가장 높은 이미지를 인코딩하는 비용이 크게 절감됩니다. 서버 및 클라우드 서비스에서 AV1의 하드웨어 가속 인코딩을 사용할 수 있게 됨에 따라 AVIF 이미지를 만드는 비용도 계속 감소할 것입니다.
리바비프
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에서 자세한 내용을 확인할 수 있습니다. avifenc를 빌드하여 AV1 인코더 및 디코더 라이브러리 libaom에 정적으로 연결되도록 합니다.
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 최종 사용=q | 속도 제어 모드를 지속적인 품질 (Q) 모드로 설정 |
| -a cq-level=Q | 색상 및 알파의 양자화 수준을 Q로 설정 |
| -a color:cq-level=Q | 색상의 양자화 수준을 Q로 설정 |
| -a alpha:cq-level=Q | 알파의 양자화 수준을 Q로 설정 |
| -a tune=ssim | SSIM에 맞게 조정 (기본값은 PSNR에 맞게 조정) |
| --취업정보 J | J 작업자 스레드 사용 (기본값: 1) |
| --속도 S | 인코더 속도를 0~10 사이로 설정합니다 (가장 느림, 기본값은 6). |
cq 수준 옵션은 양자화 수준 (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 패키지를 사용하는 것이 좋습니다.
LCP 후보가 이미지인 경우 AVIF를 사용하여 실험하면 웹사이트의 LCP 시간을 개선할 수 있습니다. LCP 최적화에 관한 자세한 내용은 LCP 최적화 가이드를 참고하세요.
결론
libaom, libavif, 기타 오픈소스 도구를 사용하면 AVIF로 웹사이트에 최상의 이미지 품질과 성능을 얻을 수 있습니다. 이 형식은 여전히 비교적 새로운 형식이며 최적화 및 도구 통합이 활발히 개발되고 있습니다. 질문, 의견 또는 기능 요청이 있는 경우 av1-discuss 메일링 리스트, AOM GitHub 커뮤니티, AVIF 위키에 문의하세요.