AVIF 이미지 제공

1. 소개

이미지는 웹페이지를 로드하는 데 필요한 평균 바이트의 60%이상을 차지합니다. AVIF를 사용하면 이미지를 더 작게 만들고 웹사이트 로드 속도를 높일 수 있습니다.

AVIF란 무엇인가요?

AVIF는 AV1 동영상 비트스트림에서 파생된 이미지 형식입니다. AVIF는 압축 효율성을 위해 빌드되었습니다.

AVIF를 사용해야 하는 이유

AVIF 이미지는 품질이 동일하거나 더 나은 JPEG, PNG, GIF 또는 WebP 이미지보다 훨씬 작습니다.

학습할 내용

이미지에서 AVIF 이미지를 만드는 방법
웹페이지에서 AVIF 이미지를 렌더링하는 방법

필요한 항목

모든 주요 브라우저
텍스트 편집기
cmake
git
ninja
이미지입니다. 여기에 제공했습니다.
FFmpeg

2. Squoosh로 AVIF 이미지 만들기

Squoosh는 이미지 압축 웹 앱입니다. Squoosh를 사용하면 이미지를 AVIF 이미지로 쉽게 압축할 수 있습니다.

https://squoosh.app을 엽니다.
Squoosh에 로컬 이미지를 드롭합니다.

Squoosh 스크린샷

'압축' 드롭다운 상자에서 AVIF를 선택합니다.

Squoosh 드롭다운 메뉴

그러면 Squoosh가 이미지를 AVIF 이미지로 압축합니다. Squoosh가 완료되면 오른쪽 하단에 AVIF 이미지에 관한 통계와 함께 다운로드 버튼이 표시됩니다.

Squoosh 다운로드 버튼

원본 샘플 이미지는 3340kB이고 압축된 이미지는 378kB입니다. 샘플 이미지가 원본 이미지보다 거의 10배 더 작게 압축되었습니다.

AVIF 이미지 다운로드

다운로드 버튼을 클릭하면 AVIF 이미지가 로컬 드라이브에 저장됩니다.

이제 나만의 AVIF 이미지가 만들어졌습니다.

3. 명령줄 인코더 avifenc 빌드

avifenc는 PNG 및 JPEG 이미지를 AVIF 이미지로 변환할 수 있는 명령줄 애플리케이션입니다. avifenc는 AVIF 이미지를 디코딩하고 인코딩할 수 있는 라이브러리인 libavif를 사용합니다. AVIF로 변환하려는 이미지가 많은 경우 명령줄 인코더인 avifenc를 사용하는 것이 좋습니다.

코드를 가져옵니다.

git clone https://github.com/AOMediaCodec/libavif.git

디렉터리를 libavif로 변경합니다.

cd libavif/

빌드할 avifenc와 libavif를 구성하는 방법은 여러 가지가 있습니다. 자세한 내용은 libavif를 참고하세요. libaom 인코더, dav1d 디코더, libyuv 처리 라이브러리에 정적으로 연결되도록 avifenc를 빌드합니다.

명령줄 인코딩 도구인 avifenc를 빌드합니다.

avifenc의 빌드 디렉터리를 만드는 것이 좋습니다.

mkdir build

빌드 디렉터리로 변경합니다.

cd build

avifenc의 빌드 파일을 만듭니다.

cmake -DAVIF_CODEC_AOM=LOCAL -DAVIF_CODEC_DAV1D=LOCAL -DAVIF_LIBYUV=LOCAL -DBUILD_SHARED_LIBS=OFF -DAVIF_BUILD_APPS=ON ../

avifenc 빌드

make

avifenc가 빌드되었습니다.

4. avifenc로 AVIF 이미지 만들기

기본 설정으로 AVIF 이미지를 만듭니다.

avifenc를 실행하기 위한 가장 기본적인 매개변수는 입력 및 출력 파일을 설정하는 것입니다.

./avifenc happy_dog.jpg example.avif

이제 두 번째 AVIF 이미지가 생성되었습니다.

AVIF 인코딩 품질 변경

일반적으로 AVIF 인코딩에서 변경할 수 있는 유일한 매개변수는 quality 매개변수입니다. quality는 압축된 이미지의 품질과 파일 크기를 교환하는 매개변수입니다. 예를 들어 고품질 파일 (-q 90)은 저품질 파일 (-q 20)보다 훨씬 크지만 고품질 파일이 훨씬 더 보기 좋습니다.

5. 웹페이지에서 AVIF 이미지를 렌더링합니다.

이제 그동안의 노력을 전 세계에 보여주세요.

AVIF 이미지를 제공하는 웹페이지를 만듭니다.

avif_example.html 파일을 만듭니다.

텍스트 편집기에서 avif_example.html을 열고 다음 코드를 입력합니다.

<html>
  <head>
    <title>AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="example.avif" />
      <img src="happy_dog.jpg" />
    </picture>
  </body>
</html>

소스 파일 (이 경우 happy_dog.jpg)과 AVIF 파일 (eaxmple.avif)을 avif_example.html와 동일한 디렉터리에 복사합니다.

브라우저가 AVIF를 지원하는 경우 picture 요소를 사용하여 AVIF 이미지를 렌더링하고, 브라우저가 지원하지 않는 경우 JPEG로 대체합니다. picture 요소에 관한 자세한 내용은 여기에서 확인하세요.

