提供 AVIF 圖片

1. 簡介

平均而言，圖片載入網頁所需的位元組容量超過 60%。使用 AVIF 可縮小圖片並提高網站載入速度。

什麼是 AVIF？

AVIF 是衍生自 AV1 影片位元的一種新圖片格式。AVIF 是基於壓縮效率而設計，

為何要啟用 AVIF？

AVIF 圖片遠小於相同或更佳的 JPEG、PNG、GIF 或 WebP 圖片。

學習目標

  • 如何利用圖片製作 AVIF 圖片
  • 如何顯示網頁上的 AVIF 圖片

軟硬體需求

2. 使用 Squoosh 建立 AVIF 圖片

Squoosh 是圖片壓縮網頁應用程式。透過仲裁，您可以輕鬆將圖片壓縮為 AVIF 圖片。

  1. 開啟 https://squoosh.app
  2. 將本機圖片拖曳到 Squoosh 上。

Squoosh 螢幕截圖

  1. 從 [壓縮] 下拉式方塊中選擇 [AVIF]。

「紅」下拉式選單方塊

接著，Squoosh 將圖片壓縮為 AVIF 圖片。Squoosh 完成後，右下角會顯示 AVIF 圖片的下載按鈕，以及一些統計資料。

Squoosh 下載按鈕

原始範例圖片為 3340 KB，壓縮後的圖片為 378 KB。這個範例圖片經過壓縮後，比原始圖片小 10 倍！

  1. 下載 AVIF 圖片

按一下下載按鈕，AVIF 圖片就會儲存至您的本機磁碟。

您現在可以取得自己的 AVIF 圖片！

3. 建立指令列編碼器 avifenc

avifenc 是一款可將 PNG 和 JPEG 圖片轉換為 AVIF 圖片的指令列應用程式。avifenc 會使用 libavif，這個程式庫可解碼及編碼 AVIF 圖片。如果您想將大量圖片轉換為 AVIF，建議您使用指令列編碼器 avifenc。

  1. 取得程式碼。
git clone https://github.com/AOMediaCodec/libavif.git
  1. 將目錄變更為 libavif。
cd libavif/

您可以透過許多不同的方式設定 avifenc 和 libavif 來建構內容。詳情請參閱 libavif。我們會建構 avifenc，使其以靜態方式連結至 av1 編碼器和解碼器程式庫 libaom。

  1. 取得並建構程式庫。

切換至 libavif 擴充功能目錄。

cd ext

下一個指令將提取 libaom 原始碼，並透過靜態方式建構 libaom。

./aom.cmd

將目錄變更為 libavif。

cd ../
  1. 建構命令列編碼工具 avifenc。

建議您為航空建立建構目錄。

mkdir build

變更為建構目錄。

cd build

建立航空的建構檔案。

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

建立航空。

make

您已成功建立航空資源！

4. 建立具有功用的 AVIF 圖片

  1. 使用預設設定建立 AVIF 圖片。

最常執行的素材資源參數，是設定輸入和輸出檔案。

./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 圖片！

  1. 加快編碼器的運作速度。

視機器上的核心數量而定，其中一項實用的參數可能是 --jobs 參數。這個參數可設定要使用多少執行緒建立 AVIF 圖片。請嘗試執行這個指令列。

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

這指示使用者在建立 AVIF 圖片時，使用 8 個執行緒。我的電腦可將 AVIF 編碼速度提升為 5 倍。

5. 在網頁上轉譯 AVIF 圖片。

現在，讓我們向全世界展現你努力的成果。

  1. 建立提供 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 格式的備用素材資源。如要進一步瞭解 ，請參閱本文。

  1. 在 Chrome 中開啟網頁。

開啟 HTML 檔案的方法之一，就是將 avif_example.html 拖曳到 Chrome 中。另一個開啟 HTML 檔案的方式，是透過 HTTP 伺服器提供 avif_example.html。

現在，AVIF 圖片應該會在 Chrome 中順利顯示。如要進行測試，請在圖片上按一下滑鼠右鍵，然後選擇「Save image as...」，畫面上應會開啟含有 example.avif 的對話方塊。另一種方式是開啟 Chrome 開發人員工具，並查看已下載 example.avif。

6. 製作動畫 AVIF 圖片

  1. 將來源媒體轉換成 y4m 格式。

avifenc 支援 y4m 做為建立 AVIF 圖片動畫的輸入內容。如要建立 y4m 檔案，建議您使用 FFmpeg。

ffmpeg -i input.gif -pix_fmt yuv420p -f yuv4mpegpipe output.y4m
  1. 製作動畫 AVIF 圖片。

執行下列指令，從 y4m 檔案建立 AVIF 動畫圖片。

avifenc ice_qcif_15fps.y4m animated.avif

您現可擁有自己的動畫 AVIF 圖片！

  1. 在網頁中轉譯動畫 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 相同的目錄中。

  1. 在 Chrome 中開啟網頁。

開啟 HTML 檔案的方法之一，就是將 avif_animated_example.html 拖曳到 Chrome 中。另一個開啟 HTML 檔案的方式，是透過 HTTP 伺服器提供 avif_animated_example.html。

現在，您的動畫 AVIF 圖片應該會顯示在 Chrome 中。

如果使用所提供的範例媒體，看起來會像這樣：

動畫溜冰場

如要測試這張動畫 AVIF 圖片，請在圖片上按一下滑鼠右鍵，然後選擇「Save image as...」，畫面上應會開啟含有 animated.avif 的對話方塊。另一種方式是開啟 Chrome 開發人員工具，並查看已下載 animated.avif。

7. 恭喜！

您已完成提供 AVIF 圖片程式碼研究室！

希望您已清楚瞭解 AVIF 如何協助您縮小圖片，並且提高圖片在網路上的傳輸效率。如要進一步瞭解 AVIF 的功能，請參閱 Jake Archibald 撰寫的這篇文章。