zoukankan      html  css  js  c++  java
  • 让浏览器全面兼容WebP图片格式

    WebP格式

    WebP是Google推出的一种图片格式,它基于VP8编码,可对图像大幅压缩。与JPEG相同,WebP也是一种有损压缩,但在画质相同的情况下,WebP格式比JPEG图像小40%。
    Wiki
    百度百科

    它是一个开源项目,我们可以在此获取其中源码,以及相关工具。

    浏览器支持

    显然,Google浏览器Chrome首先引入,此外Opera 11.10也增加对WebP的支持。

    如果你能看见下面的图片,说明你的浏览器支持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/

  • 相关阅读:
    Handler详细说明系列(六)——View的post()详解
    2013年6月17日星期一
    2013年6月16日星期日
    线程管理四种方法
    java 线程 ProducerAndConsumer
    POJ 2948 DP
    Java的递归算法
    开机黑屏 仅仅显示鼠标 电脑黑屏 仅仅有鼠标 移动 [已成功解决]
    网络安全审查制度即将推出 手机App安全加密成必定趋势
    递归算法浅谈
  • 原文地址:https://www.cnblogs.com/yjken/p/3922299.html
Copyright © 2011-2022 走看看