我们用搜狐网的一张图片来说明问题，一张webp格式的图片网络传输速度优于其他图片格式，因为同样大小比例webp格式图片体积小很多，而且对服务器带宽至少是减少50%,至于图片的清晰度及质量可以查看下列图片比较。
首先我们把图片从服务器读出是的格式是webp：
大小只有：23.2kb，你可以另存到本地查看检验，保存下来没有预览缩略图，你用Windows图片查看器不可以打开，下载2345看图王可以打开。当然，上图如果可以打开，表示你的浏览器支持webp格式图片，否则相反。
其他格式：
后缀改为gif格式，远程服务器仍然可以显示【其他格式也一样可以显示】，保存下来大小为111kb。
后缀改为png格式，远程服务器仍然可以显示【其他格式也一样可以显示】，保存下来大小为80.6kb。
后缀改为jpg格式，远程服务器仍然可以显示【其他格式也一样可以显示】，保存下来大小为30.3kb。
后缀改为jpeg格式，远程服务器仍然可以显示【其他格式也一样可以显示】，保存下来大小为30.3kb。
后缀改为BMP格式，远程服务器仍然可以显示【其他格式也一样可以显示】，保存下来大小为659kb。
上图可以直观说明webp图片格式优势所在。
源浏览器：谷歌浏览器chrome支持，火狐浏览器Firefox目前不支持，不支持打开webp格式的图片无法显示。
以下文字来源网络：
webp图片技术源自Google，Google一直在推进WebP图像格式的普及。
Mozilla表示：我们正在推进旗下产品对WebP图像格式的支持，WebP图片将基于Gecko网页排版引擎，适用于个人计算机以及Android设备（iOS版本的Firefox则不适用）。
据了解，Mozilla将在2019年的上半年正式让Firefox浏览器支持WebP。
有趣的是，曾经有段时间，苹果在其Safari浏览器的测试版本中简要介绍了WebP图像支持，但是不久后，该条支持被删除。对此，苹果拒绝发表评论。
WebP格式：以下文字来自http://www.etherdream.com/WebP/
WebP是Google推出的一种图片格式，它基于VP8编码，可对图像大幅压缩。与JPEG相同，WebP也是一种有损压缩，但在画质相同的情况下，WebP格式比JPEG图像小40%。
Wiki
百度百科
它是一个开源项目，我们可以在此获取其中源码，以及相关工具。
浏览器支持
显然，Google浏览器Chrome首先引入，此外Opera 11.10也增加对WebP的支持。
如果你能看见下面的图片，说明你的浏览器支持WebP。
支持更多的浏览器！
WebP的优势显而易见，但缺少主流浏览器的支持，使得它目前仍然无法推广。但这并不妨碍我们尝试！
大多数浏览器自身无法解码WebP格式，但可以交给我们来实现！虽然网页脚本无法胜任，但借助Flash技术，我们完全可以实现高效快速的解码。
并且，几乎所有的浏览器都支持Flash...
WebP插件
当前版本共3个文件： WebP.js ， WebP.swf 和 WebP.htc。在此下载打包文件。
在<body></body>之间插入如下代码，即可使用WebP了。
<script type="text/javascript" src="WebP.js"></script>
插件将会捕捉页面中使用WebP格式的img元素，并用Flash进行替换。图像的解码及显示都在Flash中完成，因此目前版本对CSS设置的背景图片无效。
当然，作为JPEG格式的替换，只有对较大的图像使用才有意义，否则过多的解码将消耗大量的资源。
Demo1：最简单的样列
<img src="Test.webp" />
Demo2：保留原始属性
<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='http://www.etherdream.com/WebP/Test.webp' title='Hello~' />";
}
function del()
{
d.innerHTML = "";
}
</script>
<button onclick="add()">载入</button>
<button onclick="del()">移除</button>
