前端笔记 Front-end Dev Engineer

Webp技术小解

2018-06-23
随笔

现在网页图片动则几十上百 k，还有诸如移动端的二倍屏、三倍屏更加是要求高清大图甚至上 M 大小的图片也有。而网络发展虽然说百兆宽带，4G 网络已经普及，但实际上，网络并不稳定，大部分用户的网络下载这类图片，首屏渲染还是要个几秒甚至几十秒的，所以减少图片大小还是很有必要的，所以才有今天想要说的 Webp。

webp 诞生之前，天下苦之久已

不管是 PC 还是移动端，图片一直是流量大头，以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求，如何保证在图片的精细度不降低的前提下缩小图片体积，成为了一个有价值且值得探索的事情。

在浏览器对于图片支持JPEG,GIF,PNG三种格式，jpeg 是公认压缩到极致的位图，可惜不支持动画与透明度，所以 GIF 与 PNG 现如今也是常用，但是无论是 gif 还是 png，体积都非常庞大。

但如今对于 JPEG、PNG 和 GIF 这些图片格式的优化几乎已经达到了极致， 若想改变现状开辟新局面，便要有釜底抽薪的胆量和气魄，而 Google 给了我们一个新选择：WebP。

我对 Webp 进行研究的缘起

原本明明是浏览器支持什么，我就用什么，大家都图片大，我也图片大，随大流即可，为什么我无缘无故会去关心 Webp 一类技术？当然是业务上遇到瓶颈咯！

我主要负责的业务是移动端，而且采用了 VUE 这一类的单页面 spa 方案，而这一类方案至今有几个困难点无法解决。

最最难以解决的就是流畅度。

不流畅一：首屏渲染慢，切换页面时也慢，受网络影响特别严重。而且最糟糕的是，移动端的网络是最复杂的，即可能是 wifi 又可能是 2/3/4G 网络。（2/3G 其实还是很多用户在使用，4G 网络信号不好的时候，网速也未必比 3g 好）

不流畅二：卡顿。移动端的浏览器也是各种版本都用，安卓又是出名的碎片化，每个版本自带浏览器还不一样，厂商还喜欢私自定制，再加上各种千奇百怪的硬件配置。所以网页在不同设备上操作卡顿、渲染错位等等都是常见问题。

所以为了提高流畅度，加快页面浏览速度，各种方法被发明出来，SSR 渲染呀，webpack 打包将 js 按需加载呀，脚本压缩呀，雪碧图呀，懒加载呀等等一系列的方法进行了优化。这些手段是效果显著，js 都压缩到不到 200K 了，在启用 gzip 的情况下，都只要不到 100kb 左右就够了。但是一张大图或者高清图再不然 gif，png 图，上百 kb，四五百 kb 一张。所以在对 js 一类的进行优化收益已经不大，图片已经成为拖累网络，影响体验的一大包袱了。

所以对于图片优化已经是迫在眉睫的事情了。

为什么是谷歌发明 Webp 而不是微软、苹果或者 W3C

其实微软也有类似 webp 这样的压缩图片的格式，但是最终不了了之。

由 google 来发明推广其实有其必然性。

一、最需要优化图片的场景是移动端。PC 端都是宽带，网络状况良好，对于优化图片没那么急迫性。

二、谷歌的 Android 是最多的移动设备系统（初步估算 90%都是安卓设备）。所以谷歌有最强的物质基础。

三、谷歌的 Chrome 浏览器是使用率最高的浏览器，如果把使用 chrome 内核的浏览器都算进去，起码 60%以上的用户都是使用谷歌家的浏览器。所以谷歌有最大的市场支配权，可以动摇、改变事实标准的巨头存在。

四、谷歌 web 应用是全球最大的图片流量使用网站。谷歌为这些图片存储、传输付出了巨大的成本，为了降低成本，谷歌自然愿意投入资源研究。

五、谷歌拥有全球最强的技术实力。

所以，必然是谷歌发明 webp 技术。

什么是 WebP？

