什么是WebP格式圖片

WebP,一種支持有損壓縮和無損壓縮的圖片文件格式,派生自圖像編碼格式 VP8。根據 Google 的測試,無損壓縮后的 WebP 比 PNG 文件少了 45% 的文件大小,即使這些 PNG 文件經過其他壓縮工具壓縮之后,WebP 還是可以減少 28% 的文件大小。

基礎圖片相關的知識

圖片是由很多像素點組成的,每個像素點只能保存一種顏色。如果說一個圖片格式是8位的,就說明這個像素點可以表示2的8次方種顏色,即256種顏色。所以圖片格式的位數越多,一個像素點能表示的顏色數越多,圖片就越豐富。

Alpha透明通道:一個8位的灰度通道,該通道用256級灰度來記錄圖像中的透明度信息,定義透明、不透明和半透明區域,其中黑表示透明,白表示不透明,灰表示半透明。

WebP 的優勢

WebP 除了壓縮效果極好,圖片質量能否得到保障?對比 PNG 原圖、PNG 無損壓縮、PNG 轉 WebP(無損)、PNG 轉 WebP(有損)的壓縮效果。

WebP 的優勢可以有以下三點:

• PNG 轉 WebP 的壓縮率要高于 PNG 原圖壓縮率,同樣支持有損與無損壓縮

• 轉換后的 WebP 體積大幅減少,圖片質量也得到保障(同時肉眼幾乎無法看出差異)

• 轉換后的 WebP 支持 Alpha 透明和 24-bit 顏色數,不存在 PNG8 色彩不夠豐富和在瀏覽器中可能會出現毛邊的問題

WebP 的優勢體現在它具有更優的圖像數據壓縮算法,能帶來更小的圖片體積,而且擁有肉眼識別無差異的圖像質量;同時具備了無損和有損的壓縮模式、Alpha 透明以及動畫的特性,在 JPEG 和 PNG 上的轉化效果都非常優秀、穩定和統一。

webp的劣勢

目前 WEBP 與 JPG 相比較,編碼速度慢 10 倍,解碼速度慢 1.5 倍,實際上對于絕大部分的網絡應用而言,圖片都是靜態文件,所以對于用戶使用只需要關心解碼速度即可。其實WEBP帶來的性能提升完全可以覆蓋解碼速度慢的這一劣勢。

兼容性，雖然國內大部分瀏覽器都是根據谷歌內核定制界面而成的，支持webp圖片自然不是問題，火狐、蘋果瀏覽器、歐朋等瀏覽器都已經支持，IE新版及edge也都支持，只有古老的IE不行，這點基本上也可以忽略。