调研webp图片格式

标签: webp 图片 格式 | 发表时间:2016-10-19 08:00 | 作者:
出处:http://yanhaijing.com

最近在调研为经验引入webp的可能性,下面总结一下最近的调研成果。

简介

webp是谷歌在2010年开源的一种新的图片格式,目前在谷歌浏览器(9+)和安卓(4.0+)里面都有很好的兼容性。

根据谷歌官方给出的数据,无损压缩webp图片比png图片小26%,有损压缩的webp可以比jpeg小25-34%,下面测试案例中有具体的demo,大家可以亲眼查看效果。

鉴于webp的优点,推荐引入webp格式。

注意:webp格式会增加解码时间,是png的4-5倍(毫秒级)

谷歌官方给了几种向后兼容使用webp的方案:

  • 服务器端检测
  • js监测
  • html5 picture

PC端方案

通过 caniuse,我们可以看到opera(11+)和chrome(9+)支持webp格式,但其他浏览器几乎全军覆没。

通过百度流量研究院给出的 浏览器数据看,chrome占比非常高,你应该根据自己网站的流量统计作出具体决定。

pc端建议的方案是html5的 picturecaniuse显示picture和webp兼容性(在chrome上)几乎是一样的。

一个picture的简单demo如下:

   <picture>
    <source srcset="xxx.webp" type="image/webp">
    <img src="xxx.png" alt="test">
</picture>

移动端方案

webp在安卓上的兼容性非常好,但ios完全不支持, caniuse显示兼容安卓4.0以上版本

通过百度统计出来的流量看,移动端安卓占比为70%+,你应该根据自己网站的流量统计作出具体决定。

由于picture在移动端兼容性不好,所以这种方案不太可取,可以采用js监测方案,js方案要求图片必须是异步加载,下面是谷歌官方给出的代码示例

   // check_webp_feature:
//   'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
//   'callback(feature, result)' will be passed back the detection result (in an asynchronous way!)
function check_webp_feature(feature, callback) {
    var kTestImages = {
        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    };
    var img = new Image();
    img.onload = function () {
        var result = (img.width > 0) && (img.height > 0);
        callback(feature, result);
    };
    img.onerror = function () {
        callback(feature, false);
    };
    img.src = "data:image/webp;base64," + kTestImages[feature];
}

目前是基于回调,可以封装成promise。

相关工具

测试案例

参考资料

相关 [webp 图片 格式] 推荐:

调研webp图片格式

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

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

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

通过 Flash 让所有浏览器支持 WebP 格式图像解码

- Felix - 谷奥——探寻谷歌的奥秘
感谢读者 zjcqoo 的自爆. WebP是Google推出的一种图片格式,它基于VP8编码,可对图像大幅压缩. 与JPEG相同,WebP也是一种有损压缩,但在画质相同的情况下,WebP格式比JPEG图像小40%. 它是一个开源项目,我们可以在此获取其中源码,以及相关工具. 显然,Google浏览器Chrome首先引入,此外Opera 11.10也增加对WebP的支持.

GIF vs APNG vs WebP

- - JayXon
GIF 是一个非常古老的格式,1987 年诞生,最后一个版本是 1989 年. (这就是为什么 GIF 文件头的 magic number 是 GIF89a). APNG 相对新一些,是 Mozilla 在 2004 年推出的,十几年的科技进步是不容小觑的,所以 APNG相对于 GIF 的优势十分明显,后面会分析.

Google App Engine SDK 1.5.1 发布,增加 WebP 支持

- Jeff - 谷奥——探寻谷歌的奥秘
Google I/O 2011 结束一月后,Google 发布了新版 Google App Engine SDK. 本月 Google 将 ProtoRPC 作为正式 Python API 发布,在 SDK 中提供 High Replication Datastore (HRD) 特性帮助开发者进一步理解一致性模型,Channel API 增加在场状态等.

移动端图片格式调研

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

【腾讯Bugly干货分享】WebP原理和Android支持现状介绍

- - IT瘾-geek
目前网络中图片仍然是占用流量较大的一部分,对于移动端更是如此,因此,如何在保证图片视觉不失真前提下缩小体积,对于节省带宽和电池电量十分重要. 然而目前对于JPEG、PNG、GIF等常用图片格式的优化已几乎达到极致,因此Google于2010年提出了一种新的图片压缩格式 — WebP,给图片的优化提供了新的可能.

图片格式与设计那点事儿

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

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

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