GIF 轉 AVIF 轉換器
動態 AVIF 在 img 標籤中播放起來和 GIF 一樣,但以 AV1 影片編碼壓縮,同一段循環動畫放在網頁上只需原本一小部分的檔案大小。
影片轉檔
或將MP4, MOV, MKV … 檔案拖曳到這裡 ·
每個檔案最大 95 MB· 最多 20 個檔案· 30 分鐘後刪除
檔案會在我們的伺服器上處理,並於 30 分鐘後刪除。
數值越低,畫質越好,檔案也越大。18 看起來與來源相同,23 為預設值,28 以上會出現明顯的模糊。
每秒影格數。除非平台有特定要求,否則請保持與來源相同;GIF 使用 15–20 fps 就已足夠。
僅用於 PowerPoint 檔案和單張靜態圖片:每張投影片或圖片在畫面上停留的時間。
自動會為 MP4/MOV 使用 AAC,為 WebM 使用 Opus。若新格式支援,「保留原始音訊」會原封不動保留原本的聲音。
192 kbps 對音樂而言已聽不出差異;128 kbps 足以應付語音。
動畫寬度(像素),高度會依長寬比自動調整。480 px 適合聊天使用,720 px 以上可得到高畫質 GIF,但檔案會大得多。
GIF 最多只能包含 256 種顏色。顏色越少檔案越小,但漸層和膚色會出現色帶。
以細緻的圖樣混合色盤中的顏色來掩蓋色帶。Sierra 的效果最平滑;不使用則檔案最小。
動畫是無限重複播放,還是播放一次後停止。
選填。可輸入秒數(例如 75)或分:秒(1:15)。留空則從頭開始。
選填。格式與開始時間相同。留空則保留到結尾。
轉換後的檔案大小會等於或略小於此值。
使用方式
- 1
加入 GIF 檔案
最多可上傳 20 個動態 GIF,每個不超過 95 MB。短的 MP4 或 WebM 影片也可以直接轉成動態 AVIF。
- 2
設定寬度
動態輸出預設的寬度為 480 px。若想保留原尺寸,請在進階設定中輸入 GIF 本身的寬度;循環播放維持為無限循環。
- 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: no | GIF to 所有圖片檢視器都能開啟: yes |
| 動態 AVIF | 動態 AVIF to 每個影格超過 256 色: yes | 動態 AVIF to 平滑的透明邊緣: yes | 動態 AVIF to 以動態預測的影格: yes | 動態 AVIF to 10-bit color: yes | – 動態 AVIF to 所有圖片檢視器都能開啟: no |
GIF
Graphics Interchange Format
GIF 由 CompuServe 於 1987 年推出,至今仍是支援最廣的短篇循環動畫格式。它屬於無損格式,但每個影格最多只能使用 256 色的調色盤,因此照片和漸層會出現色帶與抖色。它只支援開/關(1 位元)透明,曲線形狀的邊緣會有鋸齒。動畫 GIF 往往比同一段影片的 MP4 或 WebP 大得多。所有瀏覽器、聊天應用程式和社群平台都能播放 GIF。
- 壓縮方式
- 無損
- 透明度
- 支援
- 動畫
- 支援
- 推出年份
- 1987 · CompuServe
AVIF
AV1 影像檔案格式
AVIF 以 AV1 視訊編碼壓縮靜態影像與影像序列,由開放媒體聯盟於 2019 年定案。在相同視覺品質下,檔案通常比 JPEG 與 WebP 更小,並支援透明度、動畫、廣色域與 HDR。編碼速度比舊格式慢,在低品質設定下,極細緻的紋理可能顯得被抹平。目前所有主流瀏覽器都能顯示 AVIF,但許多桌面應用程式、社群平台與舊裝置無法開啟。
- 壓縮方式
- 有損或無損
- 透明度
- 支援
- 動畫
- 支援
- 推出年份
- 2019 · Alliance for Open Media
網站經營者在意頁面載入量時,就會把 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,不會出現破圖。