Google的新WebP图像格式可以缩短加载时间

2021年2月24日05:08:53 发表评论 26 次浏览

网络图形, 尤其是照片, 正在开始发展。但是, 随着对速度和美观设计的要求不断提高, 还需要进行更多更改。一种新的免版税格式希望在不牺牲图像质量的情况下提供更快的加载图像。至少它引发了一场辩论, 可能会推动Web图形前进。

这是挑战。一方面, 网站所有者, 特别是电子商务网站所有者, 希望创建有吸引力的网站来建立信任(因为外观更好的网站可以传达专业性和可信赖性), 并最终带来更多的转化。对于产品照片或产品将如何影响生活方式尤其如此。

受欢迎的汤米巴哈马(Tommy Bahama)品牌使用吸引人的大图像来帮助销售其产品。

受欢迎的汤米巴哈马(Tommy Bahama)品牌使用吸引人的大图像来帮助销售其产品。

另一方面, 网站所有者希望网页加载速度非常快, 因此用户(潜在客户)不必等待。

美感和速度这两个愿望经常会冲突, 因为要加载大而精美的图像可能需要一些时间。

JPEG和PNG现在

JPEG和PNG这两种图像格式倾向于主导网站开发。 PNG文件可提供更好的图像质量, 出色的Alpha通道透明度, 并且通常比JPEG文件小操纵图像, 表示已在图形程序中进行了广泛修改或完全创建的图像。

该菱形图案完全在Adobe Photoshop中制成,表示PNG-24 Web图形。只有4.774K。

该菱形图案完全在Adobe Photoshop中制成, 表示PNG-24 Web图形。只有4.774K。

这与保存为中等质量JPEG的菱形图案相同。是12.31K。类似的低质量JPEG大约输入9.5K,但是质量太低而不能被认为有用。

这与保存为中等质量JPEG的菱形图案相同。是12.31K。类似的低质量JPEG大约输入9.5K, 但是质量太低而不能被认为有用。

不幸的是, 摄影的图像(包括产品图像)往往比类似尺寸的图像大, 尽管质量较低, 但JPEG图像除外, 除非该照片进行了重大修改, 而产品图像通常不是这种情况。

结果, 对于大多数网站来说, JPEG一直是并且是产品或生活方式摄影的最佳选择, 但是它们仍然无法在美观和速度之间实现完美的平衡。

WebP

去年, Google对Web图形进行了首次真正的改进, 这是自PNG在1996年开始取代旧的和劣质的GIF格式以来。这种新的Web格式称为WebP(发音为pp), 并且根据Google对900, 000张Web图像的研究, WebP图片通常比同类JPEG图片小39.8%。图像压缩的改进得益于Google在图像编码过程中所说的预测编码。

谷歌说:"预测编码使用相邻像素块中的值来预测一个块中的值, 然后仅对实际值与预测值之间的差(残差)进行编码。" "残差通常包含许多零值, 可以更有效地对其进行压缩。然后像往常一样对残差进行变换, 量化和熵编码。 WebP还使用可变的块大小。"

Google努力改进网络图形, 并在网站性能和美观之间取得更好的平衡, 这是一件好事, 而且WebP确实向正确的方向迈出了一步, 足以使网站所有者考虑使用WebP。

实际上, 如果WebP图像比相同质量的JPEG图像小40%, 则根据所用照片的数量和大小, 使用WebP的网页可能会更快。

举例来说, 乐声首页, 发现该网站要加载1, 600K多个JPEG图像。该网站的开发人员在优化这些图像方面做得非常出色, 但是切换到WebP格式可能会将图像文件减少到大约974K。

Roxy可以通过WebP加快加载时间。

Roxy可以通过WebP加快加载时间。

WebP仍面临挑战

在撰写本文时, 只有两个重要的Web浏览器-Chrome和Opera-本机支持WebP格式。插件可用于Microsoft的Internet Explorer, 但是开发流行的Firefox浏览器的Mozilla坚决拒绝支持WebP, 理由是其质量和功能尚未达到JPEG标准。

结果, 希望使用WebP的网站所有者将不得不提供某种形式的回退到JPEG。尽管这需要与设计人员和开发人员进行讨论, 但可行的是将WebP图像提供给功能强大的浏览器, 并将JPEG提供给所有其他浏览器, 从而在不疏远Internet Explorer, Safari或Firefox用户的情况下获得WebP较小文件大小的好处。

WebP的最终想法

WebP是朝着改善Web图像的图形质量和文件大小之间的平衡迈进的一步。该格式在浏览器支持方面当然面临挑战, 但是随着越来越多的网站所有者拥抱该格式并享受与之相关的速度改进, 这种情况很可能会改变。

支持WebP现在将需要进一步开发, 因为应该提供后备JPEG。但是WebP的承诺可能使它变得有价值。

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: