让你的页面支持WebP！

2024-01-17 17:30| 来源: 网络整理| 查看: 265

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。在此下载打包文件。

在之间插入如下代码，即可使用WebP了。

插件将会捕捉页面中使用WebP格式的img元素，并用Flash进行替换。图像的解码及显示都在Flash中完成，因此目前版本对CSS设置的背景图片无效。

当然，作为JPEG格式的替换，只有对较大的图像使用才有意义，否则过多的解码将消耗大量的资源。

Demo1：最简单的样列

在新窗口中预览

Demo2：保留原始属性

在新窗口中预览

Demo3：保留原始样式 img { filter: alpha(opacity=50); opacity: 0.5; } .t { border: blue dotted 2px; }

在新窗口中预览

Demo4：支持动态载入 var d = document.getElementById("con"); function add() { d.innerHTML = ""; } function del() { d.innerHTML = ""; } 载入移除

在新窗口中预览

探索中...

当前版本只能将IMG元素一次性转换成Flash元素，而不支持后期的脚本操作。对IMG对象的修改不会被镜像到Flash上。

因为Safari浏览器无法触发属性变化事件，所以属性同步比较困难。

此外，Data URI理论上是最完美的解决方法。但经测试，超长的参数会消耗大量CPU和内存。

当然，现在测试版本中还存在大量问题，将在以后逐渐完善。

如果有更好的创意，欢迎大家来探讨交流！mailto:[email protected]

版本更新

2011-08-20 WebP插件v0.0.1测试版

By EtherDream 2011

【本文地址】

今日新闻