全站搜索

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

网站开发 356

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

上一篇: 下一篇:

相关推荐

  • 如何快速的抠好人物商品图?不会用ps也能快速的抠图的神器?

    371

    你是不是经常为要扣人物头发烦恼,总觉得处理不好,让人物看起来乱糟糟的。是不是在为扣一些繁杂的图片太多细节处理工作量很多而烦恼?有烦恼就会有解决的途径,利用好各种抠图快捷途径,不仅可以提升工作效率,还能防止“秃头”。 在线抠图不仅仅不占电脑内存,还能a...

    查看全文
  • 软文营销推广平台:软文的写作技巧有哪些

    303

      在网站优化过程当中,软文的编写是最重要的部分,今天网站优化每天都需要的更新大量的文章,而软文的编写需要有专业的技术,并且每天都能够提交规定的文章数量,文章的内容能够丰富多彩,进一步的帮助网站优化达到最好的成效。      那么网站营...

    查看全文
  • 「电商seo」一个企业网站是如何进行整站seo优化

    310

      单词优化是现在比较热门之一,但是还是有一些极少客户想做整站优化,他们比较看重的是整体的权重与整体的效果,所以这个时候就难住了很多人,那么整站优化该如何进行呢?      第一,搜索引擎友好优化计划对于规划一个搜索引擎优化友好型网站是非...

    查看全文
  • 响应式网站的制作步骤以及关键要点

    327

    如果您不需要花哨的功能,也不希望自己定期写博客或在线销售,那么HTML响应网站模板正是您所需要的。在这里,我们将引导您完成设置步骤,以便您可以在最短的时间内启动。如何用HTML制作响应性强的网站HTML响应的商业网站模板的优点在于它们易于使用,并且不需要任何...

    查看全文
展开更多