兼容超大图片的处理_动态图适用性调研与兼容性方案
背景
業務中大量使用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的那些事
總結
以上是生活随笔為你收集整理的兼容超大图片的处理_动态图适用性调研与兼容性方案的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: python 去除str的引号 去除括号
- 下一篇: 金士顿u盘量产工具_与时俱进,金士顿双接