【省带宽、压成本专题】带宽成本降低50%的秘密——深入解析Web

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

第一篇：《节省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

△ 有损WebP vs JPG

当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的原因​