背景

業務中大量使用gif動態圖，動畫不細膩，體積大，占用不必要的帶寬，根據這幾點，尋找能替代gif圖的方案(動畫流程，體積小)

動態圖類型

GIF

GIF 是一個非常古老的格式，1987 年誕生，最后一個版本是 1989 年。(這就是為什么 GIF 文件頭的 magic number 是 GIF89a)

顏色

GIF 每個像素只有 8 bit，也就是說只有 256 種顏色，于是很多人誤以為 GIF 不支持 24 bit RGB，但實際上，GIF 的限制是每一幀最多只能有 256 種顏色，但是每種顏色可以是 24 bit 的。不過即使是這樣，256 種顏色還是太少了，這就導致了 GIF 的畫質都比較差。

而 APNG 和 WebP 則完全沒有這方面的限制。

透明

GIF 雖然也支持透明，但不支持半透明，只支持完全透明或者完全不透明。如果把一個邊緣是半透明的圖片轉換成 GIF，就會出現雜邊問題。

兼容性

是唯一GIF的優勢了，幾乎所有瀏覽器都支持GIF

---

APNG

APNG是什么

APNG 是什么？相對于 GIF 有哪些優勢？APNG 是一個基于 PNG 格式的位圖動畫格式圖片，因為對于一直以來的特點就是以動態顯示為主的 GIF，為了更好地在網絡上傳播，它需要犧牲質量來降低體積，圖像信息比較多的情況下，顆粒感很明顯。APNG 是普通 png 圖片的升級版，它的后綴依然是.png，包含動態的情況下體積會比普通靜態 png 打出數倍，可以做到無損的情況展示動態。其誕生的目的是為了替代老舊的 GIF 格式，但它目前并沒有獲得 PNG 組織官方的認可。

APNG應用場景

GIF VS APNG

兼容性

詳情兼容情況
對于 APNG 而言，支持的瀏覽器只有 Firefox 和 Safari，同時 Chrome 59 也將支持 APNG，

對比

GIF：

最多支持 8 位 256 色，色階過渡糟糕，圖片具有顆粒感
不支持 Alpha 透明通道，邊緣有雜邊
APNG：

支持 24 位真彩色圖片
支持 8 位 Alpha 透明通道
向下兼容 PNG

缺點

• 很難被標準化
• 生成比較繁瑣(特殊處理才能比原有GIF圖體積大，在壓縮上并沒有webp效果好,參考動效輸出：用APNG代替GIF完美輸出動態效果)

---

WEBP

先放一個 WebP 轉換的示例鏈接，可以直觀感受 WebP 在圖片大小上的優勢。

DEMO地址

WebP，是一種同時提供了有損壓縮與無損壓縮的圖片文件格式，派生自視頻編碼格式 VP8。WebP 最初在2010年發布，目標是減少文件大小，但達到 和 JEPG 格式相同的圖片質量，希望能夠減少圖片檔在網絡上的發送時間

同等質量但是圖片更小

GIF圖

webp

從動畫GIF切換到動畫WebP的結果令人印象深刻-在上面顯示的示例中，圖像大小和帶寬減少了65-90％，并且具有相同的視覺效果。盡管WebP僅由少數瀏覽器使用，但是最新版本的Chrome變得越來越流行，因此WebP的重要性正在上升。

此外，如果將原始的高質量視頻轉換為WebP(而不僅僅是像我們在上面的示例中那樣從GIF轉換為WebP)，則與WebP格式的全彩色支持相比，您將獲得更好的視覺效果動畫(GIF中最多只能顯示256種顏色。)

壓縮之后質量無明顯變化
JPEG 格式的圖片在質量較低時會有明顯的缺陷，尤其是當圖片包含微小的細節或文本時，但 WebP 格式則沒有明顯的缺陷，但也會在低質量設置時產生稍微模糊的圖像

完美支持無損圖像
WebP 同樣支持一如 PNG 格式的無損模式，想要生成無損的 WebP 文件，只需將「quality」變量設置為 100

支持動態圖(Animated WebP)

兼容性不是很樂觀

蘋果的Safari瀏覽器及其iOS Safari瀏覽器將在Safari 14和iOS 14(預計于2020年9月發布)中都具有WebP支持

缺點：瀏覽器兼容性

兼容場景：

WEBP兼容地址
picture兼容地址

• 解決兼容：
• 七牛提供了高級圖像處理的功能
• 通過URL后拼接參數，能把gif圖處理成webp
• 1.安卓下七牛CDN借用高級圖像處理功能form成webp(IOS維持GIF圖原樣)
• 2.JS判斷是否支持webp如果支持，把gif圖通過七牛處理成webp動態圖，不支持維持原樣。
• HTML5標簽 picture,是一套精簡的兼容方案，瀏覽器兼容可通過此標簽來展示對應的圖片

應該用webp嘛？

由于WebP在全球范圍內的支持率徘徊在80％左右，因此使用此圖像格式替代PNG和JPEG在很大程度上很有意義。需要特別注意的是，無論如何實現WebP，您都只是向支持WebP的瀏覽器提供WebP圖像，然后將默認格式(如PNG和JPEG)提供給其他瀏覽器。使用WebP不會破壞圖像。可以將其視為增加而不是更改。與PNG和JPEG相比，還需要考慮其他一些因素，例如瀏覽器市場份額，當前流量和WebP文件大小。

---

參考文章：

客戶端上動態圖格式對比

Animated WebP - how to convert animated GIF to WebP and save up to 90% bandwidth

動效輸出：用APNG代替GIF完美輸出動態效果

APNG的那些事

總結

以上是生活随笔為你收集整理的兼容超大图片的处理_动态图适用性调研与兼容性方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。