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

jusewe 2019-12-18

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

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

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

我们看下Google的建议:

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

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

前端开发者都要学习使用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加速你的网站

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

相关推荐