新一代的互联网图片格式:WebP

今年的的Google I/O 大会中再次提到了WebP,在此补充下相关的知识。WebP是Google推出的一种同时提供了有损压缩与无损压缩的图形档格式。目前互联网上传输的数据有65%都是图片,WebP就是出于减少数据量、加速网络传输的目的而开发的。为了改善JPEG的图片压缩技术,Google在购买On2 Technologies后使用了一种基于 VP8编码的图片压缩器,利用预测编码技术,发展出来了WebP格式,并以BSD授权条款发布。同时WebP还采用了一种基于RIFF的非常轻量级的容器。这种容器只会给每张图片增加20字节,但能让图片作者保存他们想要存储的元数据。

WebP最初在2010年发布,目标是在最小的压缩损失下,提供网络传输用的开放图片格式,最直接的竞争者就是已经流通多年的图片文件格式- JPEG。WebP希望能够达到和JPEG同水平的图片质量,但是更小的文件,以减少图片档的传送时间。

新一代的互联网图片格式:WebP_第1张图片

 

新一代的互联网图片格式:WebP_第2张图片

根据Google自己的测试,在有损压缩的状况下,WebP比同样画质的JPEG少了25% ~ 34%的文件大小 。而在无损压缩的情形中,比起用libpng产生的PNG图片,WebP少了34%的文件大小,也比用pngout再处理过的PNG图片少了26%的文件大小。Google还建立了一个 在线图片库,任何人都可以前去浏览转换之后的WebP图片和JPEG原图质量的比较。其中WebP图片现在是被封装在PNG容器中的,这样一般的浏览器就都可以正常访问。如果需要将现有图片转换成WebP,可以使用 Google提供的工具。

目前只有Google Chrome和Opera浏览器原生支持WebP格式,而Google Chrome自12版开始支持WebP的渐进式解码功能。此外所有可以原生播放WebM图像的浏览器,也可以通过javascript来显示WebP图像。开源图片浏览工具Ez看图也可以支持查看WebP图像。

如何在你的网站上使用WebP图片,让电脑可直接查看WebP图片?

WebP的优势显而易见,但缺少主流浏览器的支持,使得它目前仍然无法推广。大多数浏览器自身无法解码WebP格式,但可以交给我们来实现!借助Flash Alchemy技术,我们完全可以实现高效快速的解码。具体实现方法为:

下载三个文件:WebP.js,WebP.swf和WebP.htc( 下载地址),并将其传至服务器上:

在<body></body>之间插入如下代码,插件将会捕捉页面中使用WebP格式的 img元素,并用 Flash 进行替换,即可使用WebP了。

<script type=”text/javascript” src=”WebP.js”></script>

目前版本的图像的解码及显示都在Flash中完成,因此在CSS里设置的背景图片无效。

当然,作为JPEG格式的替换,只有对较大的图像使用才有意义,否则过多的解码将消耗大量的资源。

参考链接: https://developers.google.com/speed/webp/?hl=zh-CN

Related posts:

  1. IE7.JS 解决IE兼容性问题
  2. DD_belatedPNG.js让IE6支持透明PNG图片
  3. SuperFish一款基于jQuery的级联下拉菜单

你可能感兴趣的:(图片,网站开发)