带宽成本降低50%的秘密——深入解析WebP

原创 又拍云 随笔 WebP 191阅读 2018-07-23 14:13:36 举报

过去几年,又拍云一直在点播、直播等视频应用方面潜心钻研,取得了不俗的成果。我们结合点播、直播、短视频等业务中的用户场景,推出了“省带宽、压成本”系列文章,从编码技术、网络架构等角度出发,结合又拍云的产品成果,向大家介绍节省流量,降低带宽成本的妙招。

第一篇:《节省50%以上的流量成本,从产品架构看PCDN的节流能力》

第二篇:《深入解析H.265编码模式,带你了解Apple全面推进H.265的原因》

第三篇:《爱奇艺第一季度又烧了11个亿元,什么时候是个头?》

第四篇:《降低30%视频码率,深挖“窄带高清”的实现原理》

第五篇:《带宽成本降低50%的秘密——深入解析WebP》


“省带宽、压成本”系列前面四篇文章,分别介绍了PrismCDN、H.265、码率适配限速、窄带高清等基于视频、直播的产品或技术。

视频、直播网站除了在视频层面节约成本之外,其实还有其他方法可以节省流量带宽!

视频网站的一部分流量是来自于视频缩略图、预览图的加载。减少这一部分图片的加载流量,也能够省下一笔不小的流量开支。

本文以某图片素材网站为例,跟大家聊聊在保证图片品质的前提下,降低图片加载流量的方法。

该图片素材网站拥有大量的图片,加载图片资源会造成大量带宽消耗,同时受限于服务器和用户端下载带宽,过多的图片可能会造成网站加速较慢,影响到用户的体验。

该图片素材网站通过应用又拍云推出的“WebP自适应”后,同时实现了节约带宽和提升加载速度两个目标!

应用WebP后的效果

2017年,该图片素材网站全站开始支持WebP格式,通过Chrome浏览器浏览该网站,该网站会自动推送WebP格式的图片给用户。
△2017年,该图片网站应用WebP前后的带宽/流量变化

从上图的数据可以看出,通过对新一代图片格式WebP的应用,该图片网站在总体请求量变化不大的情况下,整体带宽、流量近下降了50%,成功降低网站带宽资源的消耗,节省了一大笔成本。

WebP格式之所以能够大幅节省带宽,得益于其出色的压缩效率:既不降低图片的画质,同时大幅降低图片的体积。降低体积后的图片也有利于加快网站打开速度,提升用户体验。

WebP的优势:同等画质下更高的压缩率

这里我们简单了解一下WebP格式,目前主流的图片格式是PNG、JPEG、GIF等,这些图片格式标准应用广泛,基本上都是发明于十几、二十年前,所采用的图片压缩技术已经十分老旧,资源利用效率很低,所以在图片压缩方面有着极大的进步空间。

近几年,新一代的图片格式有很多,比如WebP、FLIF、wdp、bpg以及腾讯自研的TPG等等,压缩效率都远远高于PNG、JPEG、GIF。

在这些新一代的图片格式中,最受推崇的就是WebP,它是Google的亲儿子,推出广受欢迎,YouTube、Google Chrome 应用商店、Facebook等网站都陆续采用了WebP。Chrome浏览器、微信等App也支持WebP格式。

WebP格式派生自VP8视频编码,同时提供有损压缩和无损压缩:

  • 有损WebP压缩使用的图像编码方式,与VP8视频编解码器中压缩视频关键帧的方法相同。利用图像已编码部分预测未编码部分,将图像细分来进行预测处理,分块越细预测越准确。获取编码数值后将原图像数据减去预测数据得到差值,仅对差值进行编码,以此控制大小。
  • 无损WebP压缩使用已知的图像片段来精确地重建新的像素,在无法找到相应的匹配值的情况下,使用本地调色板进行优化。

除了具备同等画质下更高压缩率的优势,WebP本身集合多种图片文件格式的特点,能够像JPEG一样适合压缩照片和其他细节丰富的图片,像GIF一样可以显示动态图片,像PNG一样支持透明图像。

有对比有伤害:有损WebP大战JPG
△有损WebPvsJPG

当JPG原图以有损WebP格式,在不影响图片主观质量的情况下压缩时,图片体积减少了40%左右。

与JPG相比,WebP能够在做有损处理的时候不影响图片的观看质量,同时大幅度降低图片体积。有损WebP压缩性能优于JPG的原因主要是其预测编码技术先进,宏块自适应量化也带来了压缩效率的提升,布尔算术编码与霍夫曼编码相比提升了5%~10%的压缩性能。

有比较有伤害:无损WebP大战PNG
△PNG原图、PNG无损、WebP无损对比

上图是PNG原图与WebP无损的对比,通过统计,WebP格式对PNG图片的优化到达了 20%~40%。

完美解决图片适配问题——WebP自适应

WebP作为Google力推的下一代图片格式,凭借Chrome在浏览器市场中60%的占有率,以及对图片体积的压缩率,已经具备了极强的应用基础,但还是会有部分浏览器、App不支持WebP格式,这多少会影响到开发者的选择。如果服务器端推送WebP格式的图片,但终端用户的App不支持,岂不是很影响用户体验?
△WebP的浏览器支持情况

又拍云在2017年3月推出了“WebP自适应”的功能,完美地解决了这个问题。客户上传图片内容后,又拍云会向支持WebP格式的浏览器、App推送WebP格式,向不支持WebP格式的浏览器、App推送原格式。

客户在又拍云后台开启“WebP自适应”后,又拍云CDN会根据HTTP Accep头来判断设备是否支持WebP,如果判定设备支持WebP才会从节点返回WebP图片格式的副本然后进行缓存。当设备不支持WebP时,会选择返回原图。

我们以实际案例解读WebP的巨大优势,这个优势其实可以推导到很多视频、直播网站。视频、直播网站中的有着大量的略缩图、动态预览图,这些图片采用WebP格式后,对网站整体流量的下降大有裨益,同时在网站打开速度方面也会有不小提升。以YouTube为例,应用WebP格式后,YouTube网站的载入速度快了10%。

推荐阅读:

【省带宽、压成本专题】降低30%视频码率,深挖“窄带高清”的实现原理​
【省带宽、压成本专题】爱奇艺第一季度又烧了11个亿元,什么时候是个头?​
【省带宽、压成本专题】深入解析 H.265 编码模式,带你了解Apple全面推进H.265的原因​

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复