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

资料来源：网络整理时间：2023/3/22 4:10:04 共计：3606 浏览

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

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

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

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

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

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

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

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

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

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

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。