產品與行銷交付迴圈動效時,常要在GIF與APNG間抉擇。本文提供對照表、可執行指令與遠端 M4批量驗收步驟,可直接貼上租用節點執行。
場景與交付約束
痛點在相容、體積與透明邊緣三者拉鋸,請先鎖三條約束再選格式。
- 通路:舊郵件客戶端與內網後台多偏 GIF;要柔邊透明則優先評估 APNG。
- 幀率與長度:社群常限檔案大小與秒數;高幀長迴圈易超標,規格表須寫死目標幀率與最大位元組。
- 透明:GIF 為索引透明,不適合柔邊;需平滑去背時改 APNG 或 PNG 序列,並對齊透明 FAQ與sRGB/P3 清單。
上游為 Lottie 者先讀PNG 序列矩陣;靜動混用見WebP/AVIF/PNG 清單。批次驗收應與設計稿同一色彩政策,避免螢幕預覽與線上環境各說各話。
APNG vs GIF 對照表(體積、相容性、透明度)
下表供對齊決策;實際體積依內容波動,請以樣張量測。
| 決策因子 | GIF | APNG |
|---|---|---|
| 典型體積(同幀率/同解析度粗比) | 索引色+調色板時常較小;複雜漸層可能暴衝 | 多幀 PNG壓縮;細節多時常優於 GIF,但未必總是更小 |
| 色彩與漸層 | 最多 256 色;漸層易條帶 | 真彩色為主;漸層較自然 |
| 透明度語意 | 單一透明索引;柔邊易髒 | 完整 Alpha(視匯出鏈設定) |
| 瀏覽器/郵件客戶端 | 相容面最廣 | 現代 Chromium/Firefox/Safari 佳;舊環境需自測 |
| 幀率與可變延遲 | 實務常用 8~15 fps 控制體積 | 延遲以每幀毫秒計較直觀;高幀仍吃體積 |
可引用門檻:例檔案不大於六百千位元組、寬不大於六百像素、十至十二幀每秒;圖示類可降至一至二幀每秒但邊緣須乾淨。
批量匯出與驗收步驟
假設已有 frame_%04d.png 序列,遠端 M4已裝 FFmpeg。
- 鎖契約:
README_JOB.md寫死寬高、幀率、迴圈與max_bytes。 - GIF(兩段式調色板):
ffmpeg -y -framerate 12 -i "frame_%04d.png" -vf "palettegen=stats_mode=diff" palette.png ffmpeg -y -framerate 12 -i "frame_%04d.png" -i palette.png -lavfi "fps=12,scale=480:-1:flags=lanczos[x];[x][1:v]paletteuse=dither=bayer:bayer_scale=3" promo.gif - APNG(無限迴圈):
ffmpeg -y -framerate 10 -i "frame_%04d.png" -plays 0 -f apng sticker.apng - 位元組閘門:
max=600000 for f in out/*.gif out/*.apng; do [[ -e "$f" ]] || continue sz=$(stat -f%z "$f") (( sz <= max )) || print "OVER $sz $f" done - 晉升:通過檔入
out/並附工具版本;異常用ffprobe -show_frames查幀數膨脹。大量轉檔放 M4,流程見首頁場景說明。
FAQ(偏色、體積超標)
偏色或灰邊:多為 GIF 索引色與單色透明限制;柔邊請改 APNG。硬要 GIF 時改硬邊去背並固定 palettegen 流程。
體積超標:先降 fps、縮短迴圈、縮寬;GIF 調 palette 與抖動。APNG 異常大時查未壓縮中間檔或幀數過多,必要時改交 PNG 序列。建議在 M4 節點保留同一組參數重跑對照,避免本機與伺服器結果不一致。