開發與維運

使用WebP節省網站流量和存儲空間,加快網站加載速度

使用WebP圖片格式節省網站流量、帶寬和存儲空間,加快網站加載速度。

目前在互聯網上,圖片流量仍佔據較大的一部分。因此,在保證圖片質量不變的情況下,節省流量帶寬是大家一直需要去解決的問題。傳統的圖片格式,如 JPEG,PNG,GIF 等格式圖片已經沒有太多的優化空間。因此 Google 於 2010 年提出了一種新的圖片壓縮格式 — WebP,給圖片的優化提供了新的可能。

什麼是WebP

WebP(發音:weppy)是一種同時提供了有損壓縮無損壓縮(可逆壓縮)的圖片文件格式,派生自影像編碼格式VP8,被認為是WebM多媒體格式的姊妹項目,是由Google在購買On2 Technologies後發展出來,以BSD授權條款發佈。

WebP最初在2010年發佈,目標是減少文件大小,但達到和JPEG格式相同的圖片質量,希望能夠減少圖片檔在網絡上的發送時間。2011年11月8日,Google開始讓WebP支持無損壓縮和透明色(alpha通道)的功能,而在2012年8月16日的參考實做libwebp 0.2.0中正式支持。根據Google較早的測試,WebP的無損壓縮比網絡上找到的PNG檔少了45%的文件大小,即使這些PNG檔在使用pngcrush和PNGOUT處理過,WebP還是可以減少28%的文件大小。

WebP支持的像素最大數量是16383x16383。有損壓縮的WebP僅支持8-bit的YUV 4:2:0格式。而無損壓縮(可逆壓縮)的WebP支持VP8L編碼與8-bit之ARGB色彩空間。又無論是有損或無損壓縮皆支持Alpha透明通道、ICC色彩配置、XMP詮釋數據。

WebP有靜態與動態兩種模式。動態WebP(Animated WebP)支持有損與無損壓縮、ICC色彩配置、XMP詮釋數據、Alpha透明通道。

兼容性

現在主流的瀏覽器都支持WebP了,Safari和Firefox可能需要較新版本才支持,我測試的最新版本Firefox已經支持WebP,IE不支持。Chrome內核的瀏覽器都支持。微信和QQ測試也支持。

目前很多大型網站都已經使用WebP格式的圖片了,微信公眾號文章在很早之前也已經開始使用了,還有很多CDN支持將圖片轉換為WebP。

圖片轉WebP格式

這裡推薦幾個在線轉webp圖片的網站和工具:

webp2jpg:https://renzhezhilu.gitee.io/webp2jpg-online/
支持jpeg、jpg、png、gif、svg、ico、bmp轉webp,可批量。
注:這個網站gif只支持轉換第一幀圖片。

智圖:https://zhitu.isux.us/
智圖是騰訊ISUX前端團隊開發的一個專門用於圖片壓縮和圖片格式轉換的平臺,其功能包括針對png,jpeg,gif等各類格式圖片的壓縮,以及為上傳圖片自動選擇最優的圖片格式。同時,智圖平臺還會為用戶轉換一份webp格式的圖片。
注:不支持超過5M的圖片,超過5M的格式需要下載客戶端。客戶端可以批量轉換,轉換不是離線的,需將圖片上傳服務器轉換,對gif支持好像有點問題。
客戶端下載地址:http://go.zeruns.tech/N

Any To WebpTool:https://zeruns.lanzous.com/id7zqab

支持jpg、png、gif,壓縮效果很好,對gif支持也不錯。下面的效果圖都是用這個軟件轉換的。

效果圖

普通圖片轉webp圖片質量和大小對比。

下面三張原圖大小和壓縮為webp後大小分別為:

原圖 webp
4.91MB 323KB
6.01MB 3.70MB
3.36MB 454KB

圖片請看原文:https://blog.zeruns.tech/archives/547.html

推薦文章

Leave a Reply

Your email address will not be published. Required fields are marked *