WebP 格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有 JPEG 的 2/3，并能节省大量的服务器宽带资源和数据空间。Facebook Ebay 等知名网站已经开始测试并使用 WebP 格式。 –《百度百科》

webp 对比图

WebP 优缺点

WebP，是一种同时提供了有损压缩与无损压缩的图片文件格式，派生自视频编码格式 VP8。WebP 最初在 2010 年发布，目标是减少文件大小，但达到 和 JEPG 格式相同的图片质量，希望能够减少图片档在网络上的发送时间。

2011 年 11 月 8 日，Google 开始让 WebP 支持无损压缩和透明色的功能。根据 Google 较早的测试，WebP 的无损压缩比网络上找到的 PNG 档少了 45％的文件大小，即使这些 PNG 档在使用 PNGCRUSH 和 PNGOUT 处理过，WebP 还是可以减少 28％的文件大小。就目前而言，Webp 可以让图片大小平均减少 70%。

WebP 是未来图片格式的发展趋势。

WebP 的应用场景：

  • 客户端软件，内嵌了基于 Chromium 的 webview，这类浏览器中应用的网页是可以完全使用 WebP 格式，提升加载渲染速度，不考虑兼容。
  • 用 node-webkit 开发的程序，用 WebP 可以减少文件包的体积。
  • 移动应用 或 网页游戏 ,界面需要大量图片,可以嵌入 WebP 的解码包，能够节省用户流量，提升访问速度

WebP 的优势：

  • 对于 PNG 图片，WebP 比 PNG 小了 45%。

这里列举一个简单的测试：对比 PNG 原图、PNG 无损压缩、PNG 转 WebP（无损）、PNG 转 WebP（有损）的压缩效果。更多测试查看 https://isparta.github.io（请用 Chrome 浏览器打开）

可以得出结论：

  • PNG 转 WebP 的压缩率要高于 PNG 原图压缩率，同样支持有损与无损压缩
  • 转换后的 WebP 体积大幅减少，图片质量也得到保障（同时肉眼几乎无法看出差异）
  • 转换后的 WebP 支持 Alpha 透明和 24-bit 颜色数，不存在 PNG8 色彩不够丰富和在浏览器中可能会出现毛边的问题

经测试，JPEG 转 WebP 的效果更佳。13 年底 Google 正式推出 Animated WebP，即动态 WebP，既支持 GIF 转 WebP，同时也支持将多张 WebP 图片生成 Animated WebP。但是压缩效果未能达到宣传的那样。如果你在使用 Chrome32 以上的浏览器，可以点这里查看官方提供的实例： WebP 示例 (Animated WebP)。

科技博客 Gig‍‍‍aOM 曾报道：YouTube 的视频略缩图采用 WebP 格式后，网页加载速度提升了 10%；谷歌的 Chrome 网上应用商店采用 WebP 格式图片后，每天可以节省几 TB 的带宽，页面平均加载时间大约减少 1/3；Google+ 移动应用采用 WebP 图片格式后，每天节省了 50TB 数据存储空间

又拍云上关于 WebP 的描述

WebP 的原理

详见来自 WebP 的工作原理 都说 WebP 厉害，究竟厉害在哪里？ 压缩算法——谷歌Webp

WebP 从何而来

WebP 文件格式来源于VP8 视频编解码(你可能更知道 WebM)。VP8 编解码器的其中一个强大特性是帧内预测压缩，或者说，视频的每一帧都被压缩，后续帧与帧之间的差异也会被压缩。

这就是 WebP 的由来：WebM 文件里单个被压缩的帧。

或者，更精确的说 WebP 的核心来则 WebM。自从 2011 年发布以来，WebP 作为一个独特文件类型它也做了很多改变和升级。例如像透明度，无损模式，和一些诡异扭曲，以及对动画的支持。

没错，WebP 是一种图片格式…来自一种视频格式…它支持动画。

有损模式

WebP 的有损模式是建立在与一张静止的 JPG 竞争的基础上，因此，你会注意到在对文件处理上有一些惊人相识。

宏块(MacroBlocking)

