UltKit

GIF 轉 AVIF 轉換器

動態 AVIF 在 img 標籤中播放起來和 GIF 一樣,但以 AV1 影片編碼壓縮,同一段循環動畫放在網頁上只需原本一小部分的檔案大小。

影片轉檔

或將MP4, MOV, MKV … 檔案拖曳到這裡 ·

每個檔案最大 95 MB· 最多 20 個檔案· 30 分鐘後刪除

輸出

檔案會在我們的伺服器上處理,並於 30 分鐘後刪除。

使用方式

  1. 1

    加入 GIF 檔案

    最多可上傳 20 個動態 GIF,每個不超過 95 MB。短的 MP4 或 WebM 影片也可以直接轉成動態 AVIF。

  2. 2

    設定寬度

    動態輸出預設的寬度為 480 px。若想保留原尺寸,請在進階設定中輸入 GIF 本身的寬度;循環播放維持為無限循環。

  3. 3

    轉換為 AVIF

    按下轉換為 AVIF,再下載 .avif 檔案,即可直接放進網站的 picture 元素中使用。

為什麼網站要把 GIF 轉成 AVIF

GIF 會把每個影格存成獨立的 256 色圖片。幾秒鐘的產品展示或螢幕錄製教學動畫就可能有好幾 MB,在登陸頁上,這一張圖往往比所有程式碼加起來還大。Google 的 Lighthouse 稽核就有專門針對這類檔案的檢查項目:「使用影片格式呈現動態內容」。

AVIF 由 Alliance for Open Media 於 2019 年定案,是以 AV1 影片編碼器為基礎、封裝在 HEIF 容器中的靜態圖片格式。動態 AVIF 是一段 AV1 影像序列:後面的影格由前面的影格預測而來,和影片檔完全相同,因此只有影格之間的變化才會佔用位元。

GIF 與動態 AVIF 比較:新格式多了什麼

from ↓ · to →每個影格超過 256 色平滑的透明邊緣以動態預測的影格10-bit color所有圖片檢視器都能開啟
GIF– GIF to 每個影格超過 256 色: no– GIF to 平滑的透明邊緣: no– GIF to 以動態預測的影格: no– GIF to 10-bit color: noGIF to 所有圖片檢視器都能開啟: yes
動態 AVIF動態 AVIF to 每個影格超過 256 色: yes動態 AVIF to 平滑的透明邊緣: yes動態 AVIF to 以動態預測的影格: yes動態 AVIF to 10-bit color: yes– 動態 AVIF to 所有圖片檢視器都能開啟: no
supported not offered此為格式規格上的功能。桌面圖片檢視器和聊天軟體對動態 AVIF 的支援仍不一致。

GIF

Graphics Interchange Format

GIF 由 CompuServe 於 1987 年推出,至今仍是支援最廣的短篇循環動畫格式。它屬於無損格式,但每個影格最多只能使用 256 色的調色盤,因此照片和漸層會出現色帶與抖色。它只支援開/關(1 位元)透明,曲線形狀的邊緣會有鋸齒。動畫 GIF 往往比同一段影片的 MP4 或 WebP 大得多。所有瀏覽器、聊天應用程式和社群平台都能播放 GIF。

壓縮方式
無損
透明度
支援
動畫
支援
推出年份
1987 · CompuServe
GIF 轉檔工具

AVIF

AV1 影像檔案格式

AVIF 以 AV1 視訊編碼壓縮靜態影像與影像序列,由開放媒體聯盟於 2019 年定案。在相同視覺品質下,檔案通常比 JPEG 與 WebP 更小,並支援透明度、動畫、廣色域與 HDR。編碼速度比舊格式慢,在低品質設定下,極細緻的紋理可能顯得被抹平。目前所有主流瀏覽器都能顯示 AVIF,但許多桌面應用程式、社群平台與舊裝置無法開啟。

壓縮方式
有損或無損
透明度
支援
動畫
支援
推出年份
2019 · Alliance for Open Media
AVIF 轉檔工具

網站經營者在意頁面載入量時,就會把 GIF 轉成 AVIF:首頁主視覺循環動畫、產品展示和介面操作示範仍能像 img 標籤一樣自動播放,檔案大小卻大幅下降,256 色造成的色帶也會消失。

什麼情況適合改用動態 AVIF

適合使用 AVIF 的情況

  • 自己網站上的主視覺與功能展示循環動畫
  • 含漸層和陰影的產品介面示範
  • 以載入速度和 Core Web Vitals 評分的頁面
  • 需要柔和透明邊緣的動畫

適合保留 GIF 的情況

  • 電子報與電子郵件簽名檔
  • 只能預覽 GIF 的論壇和聊天軟體
  • 上傳到較舊版本的 CMS
  • 之後需要編輯影格的對象

提供動態 AVIF 並設定備援格式

目前版本的 Chrome、Edge、Firefox 和 Safari 都能播放動態 AVIF;Firefox 最晚加入動畫支援,是在 113 版。在 picture 元素中發布,並以 GIF 作為備援,不需額外成本,還能照顧舊版瀏覽器。AVIF 的編碼比寫出 GIF 慢,所以較長的影片轉換時間會明顯比轉成 WebP 久。

如果這段循環動畫是要傳到聊天軟體,而不是放在自己的網站,影片檔會更保險:GIF 轉 MP4 在各處都能播放。AVIF、HEIC 與 WebP 說明則詳細比較了這三種新型圖片格式。

GIF 轉 AVIF 常見問題

動態 AVIF 會像 GIF 一樣循環播放嗎?

可以。循環播放選項預設為無限循環,瀏覽器在 img 標籤中會像播放 GIF 一樣重複播放 AVIF 影像序列,沒有控制列也沒有聲音。若是片頭動畫、想停在最後一格,請選擇只播放一次。

為什麼我的 AVIF 只顯示第一格畫面?

檢視器支援靜態 AVIF,但不支援 AVIF 影像序列。較舊的圖片檢視器,以及 2023 年發布的 113 版之前的 Firefox 都是這樣。請用最新版的 Chrome、Edge、Firefox 或 Safari 開啟檔案,確認動畫效果。

AVIF 會保留 GIF 的透明背景嗎?

AVIF 格式支援完整的 Alpha 色版,處理透明的效果遠勝於 GIF 只有開或關的像素。發布前請在有顏色或棋盤格的背景上檢查結果,因為原始 GIF 中貼上的底色仍會顯示出來。

可以把動態 AVIF 上傳到 WordPress 嗎?

2024 年發布的 WordPress 6.5 已在媒體庫加入 AVIF 支援,前提是伺服器的圖片程式庫也支援。較舊的版本會拒絕上傳,這時請保留 GIF,或改用 WordPress 自 5.8 起就支援的 GIF 轉 WebP。

如何顯示 AVIF 並以 GIF 作為備援?

把兩者包在 picture 元素中:先用 type 為 image/avif 的 source 標籤指向 AVIF,再用 img 標籤放 GIF。能解碼 AVIF 的瀏覽器會載入較小的檔案,其他瀏覽器則退回使用 GIF,不會出現破圖。