WebP是Google推出的一種圖片格式，它基於VP8編碼，可對圖像大幅壓縮。與JPEG相同，WebP也是一種有損壓縮，但在畫質相同的情況下，WebP格式比JPEG圖像小40%。 Wiki 百度百科
它是一個開源項目，我們可以在此獲取其中源碼，以及相關工具。
瀏覽器支持
顯然，Google瀏覽器Chrome首先引入，此外Opera 11.10也增加對WebP的支持。
如果你能看見下面的圖片，說明你的瀏覽器內置WebP。
[img=http://www.etherdream.com/WebP/Test.webp][/img]
支持更多的瀏覽器！
WebP的優勢顯而易見，但缺少主流瀏覽器的支持，使得它目前仍然無法推廣。但這並不妨礙我們嘗試！
大多數瀏覽器自身無法解碼WebP格式，但可以交給我們來實現！雖然網頁腳本無法勝任，但藉助Flash技術，我們完全可以實現高效快速的解碼。
並且，幾乎所有的瀏覽器都支持Flash...
WebP插件
當前版本共3個文件：WebP.js，WebP.swf和WebP.htc。在此下載打包文件。
在<body></body>之間插入如下代碼，即可使用WebP了。
1 | <script type="text/javascript" src="WebP.js"></script> |
插件將會捕捉頁面中使用WebP格式的img元素，並用Flash進行替換。圖像的解碼及顯示都在Flash中完成，因此目前版本對CSS設置的背景圖片無效。
當然，作爲JPEG格式的替換，只有對較大的圖像使用纔有意義，否則過多的解碼將消耗大量的資源。
Demo1：最簡單的樣列
1 | <img src="Test.webp" /> |
在新窗口中預覽
Demo2：保留原始屬性
1 | <img src="Test.webp" width="250" height="150" title="這是一副WebP圖片！" style="border:red 2px solid" /> |
在新窗口中預覽
Demo3：保留原始樣式
<style> img { filter: alpha(opacity=50); opacity: 0.5; } .t { border: blue dotted 2px; } </style> <img class="t" src="Test.webp" />
在新窗口中預覽
Demo4：支持動態載入
<div id="con"></div> <script type="text/javascript"> var d = document.getElementById("con"); function add() { d.innerHTML = "<img class='t' src='Test.webp' title='Hello~' />"; } function del() { d.innerHTML = ""; } </script> <button οnclick="add()">載入</button> <button οnclick="del()">移除</button>
在新窗口中預覽
探索中...
當前版本只能將IMG元素一次性轉換成Flash元素，而不支持後期的腳本操作。對IMG對象的修改不會被鏡像到Flash上。
因爲Safari瀏覽器無法觸發屬性變化事件，所以屬性同步比較困難。
此外，Data URI理論上是最完美的解決方法。但經測試，超長的參數會消耗大量CPU和內存。
當然，現在測試版本中還存在大量問題，將在以後逐漸完善。
如果有更好的創意，歡迎大家來探討交流！mailto:[email protected]
因爲這裏貼不上代碼效果，大家可以訪問我的專題頁面：
http://www.etherdream.com/WebP/
原文地址：http://bbs.csdn.NET/topics/370172422