本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一工夫和你分享前端行业趋势，学习路径等等。
更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi ，蕴含一线大厂面试残缺考点、材料以及我的系列文章。

谷歌最后开发的WebP是一种取代JPEG的有损图像格式，它可能产生比以JPEG编码的等同品质的图像文件更小的文件。起初，该格局的更新引入了无损压缩、相似PNG的阿尔法通道透明度和相似GIF的动画等选项，所有这些都能够与JPEG式的有损压缩同时应用。WebP是一种十分多才多艺的格局。

WebP的有损压缩算法基于VP8视频编解码器用于压缩视频关键帧的办法。从高层次来看，它相似于JPEG编码：WebP以“块”为单位操作，而不是单个像素，并且具备相似亮度和色度之间的宰割。WebP的亮度块为16x16，色度块为8x8，并且这些“macroblocks”进一步细分为4x4子块。

WebP与JPEG基本不同的两个特色是“块预测(block prediction)”和“自适应块量化(adaptive block quantization)”。

Block Prediction

块预测是指依据其四周块的值，特地是上方和左侧的块，预测每个色度和亮度块的内容的过程。正如你所设想的那样，执行这项工作的算法相当简单，但用简略的语言来说，“如果以后块上方和左侧是蓝色的，则假设该块是蓝色的。”

实际上，PNG和JPEG也在某种程度上进行这种预测。然而，WebP独特之处在于它采样四周块的数据，而后通过几种不同的“预测模式”尝试填充以后块，无效地尝试“绘制”图像的缺失局部。而后，每个预测模式提供的后果将与理论图像数据进行比拟，抉择最靠近的预测匹配。

当然，即便最靠近的预测匹配也不会完全正确，因而该块的预测值与理论值之间的差别被编码到文件中。在解码图像时，渲染引擎应用雷同的数据利用雷同的预测逻辑，从而针对每个块生成雷同的预测值。而后将编码在文件中的预期图像与预测之间的差别利用于预测值 - 相似于Git提交代表一个差别补丁，被利用在本地文件上，而不是一个全新的文件正本。

举个例子：咱们不想深刻理解真正的预测算法中波及的简单数学问题，因而咱们将创造一个相似于 WebP 的编码方式，其中蕴含单个预测模式，并像应用旧格局一样无效地传递数字网格。咱们的算法有一个称为“预测模式一”的单个预测模式：每个块的值是它下面和右边的块的值之和，从1开始。

当初，假如咱们从上面的实在图像数据开始:

111151111122456389

应用咱们的预测模型来确定2x9网格的内容，咱们会失去以下后果:

111111111123456789

咱们的数据很适宜咱们创造的预测算法--预测的数据与咱们的实在数据十分吻合。当然，并不是齐全吻合--理论数据有几个块与预测数据不同。因而，咱们发送的编码不仅包含要应用的预测办法，还包含任何与预测值不同的块的差别。

_ _ _ _ +4 _ _ _ __ _ -1 _ _ _ -4 _ _

应用预测模式一的2x9网格。+4到1x5，-1到2x3，-4到2x7。

最终的后果是一个令人难以置信的高效编码文件。

自适应块状量化

JPEG压缩是一个对立的操作，对图像中的每个块利用雷同的量化级别。对于具备平均组成的图像，这当然是有情理的——但事实世界中的照片并不比咱们四周的世界更加平均。实际上，这意味着咱们的JPEG压缩设置不是由高频细节（JPEG压缩善于的局部）决定的，而是由咱们的图像中最有可能呈现压缩伪影的局部决定的。

在这个的例子中所看到的，前景中蝴蝶的翅膀看起来绝对清晰——与高分辨率原始图像相比稍微有点颗粒感，但如果没有原始图像来比拟，简直不会引起留神。同样，蜜蜂花的花序和前景中的叶子——即便把压缩级别调得超过正当程度，你和我也可能能看出一些压缩伪影，但前景中的货色看起来仍然过得去。而图片左上角的低频信息——含糊的绿色背景叶子——看起来很蹩脚。即便是一个没有通过专业训练的观众也会立刻留神到品质问题——背景中奥妙的突变被压缩成了锯齿状、纯色的块。

为了防止这种状况，WebP采纳了自适应的量化办法：图像被分成最多四个视觉上类似的局部，并独立调整这些局部的压缩参数。应用WebP进行同样适度的压缩：

这两个图像文件的大小大致相同。当咱们看蝴蝶的翅膀时，它们的品质大致相同——如果你十分认真地察看，你能够看到一些渺小的差别，但总体上没有实质性的品质差别。在WebP中，蜜蜂草的花朵只是稍微更清晰一些——同样，除非你将两者并排比拟并真正寻找品质上的差别，否则很可能觉察不进去。然而，背景则齐全不同：它简直没有JPEG显著的伪影。WebP给咱们雷同的文件大小，然而更高质量的图像——除了一些咱们的心理视觉零碎如果不是这样严密比拟就无奈察觉到的渺小细节。

应用 WebP

WebP的外部机制可能比JPEG编码要简单得多，但对于咱们日常工作而言同样简略：WebP的所有编码复杂性都规范化为一个繁多的“quality”值，从0到100示意，就像JPEG一样。同样，这并不意味着你只能应用一个整体“quality”设置。您能够 - 也应该 - 调整WebP编码的所有细节，即便只是为了更好地了解这些通常看不见的设置如何影响文件大小和品质。

谷歌提供了一个名为cwebp的命令行编码器，能够让你转换或压缩单个文件或整个图像目录：

$ cwebp -q 80 butterfly.jpg -o butterfly.webpSaving file 'butterfly.webp'File:      butterfly.jpgDimension: 1676 x 1418Output:    208418 bytes Y-U-V-All-PSNR 41.00 43.99 44.95   41.87 dB           (0.70 bpp)block count:    intra4:     7644  (81.80%)                 Intra16:     1701  (18.20%)                 Skipped:       63  (0.67%)bytes used:  header:            249  (0.1%)               mode-partition:  36885  (17.7%)Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  totalmacroblocks:     |       8%|      22%|      26%|      44%|   9345quantizer:       |      27 |      25 |      21 |      13 |filter level:    |       8 |       6 |      19 |      16 |

如果你不偏向于应用命令行，Squoosh也能够为咱们提供WebP编码。它让咱们能够抉择在不同的编码、设置、品质程度和文件大小与JPEG的差别之间进行并排比拟。

代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。

原文：https://web.dev/learn/images/...

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。