前端开发者都要学习使用WebP加速你的网站

图像是网络的重要组成部分，但是，如果没有适当优化，它们可能会给用户体验带来很多挑战。 自从Google将WebP作为解决此问题的方法以来，已经过去了将近十年。随着越来越多的浏览器，设备和软件支持它，Web设计人员应该积极采用它作为默认图像格式。

即使你将图像调整大小到网站的确切规格并通过压缩程序运行它们，它们仍然可能使性能承受压力并占用更多的带宽，还有后面更糟糕的是，所有这些图像处理都可能导致图片的质量下降。

考虑到图像对网页设计的重要性，这不是我们可以轻松处理的元素，也不能在优化图像时承担起偷工减料的负担。那么，有什么解决方案？

我们看下Google的建议：

几年前，Google旨在通过创建一种称为WebP的下一代图像格式来解决这一问题，我们可以从PageSpeed Insights的此屏幕快照中看到Google建议使用WebP和其他下一代格式来显着减小图像的尺寸，同时又能保持图像的质量。

我们来说说使用WebP的好处是什么？

仅仅说WebP比JPG和PNG“更好”还不够，重要的是要了解WebP如何开展工作的机制，以及为什么在其他文件格式上使用WebP如此有益。

对于传统的图像格式，压缩总是导致折衷。

JPG有损压缩会导致图像的清晰度和精细度下降，一旦应用到网上就不能撤消。

WebP有损压缩则使用所谓的预测编码来更准确地调整图像中的像素。我们引用Google所说，还有其他一些因素在起作用：

块自适应量化也有很大的不同。过滤有助于中等/低比特率。与霍夫曼编码相比，布尔算术编码提供了5％-10％的压缩增益。”

平均而言，Google估计WebP有损压缩会导致文件质量比相同质量的JPG小25％至34％。

至于PNG无损压缩，它在保持图像质量方面效果很好，但是对图像大小的影响不如JPG对等。

WebP更有效地处理这种类型的压缩。这是由于使用了多种压缩技术以及应用于图像的熵编码。我们看下谷歌是如何解释它是如何工作的：

“应用于图像的变换包括像素的空间预测，色彩空间变换，使用局部出现的调色板，将多个像素打包为一个像素和alpha替换。”

平均而言，Google估计WebP无损压缩所产生的文件比相同质量的PNG大约小26％。

WebP能够执行其他文件格式无法执行的操作，设计人员可以在RGB颜色上使用WebP有损编码，并在具有透明背景（alpha通道）的图像上使用无损编码。

由于这种强大的无损和有损压缩组合，动画视频的尺寸可以比GIF压缩的视频小得多。

Google估计，使用有损压缩时，平均压缩量约为GIF原始大小的64％，而使用无损压缩时，平均压缩量为19％。

不用说了，目前而言在保持图像完整性的速度方面，没有可以击败WebP而取代它。