让浏览器全面兼容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 的由来 现代图像压缩技术对我们的生活方式影响很大.数码相机能将上千张高质量图片存储到一张内存卡里.智能手机可以与邻近设备快速分享高分辨率的图片.网站与手机等移动设备能快速展示各种富媒体. ...
随机推荐
- 【一小时入门】webpack 入门指南
什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...
- BZOJ 1293: [SCOI2009]生日礼物【单调队列】
1293: [SCOI2009]生日礼物 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 2534 Solved: 1383[Submit][Stat ...
- Codeforces 626B Cards(模拟+规律)
B. Cards time limit per test:2 seconds memory limit per test:256 megabytes input:standard input outp ...
- python写一个邮箱伪造脚本
前言: 原本打算学php MVC的思路然后写一个项目.但是贼恶心, 写不出来.然后就还是用python写了个邮箱伪造. 0x01 第一步先去搜狐注册一个邮箱 然后,点开设置,开启SMTP服务. 当然你 ...
- IDEA的破解安装以及汉化
IDEA是一款比eclipse用起来更好用的一款代码编辑器,本人之前也是一直在用eclipse来写代码,后来发现了IDEA用起来会更顺手,所以又转用IDEA了,今天给大家分享一下IDEA的下载安装破解 ...
- ThinkPHP 下载、导入、导出功能的设计与实现
下载: 1.引入命名空间: use Org\Net\Http; 2.在入口文件中设置根目录: //定义根目录的绝对地址 define('ROOT',str_replace("\\" ...
- HtmlHelper总结
HTML helper是在视图页面上操作HTML元素时可以调用的方法,还包括URL helper和AJAX helper.这些帮助方法都为了使得操作HTML更加容易.分为两类:a.编辑和输入帮助类b. ...
- 规范的python编码
规范的 python 编码令人赏心悦目,令代码的表达逻辑更清晰,使得工程代码更容易被维护和交流: 编码规范包括对于代码书写格式的约束,不良语法的禁用和推荐的编码手法,下面做些简要的描述: 1. 代码规 ...
- JavaScript基础：DOM操作详解
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 JavaScript的组成 JavaScript基础分为三个部分: ...
- nginx中location匹配顺序
一.location语法 语法: Syntax: location [ = | ~ | ~* | ^~ ] uri { ... } location @name { ... } Default: - ...