编码器的第一个阶段是将图片分割成不同”宏块”。典型的宏块包括一个 16x16 的亮度像素块，和两个 8x8 的色度像素块。这个阶段非常像 JPEG 格式里转换颜色空间，对色度通道降低采样，以及细分图片。 webp宏块

预测

宏块里每个 4x4 的子块都有一个预测模型。(又名过滤)。在 PNG 里过滤用得非常多，它对每一行都做同样的事，而 WebP 过滤的是每一块。它是这样处理的，在一个块周围定义两组像素:有一行在它上面为 A，在它左边那一列为 L。

webp预测模型

利用 A 和 L，编码器会将它们放在一个 4x4 的测试像素块填满，并确定哪一个生成了最接近原始块的值。这些用不同方法填满的块叫做”预测块”。

  • Horiz prediction(水平预测)——将块的每列使用左列（L）数据的副本进行填充。
  • Vertical Prediction(垂直预测)——将块的每行使用上列（A）数据的副本进行填充。
  • DC Prediction(DC 预测)——将块使用 A 上列的像素与 L 左列的像素的平均值进行填充。
  • True Motion (TrueMotion 预测)——一种超级先进的模式，我暂时不讲。

值得注意的是，4x4 的亮度块还有另外 6 种模式，但你现在只需知道这些就好;)

预测

基本流程是我们找到这个快最佳的预测块，并导出过滤结果(剩余误差)，然后送到下个阶段。

JPGify it

WebP编码的最后阶段看起来非常像我们的老朋友JPG:

  • 对块里剩余的值执行DCT过滤
  • DCT矩阵后量化
  • 转成量化矩阵后重新排序，然后送到一个静态压缩器里。

压缩

这有主要有两点不同：

  • 在DCT阶段输入的数据不是原始的数据块本身，而是预测后的数据
  • WebP用得静态压缩器是算术压缩器，它和JPG用的霍夫曼编码器类似。

无损压缩

WebP无损编码基于使用几种不同技术变换图像。然后，对变换参数和变换后的图像数据执行熵编码。应用于图像的变换包括像素的空间预测，颜色空间变换，使用局部出现的调色板，将多个像素打包到一个像素中，以及α替换。对于熵编码，我们使用LZ77-Huffman编码的变体，其使用距离值和紧凑稀疏值的2D编码。

WebP 现状

本段参考了Google最新的图片格式WEBP全面解析

WebP 在各大互联网公司已经使用得很多了，国外的有 Google（自家的东西肯定要用啦，Chrome Store 甚至已全站使用 WebP）、Facebook 和 ebay，国内的有淘宝、腾讯和美团等。

兼容性与可用性

虽然 WebP 的使用给实际应用带来了很多好处，且 Google Chrome 和 Opera 浏览器以及许多其他工具和软件库都支持 WebP，但是到目前为止也并非所有浏览器都支持 WebP， IE、Edge、Firefox、Safari 就均未支持 WebP 格式。

假如你打算在 App 中使用 WebP，除了 Android4.0 以上提供的原生支持外，其他版本以及 iOS 都可以直接使用官方提供的解析库（Android 、iOS ）。

测试数据 可以参考 文章中的腾讯测试数据

综合技术方案

对于不同场景下 WebP 的使用，总结了一些解决方案，如下：

  • 1、若使用场景是浏览器，可以：
    • JavaScript 能力检测，对支持 WebP 的用户输出 WebP 图片
    • 使用 WebP 支持插件：WebPJS：http://webpjs.appspot.com
  • 2、若使用场景是 App，可以（又拍云介绍：
    • Android 4.0 以下 WebP 解析库（https://github.com）
    • iOS WebP 解析库（https://github.com）
  • 3、转换工具：
    • 智图（http://zhitu.tencent.com）
    • iSparta（http://isparta.ghub）
  • 4、又拍云方案

效果可以参考WebP 探寻之路

腾讯方案

webp图片实践之路 腾讯社交网络图片带宽优化技术演进之路

总结

WebP方案总体上来说已经成熟，现在已经可以尝试使用webp技术了。

评论

Content