什么是 webp?这种下一代图像格式的优缺点-尊龙凯时官方网址

author: 素马

一场技术大战就在我们眼皮底下上演。不是机器人骨架类型,而是最被接受的格式类型,类似于 playstation 与 xbox 或 betamax 与 vhs。这场特殊的格式战争涉及到我们所有人,您可能在不知不觉中就已经看到了它的战斗人员。我们正在谈论下一代网络图像格式,而目前 webp 正在领先。但这只会引发更多问题,即“什么是 webp?” 和“jpeg有什么问题?”

 

 

webp 图像格式最近成为了一个热门话题。它被越来越多的设备所接受——这让竞争对手 jpeg 2000 和 jpeg xr 感到非常懊恼——并且有望成为新的默认 web 图像格式。尽管有所有令人费解的技术细节,但对于任何在网上发布图片的人来说,webp 都是一件大事。

 

因此,在本指南中,我们将解释您需要了解的所有内容、它是什么、如何使用它以及为什么要关心它。我们将解释 webp 的优缺点,然后向您展示如何转换其他图像格式。

 

什么是 webp?

撇开最近的热议不谈,webp(俗称“weppy”)实际上已经很老了。它于 2010 年首次宣布,此后一直在升级和改进,直到目前的状态。它最近成为一个热门话题,因为它在下一代图像格式大战中处于领先地位:截至撰写本文时,它已在 chrome、microsoft edge、firefox、opera 和最近的 safari 上得到支持。

要真正了解 webp 的独特之处,首先要了解所有图像文件格式及其差异。但是为了加快本文的进度,我们将直接跳到 webp 的主要卖点,压缩。

 

如果您不熟悉该术语,则压缩是指将文件的数据编码为比原始数据更少的位或数字数据片段。压缩有两种主要类型:无损(图像质量随着数据大小的下降而保持不变)和有损(图像质量随着数据大小的显着下降而略有下降)。如果您想知道如何在不影响质量的情况下减小文件大小的“魔力”,本指南解释得很好。

 

简而言之,webp 图像通常比它们的对应图像更小,但质量相同,这要归功于其卓越的压缩。这意味着为您自己的网站使用 webp 图像(通常)会使其运行得更快并同时减少您的数据存储。

 

小了多少?根据数据,webp 无损压缩比 png小 26% ,有损压缩比 jpeg小 25-34% 。对于使用大量图片的网站,切换可能会产生重大影响并减少宝贵的几毫秒加载时间,尤其是在移动设备上。

 

webp 的另一个主要优势是它的多功能性——它结合了透明度和动画。这很重要,因为通常您找不到相同格式的这些功能:在 webp 之前,您必须将 png 用于透明背景,将 gif 用于动画,并且不能同时支持两者。

 

出色的性能,确实为 webp 成为新的默认 web 文件格式铺平了道路。

 

webp 的优缺点

——

令人印象深刻的是,webp 还没有准备好成为“唯一”。现在,看看 webp 的优缺点,看看它是否适合您和您的需求。

 

优点

 

更快的加载时间——由于文件更小,带有 webp 图像的页面加载速度更快。这极大地提升了网站的乐趣:根据 website builder expert的说法,加载的每一秒延迟都会降低 16% 的访问者满意度,如果没有在 4 秒内加载,四分之一的访问者会完全放弃您。

 

更少的媒体存储——webp 的增强压缩也意味着更少的存储空间。这对于托管大量图像的网站至关重要,甚至可以为您节省网络托管费用。

 

透明度和动画——正如我们上面提到的,webp 是唯一支持 png 的透明背景和 gif 的动画功能的图像格式,更不用说它胜过 jpeg 的压缩。

 

缺点

 

并非所有浏览器都支持——尽管 webp 在浏览器中占有最大份额,但仍有一些不支持它(internet explorer 采用它的速度很慢,这是 internet explorer 的品牌)。有一种解决方法涉及在 html 中创建后备图像,但是创建一个完整的其他文件作为备份有时会抵消您首先使用 webp 节省的所有额外存储空间。

 

质量仍然下降——与其说是 webp 的劣势不如说是所有有损压缩的劣势,你的图像质量仍然下降。对于大多数人来说,这个数量可以忽略不计,但对于像摄影或平面设计作品集这样的视觉网站,你希望你的视觉质量达到最大。

 

结论:webp 追踪

——

考虑到对加载时间的巨大影响,几乎任何网站或社交媒体都可以从 webp 格式中受益。正如我们在 webp 的优缺点中提到的,一个明显的危险信号是并非所有浏览器都使用它——请务必仔细检查您的使用分析,以查看您的访问者喜欢哪些浏览器以及切换到 webp 是否会影响他们。

 

如果您仍然不确定哪种图像格式适合您,您可以随时聘请专业的网页设计师为您处理。只要提到网站速度和加载时间是一个高优先级,他们就会从那里开始。

 

更多专业网站设计知识,可以咨询”素马设计“,我们乐于跟您分享。

 

相关阅读


网站地图