让浏览器全面兼容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 的由来 现代图像压缩技术对我们的生活方式影响很大.数码相机能将上千张高质量图片存储到一张内存卡里.智能手机可以与邻近设备快速分享高分辨率的图片.网站与手机等移动设备能快速展示各种富媒体. ...
随机推荐
- BZOJ:1185: [HNOI2007]最小矩形覆盖
1185: [HNOI2007]最小矩形覆盖 这计算几何……果然很烦…… 发现自己不会旋转卡壳,补了下,然后发现求凸包也不会…… 凸包:找一个最左下的点,其他点按照与它连边的夹角排序,然后维护一个栈用 ...
- BZOJ3529: [Sdoi2014]数表
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=3529 挺恶心的数论TAT... 设f[i]是i的约数和,这个可以nln(n)扫出来. ans= ...
- NYoj_171聪明的kk
聪明的kk 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 聪明的"KK" 非洲某国展馆的设计灵感源于富有传奇色彩的沙漠中陡然起伏的沙丘,体现出本国不 ...
- string::npos的一些说明
一.定义 std:: string ::npos的定义: static const size_t npos = -1; 表示 size_t 的最大值( Maximum value for size_t ...
- POJ 1422 Air Raid
题目链接: http://poj.org/problem?id=1422 Description Consider a town where all the streets are one-way a ...
- 二维数组模拟实现酒店管理系统-java
业务分析 1.需要一个房间类,包含房间的属性,比如房间编号.房间类型.是否占用. 2.需要一个旅馆类,旅馆有房间,提供的方法需要有 预订房间.打印房间信息.初始化房间.退房. 3.测试类,测试预订房间 ...
- 简单易用的IT运维服务器管理程序
程序修改历史: 2012.02.04 v1.0 leopku 2012.02.09 v1.1 oldboy(老男孩) QQ:31333741 MAIL:oldboy521@gmail.com 本软件由 ...
- 数组的创建和各种API
数组的创建方式: 1. 数组直接量 var arr = [] // 创建一个空数组 var arr = [1,2,3,4] // 创建同时初始化元素 2. 实例化对象 var arr=new Arra ...
- ios VS android
本来是学习IOS的,但是最近接到的是有关于安卓的项目,害怕弄混,所以在这个技术博客里写一下对比. IOS ...
- virtuoso装载大的rdf文件的方法
本文详细介绍了将一个比较大的rdf文件装载到virtuoso数据库的过程.参考virtuoso网站的文档说明,通过实践,将一个大约4.6G左右的nt文件装载到virtuoso数据库中,用了大概6个多小 ...