用Google WebP圖片格式控制網站頁面大小

 

不管你相信或者不相信，隨著互連網的快速發展網頁也在持續不斷的變大。

使網頁迅速膨脹的罪魁禍首不是大量使用的JavaScript庫，CSS和無盡的共用按鈕，而是精美的圖片。根據HTTPArchive的研究，圖 片大約佔據了頁面內容的60%。這意味著，大部分網站可以通過壓縮圖片來減小頁面本身大小。如果大家有興趣瞭解HTTPArchive的研究及其如何最佳化 網頁載入速度，推薦閱讀gbin1過去發布的文章 -分享網頁載入速度最佳化的一些技巧？

其中一種有效壓縮圖片的方法就是使用Google的WebP圖片格式，這種格式比起常用的圖片格式來說，能夠縮減了25%到34%。儘管WebP節省空間的潛力讓人大吃一驚，但是它就像之前的JPEG 2000和其它相關成果一樣，並沒有得到瀏覽器的廣泛支援。

小貼士：WebP （發音“weppy”），一種有損壓縮的圖形檔格式，派生自映像編碼格式VP8 。是Google在購買On2 Technologies後發展出來的格式，以BSD授權條款發布。

迄今為止，只有Google Chrome和Opera支援WebP格式（當使用行動服務商的代理式瀏覽時，兩種瀏覽器都會自動將圖片轉換為 WebP格式）。WebP首次推出的時候Mozilla並不支援，但是當WebP改進之後，Mozilla所提出的問題全部解決。但是目前FireFox 和IE仍是不支援。

然而，如Opera的Bruce Lawson近期指出的，使用犀利的CSS魔法，你可以在Chrome和Opera上使用WebP，同時支援JPG格式。代碼如下：

.mybackgroundimage { 

background-image： url（“image.jpg”）; 

background-image： image（“image.webp” format（‘webp’）， “image.jpg”）;

}

以上這段代碼使用了CCS Image Values和Replaced Content Module Level 4中，新 的 Image Fallbacks文法。樣式修飾語是從@font-face中借鑒，保證了瀏覽器在不支援WebP的情況下，不會下載WebP圖片。

當然這段代碼只是有益於CSS背景圖片，而並不是大多數網站提供的大多數圖片。對於內容中的圖片，在當前並不能輕易達到相同的效果，如果瀏覽器開始 支援被提議的<picture>元素的話，未來可能可以。因為<picture>的文法大致相似，你可以使用以下代碼：

<picture>

<source src=image.webp type=image/webp >

<source src=image.png type=image/png >

<img src=image.png alt=“alt text ”> <！-- fallback content -->

</picture>

以上這段代碼可以覆蓋各種情況：支援WebP和<picture>元素的瀏覽器，支援<picture>卻不支援WebP的瀏覽器，和完全不支援的瀏覽器。但是這段虛擬碼真正開始使用還需要一段時間。

WebP在使用上仍有其他問題需要考慮。例如，在使用者的案頭應用的開啟儲存的圖片，當開啟WebP圖片時，可能會遇見問題。

儘管WebP仍不成熟，但是他大量縮減圖片大小的潛能仍是為他贏得了不少的追隨者，相信以後會成為一種重要的web使用圖片格式！

via Nelly@極客社區

來源：使用Google WebP圖片格式協助控制網站頁面大小