背景

業(yè)務(wù)中大量使用gif動(dòng)態(tài)圖，動(dòng)畫(huà)不細(xì)膩，體積大，占用不必要的帶寬，根據(jù)這幾點(diǎn)，尋找能替代gif圖的方案(動(dòng)畫(huà)流程，體積小)

動(dòng)態(tài)圖類型

GIF

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

顏色

GIF 每個(gè)像素只有 8 bit，也就是說(shuō)只有 256 種顏色，于是很多人誤以為 GIF 不支持 24 bit RGB，但實(shí)際上，GIF 的限制是每一幀最多只能有 256 種顏色，但是每種顏色可以是 24 bit 的。不過(guò)即使是這樣，256 種顏色還是太少了，這就導(dǎo)致了 GIF 的畫(huà)質(zhì)都比較差。

而 APNG 和 WebP 則完全沒(méi)有這方面的限制。

透明

GIF 雖然也支持透明，但不支持半透明，只支持完全透明或者完全不透明。如果把一個(gè)邊緣是半透明的圖片轉(zhuǎn)換成 GIF，就會(huì)出現(xiàn)雜邊問(wèn)題。

兼容性

是唯一GIF的優(yōu)勢(shì)了，幾乎所有瀏覽器都支持GIF

---

APNG

APNG是什么

APNG 是什么？相對(duì)于 GIF 有哪些優(yōu)勢(shì)？APNG 是一個(gè)基于 PNG 格式的位圖動(dòng)畫(huà)格式圖片，因?yàn)閷?duì)于一直以來(lái)的特點(diǎn)就是以動(dòng)態(tài)顯示為主的 GIF，為了更好地在網(wǎng)絡(luò)上傳播，它需要犧牲質(zhì)量來(lái)降低體積，圖像信息比較多的情況下，顆粒感很明顯。APNG 是普通 png 圖片的升級(jí)版，它的后綴依然是.png，包含動(dòng)態(tài)的情況下體積會(huì)比普通靜態(tài) png 打出數(shù)倍，可以做到無(wú)損的情況展示動(dòng)態(tài)。其誕生的目的是為了替代老舊的 GIF 格式，但它目前并沒(méi)有獲得 PNG 組織官方的認(rèn)可。

APNG應(yīng)用場(chǎng)景

GIF VS APNG

兼容性

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

對(duì)比

GIF：

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

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

缺點(diǎn)

• 很難被標(biāo)準(zhǔn)化
• 生成比較繁瑣(特殊處理才能比原有GIF圖體積大，在壓縮上并沒(méi)有webp效果好,參考動(dòng)效輸出：用APNG代替GIF完美輸出動(dòng)態(tài)效果)

---

WEBP

先放一個(gè) WebP 轉(zhuǎn)換的示例鏈接，可以直觀感受 WebP 在圖片大小上的優(yōu)勢(shì)。

DEMO地址

WebP，是一種同時(shí)提供了有損壓縮與無(wú)損壓縮的圖片文件格式，派生自視頻編碼格式 VP8。WebP 最初在2010年發(fā)布，目標(biāo)是減少文件大小，但達(dá)到 和 JEPG 格式相同的圖片質(zhì)量，希望能夠減少圖片檔在網(wǎng)絡(luò)上的發(fā)送時(shí)間

同等質(zhì)量但是圖片更小

GIF圖

webp

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

此外，如果將原始的高質(zhì)量視頻轉(zhuǎn)換為WebP(而不僅僅是像我們?cè)谏厦娴氖纠心菢訌腉IF轉(zhuǎn)換為WebP)，則與WebP格式的全彩色支持相比，您將獲得更好的視覺(jué)效果動(dòng)畫(huà)(GIF中最多只能顯示256種顏色。)

壓縮之后質(zhì)量無(wú)明顯變化
JPEG 格式的圖片在質(zhì)量較低時(shí)會(huì)有明顯的缺陷，尤其是當(dāng)圖片包含微小的細(xì)節(jié)或文本時(shí)，但 WebP 格式則沒(méi)有明顯的缺陷，但也會(huì)在低質(zhì)量設(shè)置時(shí)產(chǎn)生稍微模糊的圖像

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

支持動(dòng)態(tài)圖(Animated WebP)

兼容性不是很樂(lè)觀

蘋(píng)果的Safari瀏覽器及其iOS Safari瀏覽器將在Safari 14和iOS 14(預(yù)計(jì)于2020年9月發(fā)布)中都具有WebP支持

缺點(diǎn)：瀏覽器兼容性

兼容場(chǎng)景：

WEBP兼容地址
picture兼容地址

• 解決兼容：
• 七牛提供了高級(jí)圖像處理的功能
• 通過(guò)URL后拼接參數(shù)，能把gif圖處理成webp
• 1.安卓下七牛CDN借用高級(jí)圖像處理功能form成webp(IOS維持GIF圖原樣)
• 2.JS判斷是否支持webp如果支持，把gif圖通過(guò)七牛處理成webp動(dòng)態(tài)圖，不支持維持原樣。
• HTML5標(biāo)簽 picture,是一套精簡(jiǎn)的兼容方案，瀏覽器兼容可通過(guò)此標(biāo)簽來(lái)展示對(duì)應(yīng)的圖片

應(yīng)該用webp嘛？

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

---

參考文章：

客戶端上動(dòng)態(tài)圖格式對(duì)比

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

動(dòng)效輸出：用APNG代替GIF完美輸出動(dòng)態(tài)效果

APNG的那些事

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。