動態圖片格式比較：GIF、APNG、WebP、AVIF
當我們想到「動態圖片」，第一個想到的通常是 GIF。但其實 GIF 已經是 1989 年的技術了。現代有多種更先進的動態圖片格式可供選擇，它們在畫質、壓縮效率和功能性上都優於 GIF。本文將比較四種主要的動態圖片格式。
四大動態圖片格式一覽
| 格式 | 年份 | 色彩深度 | 壓縮方式 | 透明度 | 瀏覽器支援 |
|---|---|---|---|---|---|
| GIF | 1989 | 8 bit (256 色) | LZW 無損 | 1 bit | 100% |
| APNG | 2004 | 24/32 bit | DEFLATE 無損 | 8 bit Alpha | ~97% |
| WebP | 2010 | 24/32 bit | VP8 有損/無損 | 8 bit Alpha | ~97% |
| AVIF | 2019 | 8-12 bit HDR | AV1 有損/無損 | 8 bit Alpha | ~90% |
APNG：PNG 的動畫版本
APNG（Animated PNG）由 Mozilla 在 2004 年提出，是 PNG 格式的動畫擴展。它保留了 PNG 的所有優點 — 真彩色、8 位元透明度、無損壓縮 — 並加入了動畫功能。
- 優點：畫質遠優於 GIF，支援真彩色和半透明，向下相容（不支援的瀏覽器只顯示第一幀）
- 缺點：檔案比 GIF 更大（因為每幀都是完整的 PNG），非 W3C 官方標準
- 適用場景：需要高畫質和透明背景的動態圖示、表情貼圖
WebP 動畫：Google 的現代解決方案
WebP 動畫是 Google 在 2010 年推出的 WebP 格式的動畫功能。它使用 VP8 視訊編碼技術進行壓縮，效率遠高於 GIF 的 LZW。
- 優點：比 GIF 小 64%（Google 官方數據），支援有損和無損壓縮，支援 24 位元色彩和 8 位元透明度
- 缺點：編碼和解碼較耗 CPU，部分舊瀏覽器不支援
- 適用場景：網頁上的動態內容，需要在檔案大小和畫質之間取得平衡的場景
重點比較：同樣的動畫內容，WebP 動畫的檔案大小通常只有 GIF 的三分之一到四分之一，而畫質卻明顯更好（因為支援更多顏色和更好的壓縮）。
AVIF 動畫：新世代的挑戰者
AVIF（AV1 Image File Format）基於 AV1 視訊編碼，由 Alliance for Open Media 在 2019 年推出。它代表了圖片壓縮技術的最前沿。
- 優點：壓縮效率最高（比 WebP 再小 20-30%），支援 HDR 和廣色域，完全免費的開放標準
- 缺點：編碼速度慢，瀏覽器支援仍在擴展中，工具鏈尚不完善
- 適用場景：對檔案大小要求極高的場景，前沿技術應用
實際檔案大小比較
以一個 320x240、10 秒、15fps 的動畫為例：
| 格式 | 估計檔案大小 | 相對於 GIF |
|---|---|---|
| GIF | ~3.0 MB | 100% |
| APNG | ~3.5 MB | 117%（無損更大） |
| WebP（有損） | ~0.8 MB | 27% |
| AVIF（有損） | ~0.5 MB | 17% |
| MP4 影片 | ~0.3 MB | 10% |
如何選擇？
- 最大相容性：GIF（100% 瀏覽器支援）
- 最佳畫質 + 透明度：APNG
- 最佳平衡：WebP 動畫（畫質好、檔案小、支援度高）
- 最小檔案：AVIF 動畫或 MP4 影片
結語
雖然 GIF 在文化上仍然佔有一席之地，但從技術角度來看，WebP 和 AVIF 是更好的動態圖片解決方案。建議在支援的平台上優先使用 WebP 動畫，同時提供 GIF 作為 fallback 選項。
參考文獻
- Mozilla. "APNG Specification." Mozilla Wiki, 2014. https://wiki.mozilla.org/APNG_Specification
- Google. "WebP: A new image format for the Web." Google Developers, 2024. https://developers.google.com/speed/webp
- Alliance for Open Media. "AVIF Specification." AOMedia, 2019. https://aomediacodec.github.io/av1-avif/
- Can I Use. "Animated image format support." Can I Use, 2024. https://caniuse.com/