让浏览器全面兼容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了。
<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/
让浏览器全面兼容WebP图片格式的更多相关文章
- WebP图片格式
腾讯科技讯 科技博客GigaOM近日撰文称,谷歌(微博)试图让WebP图片格式取代JPEG等现有图片格式.虽然谷歌无法很快达成所愿,但WebP仍然会对互联网产生重大影响. 文章全文如下: 受够了 ...
- 如何让Ubuntu系统支持WebP图片格式
本文主要向大家介绍如何让 Ubuntu 系统支持查看 WebP 图片格式,以及如何将 WebP 转为 JPEG 或 PNG 图片格式的方法. 什么是WebP图片 Google开发并推出 WebP 图片 ...
- 关于webp图片格式初探
前言 不管是 PC 还是移动端,图片一直是流量大头,以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求,如何保证在图片的精细度不降低的前提下缩小图片体积,成为了一个有价值 ...
- 帮谷歌推广Webp图片格式之：Webp的格式转换
参考谷歌官网:Webp: A new image format for the Web Webp是Google强推的新一代网络图片格式,特点就是:高质量压缩.能压缩多少呢?5MB的原图,不降低效果,转 ...
- 七牛对用户使用webp图片格式的使用建议
Qiniu 七牛问题解答 Chrome浏览器是可打开WebP格式的.可是并非全部的浏览器都支持webp格式,比如360.ie等浏览器是不支持的. WebP格式,谷歌(google)开发的一种旨在加快图 ...
- nodejs应用转换png,jpg,gif为webp图片格式
本博客列表缩略图在支持webp格式的浏览器下,使用的是webp格式图片,不支持webp图片下使用的是原图片(如png,gif,jpg等) webp使用指南,请参考 https://www.imqian ...
- Google最新的图片格式WEBP全面解析
前言 不管是 PC 还是移动端,图片一直是流量大头,以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求,如何保证在图片的精细度不降低的前提下缩小图片体积,成为了一个有价值 ...
- 【原】webp图片牛刀小试
其实今年很早就有接触到webp图片的概念,只是一直没怎么弄.今天在一个小项目中小用了一番.总结总结 采用 what,why,how的方式来总结 what? 什么是webp图片? 维基百科: ...
- 提升网站用户体验—WebP 图片的高效使用
一.WebP 的由来 现代图像压缩技术对我们的生活方式影响很大.数码相机能将上千张高质量图片存储到一张内存卡里.智能手机可以与邻近设备快速分享高分辨率的图片.网站与手机等移动设备能快速展示各种富媒体. ...
随机推荐
- cs231n spring 2017 lecture12 Visualizing and Understanding 听课笔记
这一节课很零碎. 1. 神经网络到底在干嘛? 浅层的是具体的特征(比如边.角.色块等),高层的更抽象,最后的全连接层是把图片编码成一维向量然后和每一类标签作比较.如果直接把图片和标签做像素级的最近领域 ...
- HDU 2147 kiki's game(规律，博弈)
kiki's game Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 40000/10000 K (Java/Others)Total ...
- c语言基础学习09_关于复合类型的复习
=============================================================================struct A{ char array[10 ...
- MVC学习笔记(分享)
一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于SpringMVC的配置 <!--conf ...
- 除了四大传统OA软件商，国内还有这些优秀的OA协同产品
国内OA 软件市场经过多年的发展,在产品.应用.服务方面都已相对成熟,也出现了众多优秀的OA软件品牌. 据中国软件协会2017年公布的数据显示:泛微OA.致远OA.华天动力OA.蓝凌OA的销售仍稳居O ...
- vue实现侧边栏手风琴效果
模板 代码如下 html <template> <div class="header"> <ul> <!-- 循环数据在点击调用chang ...
- ABB安全区域（全局区域）的指令解析
VAR wztemporary wzone;//VAR:变量 //wztemporary:全局区域数据类型(wztemporary临时全局区域数据.wzstationary固定式全局区域)wzone: ...
- C++ 不定参数（转）
转自:http://www.cnblogs.com/jerrychenfly/archive/2010/10/22/1858232.html 下面,我们来看一下,如果在c++的函数中接收数量不定的函数 ...
- Uva 12171 Sculpture - 离散化 + floodfill
题目连接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...
- Redis 数据结构与内存管理策略（下）
Redis 数据结构与内存管理策略(下) 标签: Redis Redis数据结构 Redis内存管理策略 Redis数据类型 Redis类型映射 Redis 数据类型特点与使用场景 String.Li ...