让浏览器全面兼容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 的由来 现代图像压缩技术对我们的生活方式影响很大.数码相机能将上千张高质量图片存储到一张内存卡里.智能手机可以与邻近设备快速分享高分辨率的图片.网站与手机等移动设备能快速展示各种富媒体. ...
随机推荐
- sql万能密码
输入1'or'2这样就会引起sql注入,因为username=password admin adn admin,所以我们能够进去 必须要做好过滤措施
- bzoj:1575: [Usaco2009 Jan]气象牛Baric
Description 为了研究农场的气候,Betsy帮助农夫John做了N(1 <= N <= 100)次气压测量并按顺序记录了结果M_1...M_N(1 <= M_i <= ...
- CodeForces628-B.New Skateboard
B. New Skateboard time limit per test 1 second memory limit per test 256 megabytes input standard in ...
- Linux shell编程命令-Linux基础环境命令学习笔记
1.正则表达式 1)^开始 *前一个字符重复0次以上 + 1次以上 ? 0次或者1次 . 一个任意字符(.*连用) {m,n} m到n次 [0-9][a-z] 任意数字或字母 $结束字符 2)sed和 ...
- c++(排序二叉树)
前面我们讲过双向链表的数据结构.每一个循环节点有两个指针,一个指向前面一个节点,一个指向后继节点,这样所有的节点像一颗颗珍珠一样被一根线穿在了一起.然而今天我们讨论的数据结构却有一点不同,它有三个节点 ...
- 试用最强Spark IDE--IDEA
1.安装IntelliJ IDEA IDEA 全称 IntelliJ IDEA,是java语言开发的集成环境,IntelliJ在业界被公认为最好的java开发工具之一,尤其在智能代码助手.代码自动提示 ...
- logback的使用和logback.xml详解
一.logback的介绍 Logback是由log4j创始人设计的另一个开源日志组件,官方网站: http://logback.qos.ch.它当前分为下面下个模块: logback-core:其它两 ...
- curl说明
https://baike.baidu.com/item/curl/10098606?fr=aladdin curl是利用URL语法在命令行方式下工作的开源文件传输工具.它被广泛应用在Unix.多种L ...
- Python3 引入模块的方法
例子 import random 产生随机整数 import random secret = random.randint(0,10)
- @RequestMapping 相关 spring
* * @param request HttpServletRequest * @param delList 削除Idエスト * @return 削除結果 * @th ...