让你的页面支持WebP图像-JavaSript-爱易网页

让你的页面支持WebP图像

日期：2014-05-16　浏览次数：20422 次

【分享】让你的页面支持WebP图像！
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了。
　　

JScript code

<script type="text/javascript" src="WebP.js"></script>

　　

　　插件将会捕捉页面中使用WebP格式的img元素，并用Flash进行替换。图像的解码及显示都在Flash中完成，因此目前版本对CSS设置的背景图片无效。
　　当然，作为JPEG格式的替换，只有对较大的图像使用才有意义，否则过多的解码将消耗大量的资源。

　　Demo1：最简单的样列
　　

HTML code

<img src="Test.webp" />

　　在新窗口中预览

　　Demo2：保留原始属性
　　

HTML code

<img src="Test.webp" width="250" height="150" title="这是一副WebP图片！" style="border:red 2px solid" />

　　在新窗口中预览

　　Demo3：保留原始样式
　　

HTML code


<style>
img
{
    filter: alpha(opacity=50);
    opacity: 0.5;
}

.t
{
    border: blue dotted 2px;
}
</style>
<img class="t" src="Test.webp" />

　　在新窗口中预览

　　Demo4：支持动态载入

HTML code


<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 onclick="add()">载入</button>
<button onclick="del()">移除</button>

　　在新窗口中预览

探索中...
　　当前版本只能将IMG元素一次性转换成Flash元素，而不支持后期的脚本操作。对IMG对象的修改不会被镜像到Flash上。
　　因为Safari浏览器无法触发属性变化事件，所以属性同步比较困难。
　　此外，Data URI理论上是最完美的解决方法。但经测试，超长的参数会消耗大量CPU和内存。
　　当然，现在测试版本中还存在大量问题，将在以后逐渐完善。
　　如果有更好的创意，欢迎大家来探讨交流！mailto:182223495@qq.com

　　因为这里贴不上代码效果，大家可以访问我的专题页面：
　　http://www.etherdream.com/WebP/

------解决方案--------------------
不错~`学习了
------解决方案--------------------
赞一个~~~
------解决方案--------------------
支持楼主好人
------解决方案--------------------
很好。前些时候看了一些搞笑视频，三四分钟长度，文件体积只有500多K，而清晰度还不错。当时就想以现在的技术，图像应该能有再进一步压缩的技术了，本来还想找找，事太多就忘了，结果正好在这里碰到了。

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

让你的页面支持WebP图像

相关资料更多>

推荐阅读更多>