全站搜索

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

网站开发 287

我们对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体验。

上一篇: 下一篇:

相关推荐

  • 企业商城登录页面设计指南

    293

    包括金融公司、电商平台、会员商城、积分商城,都需要用户登录。而登录页面设计的目标之一就是“用户喜欢登录”。 那么,如何设计企业商城类网站的登录页面呢?我们提供如下指南。   尽量减少文字设计一个登录页面需要在包含的文本数量上保持一种微妙的平衡。一...

    查看全文
  • 网站设计如何让视觉画面更有层次感

    285

    一个网站,是由好几个内容模块组合而成。这几个模块之间相互相承,独立发挥它特有的作用,几个模块组合起来又是一个统一好看的整体。一个好的网站,必须要做到每一个模块都是那么的引人注目。那么如何才能做到吸引人的目光,延长客户个停留时间呢?这一期,我们从视...

    查看全文
  • 英文网站设计中字母间距的问题

    293

    从排版上看,英文比中文在间距问题上,面临的困难更多。其一,中文不存在单个汉字拆开的问题,但是英文存在,需要使用连字符;其二,英文单词占用的空间更大。所以,英文网站字母间距对网站设计师来说,是一个挑战。 基于此,我们需要系统地论述这一问题。   ...

    查看全文
  • 初创公司不花钱如何在网络推广自己的企业

    282

    创业艰辛,大家都知道,但尽管是九死一生,依然有很多怀揣自己梦想,不甘于一辈子打工的创业者不断努力尝试。现在是2020年底,马上进入2021年,互联网已经变得非常成熟,大家也都知道且熟悉从互联网获取信息。那么作为一个初创企业,能否通过互联网成功推广自己的业...

    查看全文
展开更多