浅谈 WebP 图片格式

96
Login926
2016.07.13 17:33* 字数 1716

QQ 空间中时常会有好友发一些照片,有时看到了决计保存图片留作纪念,但 QQ 空间中的图片想保存下来好像并不简单。


QQ 图片空间保存


文件名处显示为psb,保存类型为所有文件
如果直接点击保存,保存下来的是一个无扩展名的图片,普通图片浏览器也无法打开,当打开方式选择Chrome时,我们才能真正看到这张图片。这到底是什么?这真的是图片吗?为什么只能在 Chrome 中正常显示?


0x01 借助工具确定图片格式

既然保存下来看不到图片格式,不如直接抓包。
1.在 Chrome 中定位图片真实地址


Chrome 中定位图片


2.打开 Fiddler4 抓包软件
3.Chrome 中清除缓存并在新标签中打开图片
4.切换到 Fiddler 4中,已经看到捕获了图片


捕获图片

可以看到,图片格式显示为: WebP
原来保存的图片为 WebP 格式,只需要通过一些 WebP 转换器就可以转换为普通图片文件格式了。


0x02 为什么要使用 WebP 格式?

图片保存下来却无法正常打开,普通人肯定一肚子火:好好的 jpg 格式不去用,搞什么 WebP 格式,图片都不能保存?

不如看看鹅厂工程师是如何看待 WebP 的:

WebP 的优势体现在它具有更优的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量;同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性,在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。

内容来源: WebP 探寻之路 - 腾讯 ISUX – 社交用户体验设计

那么究竟什么是 WebP ?

WebP(发音weppy),是一种同时提供了有损压缩无损压缩的图片文件格式,派生自视频编码格式VP8,是由Google在购买On2 Technologies后发展出来,以BSD授权条款发布。

WebP最初在2010年发布,目标是减少文件大小,但达到和JPEG格式相同的图片质量,希望能够减少图片档在网络上的发送时间。
2011年11月8日,Google开始让WebP支持无损压缩和透明色的功能,而在2012年8月16日的参考实做libwebp 0.2.0中正式支持
。根据Google较早的测试,WebP的无损压缩比网络上找到的PNG档少了45%的文件大小,即使这些PNG档在使用pngcrushPNGOUT处理过,WebP还是可以减少28%的文件大小。

内容来源:WebP - 维基百科

相较于其他图片格式 WebP 有什么优势?


与其他图片对比


图片来源:web前端图片极限优化策略


与PNG 比较


图片来源:前端里


加载时间比较

图片来源:CSDN

据此可以得出一些结论:

PNG 转 WebP 的压缩率要高于 PNG 原图压缩率,同样支持有损与无损压缩

转换后的 WebP 体积大幅减少,图片质量也得到保障(同时肉眼几乎无法看出差异)

转换后的 WebP 支持 Alpha 透明和 24-bit 颜色数,不存在 PNG8 色彩不够丰富和在浏览器中可能会出现毛边的问题

内容来源:WebP相对于PNG、JPG有什么优势? - 知乎

这么好的技术肯定要去用啊,不过 WebP 兼容性似乎并不理想:

根据对目前国内浏览器占比与 WebP 的兼容性分析,大约有 50% 以上的国内用户可以直接体验到 WebP,如果你的网站以图片为主,或者你的产品基于 Chromium 内核,建议体验尝试。假如你打算在 App 中使用 WebP,除了 Android4.0 以上提供的原生支持外,其他版本以及 iOS 都可以直接使用官方提供的解析库(AndroidiOS )。

内容来源: WebP 探寻之路 - 腾讯 ISUX – 社交用户体验设计

这么一说,WebP 只能在 Chromium 浏览器中使用,那如何在其他浏览器中使用呢?来看看前鹅厂工程师的解决方案:

这么好的技术肯定希望能尽快用起来.然后当时只有chrome浏览器支持,IE完全不支持,怎么办呢? IE的用户比例还是大头啊,当时google给的解决方案是把图片通过Flash来显示,一个页面只有一张图片还有,像空间动态一屏都是图片如果要同时加载上十个flash肯定卡死,后来怎么解决呢,我们还是通过flash去加载webp图片,不过在flash里面再把图片转成jpg格式,然后再转成base64传到页面,不过IE8 base64编码不能超过32k,怎么破?直接在flash把图片分割,传回页面后再用多个Img标签把图片合起来.至此,已经实现webp对IE8+的支持.哦,对了,做这个事情还是在13年初.

内容来源:QQ空间的前端技术水平如何? - 知乎

可见,针对不同浏览器,腾讯并不是一股脑的把 WebP 图片往上堆,由于目前大部分 QQ 空间用户使用的都是 Chromium 内核浏览器,非常利于QQ 空间的 WebP 图片的普及。


0x03 开发者如何使用 WebP 图片技术?

1.智图

目前比较推荐的是使用腾讯的智图,ISUX 对此有专门介绍
智图同时提供了 Gulp 插件的 API


智图

Gulp 插件的安装方法参阅智图项目中的 README.md

2. iSparta

开源项目,已经发布在在 Github


iSparta

0x03 普通用户如何转换 WebP 格式为普通格式?

推荐使用在线文件转换网站 CloudConvert
以 QQ 空间中的 WebP 图片为例
1.保存图片,图片文件名为 psb ,无扩展名
2.手动添加扩展名 .webp
3.打开 CloudConvert 上传 webp 文件
4.选择输出格式


选择输出格式


5.点击转换,转换完成后下载即可。


文章中参考的内容如有侵权,请联系我进行删除
文章已同步发表至个人博客

前端