让浏览器全面兼容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图片格式

时间: 2024-08-28 09:26:00

让浏览器全面兼容WebP图片格式的相关文章

WebP图片格式

腾讯科技讯 科技博客Gig‍‍‍aOM近日撰文称,谷歌(微博)试图让WebP图片格式取代JPEG等现有图片格式.虽然谷歌无法很快达成所愿,但WebP仍然会对互联网产生重大影响. 文章全文如下: 受够了蜗牛一般的网页加载速度?谷歌已经有解决之道:更小的图片文件.WebP图片格式旨在取代JPEG等现有图片格式,以加快图片加载速度,并为网站运营商大幅节省带宽.但是,谷歌需要说服大家使用全新的图片格式,如果处理不当,谷歌还可能加剧媒体文件格式碎片化问题 WebP图片压缩体积大约只有JPEG的1/3,对于

如何让Ubuntu系统支持WebP图片格式

如何让Ubuntu系统支持WebP图片格式 本文主要向大家介绍如何让 Ubuntu 系统支持查看 WebP 图片格式,以及如何将 WebP 转为 JPEG 或 PNG 图片格式的方法. 什么是WebP图片 Google开发并推出 WebP 图片格式已有 5 年了,WebP 可以提供对图片的有损和无损压缩.据官方宣称,对相同图片压缩后,平均会比 JPEG 体积缩小 25%. 原本Google雄心勃勃的想让 WebP 成为互联网图像压缩技术的新标准,但 5 年时间流逝之后,WebP除了在 Googl

七牛对用户使用webp图片格式的使用建议

Qiniu 七牛问题解答 Chrome浏览器是可打开WebP格式的.可是并非全部的浏览器都支持webp格式,比如360.ie等浏览器是不支持的. WebP格式,谷歌(google)开发的一种旨在加快图片载入速度的图片格式.图片压缩体积大约仅仅有JPEG的2/3.并能节省大量的server带宽资源和数据空间.Facebook Ebay等知名站点已经開始測试并使用WebP格式. 但WebP是一种有损压缩.相较编码JPEG文件,编码相同质量的WebP文件须要占用很多其它的计算资源. Chrome浏览器

webp 图片格式

webp 是一种图片格式,出自强大的谷歌公司,具体详情请自行百度了解 兼容性: PC:目前支持以 谷歌内核(webkit)渲染的浏览器,其他主要浏览器支持的不是很好,移动端:android 支持的很好,IOS 即将支持,说明暂时还是不是支持 文件大小对比: 5张图片文件大小(jpg),如图: 5张同样的图片文件大小(webp), 如图: 相信大家已经看出来了吧,压缩式很明显的,少的不是一点两点吧 哈哈~~~~ 至于时间嘛! 从理论上来将 webp 格式的图片会比 jpg 格式的图片在渲染上来说是

iOS WebP图片格式

google出品 高清晰,体量小得图片格式,下面说在iOS下如何使用 添加头文件 #import "UIImage+WebP.h" #import "ViewController.h" #import "UIImage+WebP.h" @interface ViewController () @property (nonatomic ,strong) UIImageView *webPImageView; @property (nonatomic

GIF/PNG/JPG和WEBP图片有点和缺点整理

GIF/PNG/JPG/WEBP都是属于位图(位图 ,务必区别于矢量图): GIF/PNG和JPG这三种格式的图片被广泛应用在现今的互联网中,gif曾在过去互联网初期慢速的情况下几乎是做到了大一统的地位,而现如今随着互联网技术应用和硬件条件的提高,png和jpg格式的图片越来越多的被应用,gif昔日的辉煌一去不复, webp图片格式现在还不普及:  GIF(Graphics Interchange Format) GIF图形交换格式是一种位图图形文件格式,以8位色(即256种颜色)重现真彩色的图

BMP GIF PNG JPG等图片格式的区别和适用情况

作者:赵鑫链接:https://www.zhihu.com/question/20028452/answer/142593276来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 本文介绍和比较几种常见图片文件格式的优缺点,并介绍不同的文件格式对Web应用程序性能的影响. 有损vs无损 图片文件格式有可能会对图片的文件大小进行不同程度的压缩,图片的压缩分为有损压缩和无损压缩两种. 有损压缩.指在压缩文件大小的过程中,损失了一部分图片的信息,也即降低了图片的质量,并且这

webp图片详解

WebP(发音 weppy),是一种支持有损压缩和无损压缩的图片文件格式,派生自图像编码格式 VP8.根据 Google 的测试,无损压缩后的 WebP 比 PNG 文件少了 45% 的文件大小,即使这些 PNG 文件经过其他压缩工具压缩之后,WebP 还是可以减少 28% 的文件大小. 2010 年发布的 WebP 已经不算是新鲜事物了,在 Google 的明星产品如 Youtube.Gmail.Google Play 中都可以看到 WebP 的身影,而 Chrome 网上商店甚至已完全使用了

本人发起定义一种全新的图片格式

本人发现,传统的图片格式已经不适应互联网时代了!!!,故本人发起定义一种新的图片格式,后缀名为 .gnet 互联网上的图片大多有这几种来源,微博上传,视频截图,网络编辑人上传等,以目前的技术,这些图片是不可以被搜索引擎搜索的 大大阻碍了互联网的进一步整合,所以本人定义一种新的图片格式,这种图片格式含有一个储存信息的数据结构 并且对图片压缩(包括有损压缩)的过程中,储存信息可以保留原样 如果这种图片格式一经定义,相信很快就会有微博客户端,视频截图软件,浏览器等支援这种图片格式了 大家快来加入吧!!