提供 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」下拉式方塊

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，以便靜態連結至 libaom 編碼器、dav1d 解碼器和 libyuv 處理程式庫。

  1. 建構指令列編碼工具 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 圖片

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

如要執行 avifenc，最基本的參數是設定輸入和輸出檔案。

./avifenc happy_dog.jpg example.avif

現在您已擁有自己的第二張 AVIF 圖片！

  1. 變更 AVIF 編碼的品質。

一般來說，您可能只想變更 AVIF 編碼的 quality 參數。quality 參數會以壓縮後圖片的品質換取檔案大小。舉例來說，高品質檔案 (-q 90) 會比低品質檔案 (-q 20) 大得多，但高品質檔案的畫質會好很多。

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，我們會使用 picture 元素算繪 AVIF 圖片，如果瀏覽器不支援，則會改用 JPEG。如要進一步瞭解 picture 元素，請參閱這篇文章。

  1. 在 Chrome 中開啟網頁。

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

現在 Chrome 應該會算繪 AVIF 圖片。如要測試這項功能，請在圖片上按一下滑鼠右鍵並選擇 Save image as...，系統應會開啟含有 example.avif 的對話方塊。您也可以開啟 Chrome 開發人員工具，查看 example.avif 是否已下載。

6. 使用 FFmpeg 建立 AVIF 動畫圖片

  1. 建立 AVIF 動畫圖片。

執行這項指令，即可從 y4m 檔案建立動畫 AVIF 圖片。

ffmpeg -i 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。

現在 Chrome 應該會算繪動畫 AVIF 圖片。

如果使用提供的範例媒體，畫面應大致如下所示：

溜冰場動畫

如要測試這是否為動畫 AVIF 圖片，請在圖片上按一下滑鼠右鍵並選擇 Save image as...，系統應會開啟含有 animated.avif 的對話方塊。您也可以開啟 Chrome 開發人員工具，查看 animated.avif 是否已下載。

7. 使用 avifenc 建立 AVIF 動畫圖片

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

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

ffmpeg -i input.gif -pix_fmt yuvj444p -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。

現在 Chrome 應該會算繪動畫 AVIF 圖片。

如果使用提供的範例媒體，應該會看到如下畫面：

溜冰場動畫

如要測試這是否為動畫 AVIF 圖片，請在圖片上按一下滑鼠右鍵並選擇 Save image as...，系統應會開啟含有 animated.avif 的對話方塊。您也可以開啟 Chrome 開發人員工具，查看 animated.avif 是否已下載。

  1. 變更 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 的功能，請參閱 Jake Archibald 的文章。