全站搜索

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

网站开发 313

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

上一篇: 下一篇:

相关推荐

  • 「数据监控」网站优化要明确网站设计和运营的模式

    290

      现如今经营网站的定位非常多,网站的形式也是多种多样化,那么在网站优化之前一定要明确网站的发展模式,只有这样才能够有利于搜索引擎,在建设和设计网站的时候,要将自己与其他类型网站区分开来。      拥有独特性的网站经营方式,也可以吸引...

    查看全文
  • 时间敏感性图像在设计中的使用策略

    351

    任何东西都是有寿命的,图片也是。有的图片寿命很长,例如,埃菲尔铁塔的照片,或者华盛顿广场的照片。也有的图片寿命很短,例如,某个社会新闻的图片,随着该社会新闻不再被关注,很少人会引用该图片。  无论是网站设计,还是小程序设计、企业商城设计,都会...

    查看全文
  • 一个产业的网站生态研究

    301

    我们认为有必要对一个产业的网站生态进行研究,理由如下: 第一,有人希望深入某一产业创业,就需要做网站,需要知道自己的网站属于产业网站中的那一块,处于什么样的位置。 第二,了解了一个产业的网站生态,可以借助整个生态链,对自己的网站进行推广和营销。 ...

    查看全文
  • 明白各个行业基调 网站设计不跑偏

    282

    为什么一个行业内,不少企业的官网都存在雷同? 雷同有不合理的一面,但是也有合理的一面。 不合理的一面是:网站设计业内存在大量的模仿和抄袭,造成雷同; 合理的一面是:每个行业,都有行业基调,基调决定了处于同一个行业内的企业,具有相似的文化基因。 举...

    查看全文
展开更多