全站搜索

一文看懂网站设计中的WebP图像格式

网站开发 174

我们对JPG、GIF格式都比较熟悉。但是,对新出现的WebP格式还比较陌生。本文,我们将系统介绍与图片文件格式相关的问题。

什么是图片的文件格式?

 

相机拍摄出来的图片往往文件很大,很占用储存空间。怎么办呢?就是对图像进行压缩,采用不同算法的压缩方式,就是文件格式。如JPG文件和GIF文件,就是使用了两种不同压缩算法而得到的图片。

网站设计与图片格式的关系?

网站设计为何要考虑图像格式呢?有两个原因。

网站设计需要考虑加载速度。按照这一要求,设计师应该尽量选择可以将图片压缩的更小的算法。

网站设计需要考虑清晰度。按照这一要求,设计师还需要考虑压缩的时候,不太影响图片的清晰度。

如上两个要求是矛盾的,设计师需要做的就是协调,即实现——较好的清晰度下的小容量。

而WebP格式就是为了解决这一矛盾的。

WebP图像格式的简要背景

WebP被Google称为一种现代图像格式,它的目的是让网页设计师和开发人员在为他们的用户设计更好的体验时更容易工作。由于互联网非常注重图像,因此对改进用户体验的关注集中在减少加载图像所需的时间上。因此,最终用户可以在不牺牲网站速度的情况下享受更高质量的图片。

这是因为这种类型的图像依赖于两种压缩形式(通过使用比原始图像更少的位来减小数据文件的大小):有损压缩和无损压缩。

有损压缩,也称为不可逆压缩,是指一种算法,通过这种算法,原始数据或图像仅被近似地重建,同时仍然允许更好的压缩率和更小的数据大小。

与此形成鲜明对比的是,无损压缩正如其名称所示,是一种在压缩过程中不会牺牲任何东西的压缩。换句话说,压缩后的图片或文件是对原始图像的完美重建。

通过这些算法处理您在web上的图像,可以确保您在web上浏览的图像比您经常遇到的格式更美观,尺寸更小,例如:JPEG格式和GIF格式。

为了便于比较,WebP无损图像的大小将小于PNG图像。与JPEG格式比较,WebP有损图像的大小将缩小25%到34%。

仅从大小比较来看,这种Google格式为设计师和开发人员提供了一种比传统格式大幅度减小的大小。这种缩小的大小意味着站点和浏览器必须减少加载图像的强度,从而导致更快的加载时间和总体更快的用户体验。

WebP格式会成为主流吗?

根据我们的观点,一种图像格式流行取决于三个因素。一是算法的优劣,是否能够满足“即清晰又小”;其二是转换便利,通过工具顺利转换为另一种格式;其三是支持范围,如浏览器、操作系统是否支持这一图像格式。

从如上三个条件看,WebP格式的图像都是满足的。

只有时间才能证明新的图像格式是否会完全取代JPEG和PNG等旧格式。在这一点上可以肯定的是,设计师和开发人员喜欢使用WebP的原因与用户喜欢访问使用这一新标准的网站的原因是一样的:观看更清晰的图像,并提供更全面、更快的web体验。

上一篇: 下一篇:

相关推荐

  • 如何给企业网站设计图标?

    123

    打开手机,桌面上都是图标。打开电脑,桌面上同样有很多图标。但是,在很长时间里,网站其实没有很多的图标,有的网站甚至只有一个LOGO。但是,逐渐网站上的图标越来越多了。   网站为什么需要图标?一个企业官网上,为何需要图标呢?我们认为有三个原因。 其...

    查看全文
  • 网站改版专题:网站改版到底改什么?

    162

    【编者按】网站上线之后,并非万事大吉。网站改版,也是网站运维的重要内容。为此,方维网络推出“网站改版专题”,讨论网站改版节点、内容、注意事项等等问题,仅供参考。网站改版,会出现两个极端。 极端之一是新的网站与旧的网站,完全不同。从新网站中,找不到旧...

    查看全文
  • 网站商城管理系统开发部分功能介绍

    176

    现今商城的功能越来越复杂,比如B2C商城、B2B商城、B2B2C商城,及营销比较强的B2B2C的分销式商城等等,以下功能为部分商城系统的功能,具体如下: 云仓模式:代理不同级别身份授予,不同代理身份不同拿货价位,平台代理个人虚拟云仓管理,可以一键订货,一键提发货...

    查看全文
展开更多