您的位置：首页 > 其它

让浏览器全面兼容WebP图片格式

2014-08-19 15:54 141 查看

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>


在新窗口中预览

本文转自：http://www.etherdream.com/WebP/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航