使網(wǎng)頁(yè)迅速膨脹的罪魁禍?zhǔn)撞皇谴罅渴褂玫腏avaScript庫(kù)，CSS和無(wú)盡的共享按鈕，而是精美的圖片。根據(jù)HTTPArchive的研究，圖片大約占據(jù)了頁(yè)面內(nèi)容的60%。這意味著，大部分網(wǎng)站可以通過(guò)壓縮圖片來(lái)減小頁(yè)面本身大小。如果大家有興趣了解HTTPArchive的研究及其如何優(yōu)化網(wǎng)頁(yè)加載速度，推薦閱讀過(guò)去發(fā)布的文章 -網(wǎng)頁(yè)設(shè)計(jì)中圖片及布局的一些尺寸和標(biāo)準(zhǔn)
其中一種有效的壓縮圖片的方法就是使用Google的WebP圖片格式，這種格式比起常用的圖片格式來(lái)說(shuō)，能夠縮減了25%到34%。盡管WebP節(jié)省空間的潛力讓人大吃一驚，但是它就像之前的JPEG 2000和其它相關(guān)成果一樣，并沒(méi)有得到瀏覽器的廣泛支持。
小貼士：WebP （發(fā)音“weppy”），一種有損壓縮的圖形檔格式，派生自圖像編碼格式VP8 。是Google在購(gòu)買(mǎi)On2 Technologies后發(fā)展出來(lái)的格式，以BSD授權(quán)條款發(fā)布。
迄今為止，只有Google Chrome和Opera支持WebP格式（當(dāng)使用移動(dòng)服務(wù)商的代理式瀏覽時(shí)，兩種瀏覽器都會(huì)自動(dòng)將圖片轉(zhuǎn)換為WebP格式）。WebP首次推出的時(shí)候Mozilla并不支持，但是當(dāng)WebP改進(jìn)之后，Mozilla所提出的問(wèn)題全部解決。但是目前FireFox和IE仍是不支持。
然而，如Opera的Bruce Lawson近期指出的，使用犀利的CSS魔法，你可以在Chrome和Opera上使用WebP，同時(shí)支持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語(yǔ)法。樣式修飾語(yǔ)是從@font-face中借鑒，保證了瀏覽器在不支持WebP的情況下，不會(huì)下載WebP圖片。
當(dāng)然這段代碼只是有益于CSS背景圖片，而并不是大多數(shù)網(wǎng)站提供的大多數(shù)圖片。對(duì)于內(nèi)容中的圖片，在當(dāng)前并不能輕易達(dá)到相同的效果，如果瀏覽器開(kāi)始支持被提議的<picture>元素的話，未來(lái)可能可以。因?yàn)?lt;picture>的語(yǔ)法大致相似，你可以使用以下代碼：
<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的瀏覽器，和完全不支持的瀏覽器。但是這段偽代碼真正開(kāi)始使用還需要一段時(shí)間。
WebP在使用上仍有其他問(wèn)題需要考慮。例如，在用戶(hù)的桌面應(yīng)用的打開(kāi)保存的圖片，當(dāng)打開(kāi)WebP圖片時(shí)，可能會(huì)遇見(jiàn)問(wèn)題。
盡管WebP仍不成熟，但是他大量縮減圖片大小的潛能仍是為他贏得了不少的追隨者，相信以后會(huì)成為一種重要的web使用圖片格式！
