當行銷與產品圖以 AVIF 進庫,但通路或套件仍要點點陣圖時,爭議通常落在透明語意、色深還原與體積閘門。本文給設計師與前端對照表+可貼指令,並對齊遠端 Mac mini M4批處理可稽核驗收。
混用策略與格式邊界見WebP/AVIF/PNG 混用清單;僅處理 WebP 回退時可併讀WebP 轉 PNG 交付矩陣;全站色彩政策見sRGB 與顯示色域清單。
工具鏈選型(ffmpeg/libavif 等思路)
先選單一主解碼路徑寫入版本庫,避免「本機過、遠端掛」。下表為實務取捨;遠端節點請三選一為主、其餘做抽樣對照。
| 路徑 | 適用 | 取捨 |
|---|---|---|
libavif avifdec |
要貼近規格解碼、批次單檔進單檔出 | 需與專案鎖同一 libavif 小版本;輸出 PNG 位深行為依編譯選項 |
| FFmpeg | 管線已統一在 ffmpeg、要順接序列幀或濾鏡 |
參數冗長;務必顯式 -pix_fmt 固定 alpha 語意 |
| ImageMagick | 設計師熟悉 magick、要同一套政策寫 policy/腳本 |
依 HEIF/AVIF delegate;大目錄時注意 policy 記憶體上限 |
來源盤點(複製即用):
ffprobe -hide_banner -select_streams v:0 -show_entries stream=pix_fmt,color_space,color_primaries -of default=nw=1:nk=1 input.avif
magick identify -verbose input.avif | egrep 'Type|Colorspace|Depth|Alpha|Profiles'
色彩與透明處理參數表
契約欄位建議寫死:交付色域(預設 sRGB)、是否嵌入 ICC、是否允許半透明、8-bit/16-bit 與是否允許二次量化(例如 pngquant)。
| 情境 | 建議 PNG 色型 | 指令錨點(示例) |
|---|---|---|
| UI 去背、需完整透明 | RGBA,8-bit(color-type 6) | magick input.avif -colorspace sRGB -define png:color-type=6 PNG32:out.png |
| 無透明、只要 sRGB 網頁圖回退 | RGB,8-bit(color-type 2) | magick input.avif -colorspace sRGB -alpha off -define png:color-type=2 PNG24:out.png |
| 需保留較高動態/梯度(少見於純網頁) | RGBA 16-bit | magick input.avif -colorspace sRGB -depth 16 PNG64:out16.png |
| 與 CI 一致的純解碼輸出 | 由解碼器直接寫 PNG | avifdec input.avif out.png 或 ffmpeg -hide_banner -i input.avif -pix_fmt rgba out.png |
抽檢嵌入與屬性:
sips -g space -g format out.png
量化提醒:若規格允許近無損再縮體積,解碼後再接
pngquant --quality=70-95 --speed 1;合約須區分「轉檔」與「再量化」責任。
批量腳本步驟與失敗重試
- 目錄契約:例如
Design/Exports/avif-in/*.avif→Design/Exports/png-out/,檔名除副檔名外不變,便於 diff。 - 單檔迴圈(ImageMagick 主路):
mkdir -p png-out quarantine failed for f in avif-in/*.avif; do b=$(basename "$f" .avif) if magick "$f" -colorspace sRGB -define png:color-type=6 "png-out/${b}.png" 2>>failed/run.log; then : else echo "{\"file\":\"$f\",\"stage\":\"decode\",\"ts\":$(date +%s)}" >>failed/run.jsonl fi done - 失敗重試:對
failed/run.jsonl內路徑以指數退避重跑(例如 sleep 2/4/8 秒),第三次仍失敗則移入quarantine/並附原因碼;磁碟滿或權限錯誤應分類為infra而非轉檔邏輯。 - 並行:遠端 M4 上建議以實際磁碟頻寬為準分批並行(例如同時 4~8 工作),避免 NVMe 佇列過深拖長尾延遲。
與設計匯出目錄聯動的驗收閾值
以下數字為可引用起點,請以品牌樣張校準;重點是「同一目錄規則+同一工具版本」可複跑。
| 品類 | 單檔位元組上限(建議) | 對來源 AVIF 倍率參考 | 抽檢動作 |
|---|---|---|---|
| App/網頁圖示 | ≤ 150 KB | PNG 不大於來源 AVIF 的 8 倍(無再量化時) | stat -f%z;邊長須為約定倍率整數 |
| 行銷靜態橫幅 | 600–900 KB | 允許至 12 倍;若超過則強制走 pngquant 或改回主檔重匯 | 每批隨機抽 5% 跑 magick compare 與前一版 diff |
| 大量截圖/說明圖 | ≤ 2 MB | 批次 P95 相對上一版波動 ≤ 20% | 寫入 manifest:檔名、sha256、位元組、工具版本字串 |
整批紅線:任一檔超過品類上限 → 不入主分支目錄;sRGB 與色型不符 → 整批降級為「待人工」並保留原始 AVIF 與日誌,便於對齊色彩政策。
常見問題
10-bit AVIF 轉 8-bit PNG 階梯明顯?屬預期取捨;要嘛接受 16-bit PNG(體積更大),要嘛回到創稿主檔在 sRGB 下重匯,而非只調副檔名。
半透明邊緣發灰?多為有損壓縮後 alpha 再被解碼合成;請固定檢視背景(白/深灰)並在 brief 寫死是否允許半透明。
下一步:固定遠端節點並把閘門寫進目錄契約
把工具版本、目錄映射、位元組上限寫進 README 或 manifest,爭議會少一半。請至官方首頁、購買與租用、價格、說明中心;站內索引技術見解。