이 페이지는 Cloud Translation API를 통해 번역되었습니다.

AVIF 이미지 제공

1. 소개

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

AVIF란 무엇인가요?

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

AVIF를 사용해야 하는 이유

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

학습할 내용

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

필요한 항목

Chrome 버전 85 이상
텍스트 편집기
cmake
git
닌자
이미지입니다. 여기에 주소를 입력했습니다.
FFmpeg

2. Squoosh로 AVIF 이미지 만들기

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

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

Squoosh 스크린샷

압축 메뉴에서 AVIF를 선택합니다.

드롭다운 메뉴

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

빠른 다운로드 버튼

원본 샘플 이미지는 3,340KB이고 압축된 이미지는 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에서 자세한 내용을 확인할 수 있습니다. avifenc를 빌드하여 av1 인코더 및 디코더 라이브러리 libaom에 정적으로 연결되도록 합니다.

Libaom을 받아서 빌드하세요.

libavif 확장 프로그램 디렉터리로 변경합니다.

cd ext

다음 명령어는 libaom 소스 코드를 가져와서 libaom을 정적으로 빌드합니다.

./aom.cmd

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

cd ../

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

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

mkdir build

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

cd build

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

cmake -DCMAKE_BUILD_TYPE=Release -DAVIF_LOCAL_AOM=1 -DAVIF_CODEC_AOM=1 -DBUILD_SHARED_LIBS=0 -DAVIF_BUILD_APPS=1 ../

avifenc를 빌드합니다.

make

avifenc를 빌드했습니다.

4. avifenc로 AVIF 이미지 만들기

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

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

./avifenc happy_dog.jpg example.avif --min 0 --max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a sharpness=3 -y 420

Avifenc에는 품질과 속도에 영향을 미치는 다양한 옵션이 있습니다. 옵션을 확인하고 자세히 알아보려면 ./avifenc를 실행하세요.

이제 두 번째 AVIF 이미지가 생겼습니다.

인코더 속도 향상

머신에 있는 코어 수에 따라 변경하면 좋을 수 있는 한 가지 매개변수는 --jobs 매개변수입니다. 이 매개변수는 avifenc가 AVIF 이미지를 만드는 데 사용할 스레드 수를 설정합니다. 이 명령줄을 실행해 봅니다.

./avifenc happy_dog.jpg example.avif --jobs 8

이렇게 하면 AVIF 이미지를 만들 때 8개의 스레드를 사용하도록 avifenc에 지시합니다. 제 컴퓨터에서는 AVIF 인코딩 속도가 5배 빨라집니다.

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를 지원하는 경우 요소를 사용하여 AVIF 이미지를 렌더링하고 브라우저가 지원하지 않는 경우 JPEG로 대체합니다. 에 관한 자세한 내용은 여기에서 확인하실 수 있습니다.

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

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

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

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

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

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

ffmpeg -i input.gif -pix_fmt yuv420p -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에서 웹페이지를 엽니다.

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

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

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

아이스링크 애니메이션

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

7. 축하합니다.

AVIF 이미지 제공 Codelab을 완료했습니다.

AVIF로 이미지를 더 작고 효율적으로 웹을 통해 전송하는 데 어떤 도움이 되는지 분명 이해하셨기를 바랍니다. 제이크 아치볼드의 유용한 게시물에서 AVIF의 기능에 대해 자세히 알아볼 수 있습니다.