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

标签: 网站开发 图片 | 发表时间:2013-05-18 17:15 | 作者:标点符
出处:http://www.biaodianfu.com

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

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

jpeg-webp

 

webp-png

根据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

相关 [互联网 图片 格式] 推荐:

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

- - 标点符
今年的的Google I/O 大会中再次提到了WebP,在此补充下相关的知识. WebP是Google推出的一种同时提供了有损压缩与无损压缩的图形档格式. 目前互联网上传输的数据有65%都是图片,WebP就是出于减少数据量、加速网络传输的目的而开发的. 为了改善JPEG的图片压缩技术,Google在购买On2 Technologies后使用了一种基于 VP8编码的图片压缩器,利用预测编码技术,发展出来了WebP格式,并以BSD授权条款发布.

调研webp图片格式

- - 颜海镜
最近在调研为经验引入webp的可能性,下面总结一下最近的调研成果. webp是谷歌在2010年开源的一种新的图片格式,目前在谷歌浏览器(9+)和安卓(4.0+)里面都有很好的兼容性. 根据谷歌官方给出的数据,无损压缩webp图片比png图片小26%,有损压缩的webp可以比jpeg小25-34%,下面测试案例中有具体的demo,大家可以亲眼查看效果.

搜狗互联网图片库2.0(SogouP2.0)正式发布

- Wolf - 丕子
@搜狗实验室:搜狗互联网图片库2.0(SogouP2.0)正式发布: 1000万张图片,200万组图片源,2T数据规模,包括原图文件、URL、所在网页的URL、所在网页中的Surrounding Text文本、同主题系列图片等信息. 图片库还包括了一个识图搜索结果人工标注集合,用于训练和评测. 记得很久很久之前搜狗实验室就不断的发布数据集供大家申请使用,真是赞.

移动端图片格式调研

- - Garan no dou
图片通常是移动端流量耗费最多的部分,并且占据着重要的视觉空间. 合理的图片格式选用和优化可以为你节省带宽、提升视觉效果. 在这篇文章里我会分析一下目前主流和新兴的几种图片格式的特点、性能分析、参数调优,以及相关开源库的选择. 移动端图片类型的支持情况. 静态图片的编码与解码. 动态图片的编码与解码.

图片内嵌广告商GumGum融资700万美元,互联网广告业的一朵新奇葩

- tiger - 36氪
图片内嵌广告商GumGum在新一轮的融资中获700万美元投资. 自此,GumGum的融资总额已达1100万美元. GumGum自创建伊始就在互联网广告领域掀起了一阵狂风. 这种图片内嵌广告的做法是在图片的表面添加悬浮文字、横幅标语或Flash等互交形式呈现广告内容. 对于广告商而言,GumGum特有的图片识别与定位技术能帮助他们更有效地定位消费人群.

【移动互联网】Instagram允许用户自动将“Like”的图片发送到FB账户

- - 爱Apps - 专注限时免费、应用评测、移动资讯
Facebook收购Instagram大概也有3个月的时间了,两者之间也做了不少的功能整合. 今天要介绍的是区别之前所有的功能改进,这次是直接允许用户(可关闭该功能)将Instagram里喜欢的照片分享到自己的Facebook账户上. 但是从现在起,在你Facebook的新鲜事里你就会看到那些你原先并不关心的朋友他们在Instagram里拍的或者喜欢的照片都涌到你的页面上来.

图片格式与设计那点事儿

- OrcaXS - 牛博山寨 编辑推荐
第一次写技术博客,有不尽如人意的地方,还请见谅和指正. 为什么想整理这方面的类容,我觉得就像油画家要了解他的颜料和画布、雕塑家要了解他的石材一样,作为网页设计师也应该对图片格式的特性有一定了解,这样才能更好的表达你的创意和想法. 除此之外,我们在平时工作中也会遇到许多与图片格式相关的问题. 比如设计师会奇怪为什么有些页面的产出物总是没法达到设计稿那样的品质和效果,什么样的设计才更适合Web页面;页面重构师和前端工程师则想知道在切图的时候应采用什么图片格式、如何进行参数设置才能达到品质和性能的最优化.

网页设计中图片格式的选择技巧

- - 优设(UISDC)
网页设计中,切图输出是指设计师将手边绘制完成的原始图稿转换成网页用的图片格式、并交由下一位人员网页排版的重要步骤. 选择适合的图片格式不但可以将让设计得到合理的显示效果、甚至还可以有效的控制图档的档案大小,节省下载时间、有效的减少服务器的负担. 以设计师最常用的 Photoshop 以及 Illustrator 为例,都提供了「储存为网页用…」的功能.

利用Base64实现图片和XML格式的相互转换

- - ITeye博客
imageInfo.addText("图片1");. System.out.println("找不到要转换的图片文件. 已有 0 人发表留言,猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.