Chrome에서 웹페이지를 엽니다.

html 파일을 여는 한 가지 방법은 avif_example.html을 Chrome으로 드래그하는 것입니다. HTML 파일을 여는 또 다른 방법은 HTTP 서버에서 avif_example.html를 제공하는 것입니다.

이제 Chrome에서 AVIF 이미지가 렌더링됩니다. 이미지를 마우스 오른쪽 버튼으로 클릭하고 Save image as...를 선택하여 테스트할 수 있습니다. 그러면 example.avif이 포함된 대화상자가 열립니다. Chrome 개발자 도구를 열어 example.avif가 다운로드되었는지 확인할 수도 있습니다.

6. FFmpeg로 애니메이션 AVIF 이미지 만들기

애니메이션 AVIF 이미지를 만듭니다.

다음 명령어를 실행하여 y4m 파일에서 애니메이션 AVIF 이미지를 만듭니다.

ffmpeg -i ice_qcif_15fps.y4m animated.avif

이제 나만의 애니메이션 AVIF 이미지가 만들어졌습니다.

웹페이지에서 애니메이션 AVIF 이미지를 렌더링합니다.

avif_animated_example.html 파일을 만듭니다.

텍스트 편집기에서 avif_animated_example.html을 열고 다음 코드를 입력합니다.

<html>
  <head>
    <title>Animated AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="animated.avif" />
      <img src="ice_qcif_15fps.gif" />
    </picture>
  </body>
</html>

소스 파일 (위의 경우 ice_qcif_15fps.gif)과 AVIF 파일 (animated.avif)을 avif_animated_example.html와 동일한 디렉터리에 복사합니다.

Chrome에서 웹페이지를 엽니다.

html 파일을 여는 한 가지 방법은 avif_animated_example.html을 Chrome으로 드래그하는 것입니다. HTML 파일을 여는 또 다른 방법은 HTTP 서버에서 avif_animated_example.html를 제공하는 것입니다.

이제 Chrome에서 애니메이션 AVIF 이미지가 렌더링됩니다.

제공된 샘플 미디어를 사용하는 경우 다음과 같이 표시됩니다.

아이스 링크 애니메이션

이미지를 마우스 오른쪽 버튼으로 클릭하고 Save image as...을 선택하여 애니메이션 AVIF 이미지인지 테스트할 수 있습니다. 그러면 animated.avif이 포함된 대화상자가 열립니다. Chrome 개발자 도구를 열어 animated.avif가 다운로드되었는지 확인할 수도 있습니다.

7. avifenc로 애니메이션 AVIF 이미지 만들기

소스 미디어를 y4m 형식으로 변환합니다.

avifenc는 애니메이션 AVIF 이미지를 만들기 위한 입력으로 y4m을 지원합니다. y4m 파일을 만드는 데는 FFmpeg를 사용하는 것이 좋습니다.

ffmpeg -i input.gif -pix_fmt yuvj444p -f yuv4mpegpipe output.y4m

애니메이션 AVIF 이미지를 만듭니다.

다음 명령어를 실행하여 y4m 파일에서 애니메이션 AVIF 이미지를 만듭니다.

./avifenc ice_qcif_15fps.y4m animated.avif

이제 두 번째 애니메이션 AVIF 이미지가 완성되었습니다.

웹페이지에서 애니메이션 AVIF 이미지를 렌더링합니다.

avif_animated_example.html 파일을 만듭니다.

텍스트 편집기에서 avif_animated_example.html을 열고 다음 코드를 입력합니다.

<html>
  <head>
    <title>Animated AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="animated.avif" />
      <img src="ice_qcif_15fps.gif" />
    </picture>
  </body>
</html>

소스 파일 (위의 경우 ice_qcif_15fps.gif)과 AVIF 파일 (animated.avif)을 avif_animated_example.html와 동일한 디렉터리에 복사합니다.

Chrome에서 웹페이지를 엽니다.

이제 Chrome에서 애니메이션 AVIF 이미지가 렌더링됩니다.

제공된 샘플 미디어를 사용하는 경우 다음과 같이 표시됩니다.

아이스 링크 애니메이션

AVIF 인코딩 품질 변경

ice_qcif_15fps.gif 파일은 품질이 훨씬 나쁘며 크기가 약 7배 더 큽니다. 품질 매개변수를 20으로 변경하면 AVIF의 품질을 ice_qcif_15fps.gif의 품질과 대략적으로 일치하도록 변경할 수 있습니다.

./avifenc -q 20 ice_qcif_15fps.y4m animated.avif

이제 애니메이션 AVIF 파일과 ice_qcif_15fps.gif의 품질이 거의 동일하지만 GIF 파일이 약 22배 더 큽니다.

8. 축하합니다.

AVIF 이미지 제공 코드 실습을 완료했습니다.

AVIF를 사용하면 이미지를 더 작게 만들고 웹을 통해 더 효율적으로 전송할 수 있다는 점을 이해하셨기를 바랍니다. 제이크 아치볼드의 훌륭한 게시물에서 AVIF의 기능에 대해 자세히 알아볼 수 있습니다.