网站用什么格式的图片更好?.jpg还是.png?看完这篇文章你就都懂了

发布时间:2017-07-27 发布者:新锐传媒 查阅 [1015] 评论 [0]

不论是从用户体验方面,还是从搜索引擎的网站质量评估指标来看,尽可能加快网站加载速度已经成为了所有网站的要求。要加速网站加载,可用方式很多,包括:使用CDN,选择更好的服务器,JS与CSS的异步加载等等。


本篇文章将从图片格式的角度来入手,让看完这篇文章的你明白在网站的不同地方上该用什么格式的图片,图片压缩可以在保证质量的同时压缩比可以多么的显著,在达到图片质量要求的同时,减少图片大小,让网站更快。


四种网上常见的图片格式对比表:

我们通常在网上见到的图片有4种格式,分别是:jpg,png,gif以及webp。下表对比了这四种图片的一些属性:

 

 
压缩效果
无损压缩
有损压缩
动画效果
Png
支持
不支持
不支持
Gif
还行
支持
支持
支持
Jpg
支持(意义不大)
支持
不支持
Webp
非常棒
支持
支持
支持

 

除非我们要展示的是动态图片,不然我们不应该使用任何gif格式的图片。在上述的四种图片格式中,我们最常用的是jpg和png格式。


webp看起来很好啊,为什么不用呢?


webp作为谷歌旨在加快图片加载速度而开发出的图片格式,其效果确实非常好。然而其最致命的缺点在于:支持程度不高。作为谷歌开发的图片格式,基于各种原因,除了Opera与Chrome浏览器完全支持以外,其他的浏览器(比如苹果的Safari)都没有完全支持该格式。当我们无法解决这个问题的时候,使用不支持webp的浏览器的用户将看不到任何webp的图片。现在的一个比较可行的解决办法就是要准备webp格式与替代格式图片,并使用js等进行浏览器的检测,当检测到支持webp的浏览器时自动替换为webp格式。


这意味着不管怎样,我们都需要在jpg与png中做出一个选择。


做出选择的最简单方式就是,扪心自问:我这里的图片要提供的是什么样的信息?是单纯的照片?我网站上的logo?亦或是一件画作之类的艺术品?


当我们要保存与使用的是一张照片时,我们使用jpg格式。当保存使用的图片是其他作用:比如logo,艺术品等等时,我们需要使用png。当我们使用错误的图片格式时,我们通常会无意义的增加图片大小。


jpg的有损压缩模式在肉眼上难以察觉,然而当图像放大时,就会出现块状模糊的情况。因此如果仅仅作为照片,

我们选择图片大小上压缩效果显著的jpg格式。而png的无损压缩模式指的是采用保存颜色填充的模式,能在保真效果下,尽可能地压缩图像文件的大小。因此在艺术画作与logo这一类的图片时,我们通常选择png。

那么png就无法有效压缩图片大小么?

事实上,png压缩效果同样可以非常显著,但这主要取决于我们对图片有什么需求。png分为png8与png24两种模式。当我们的图片色彩并不丰富甚至是黑白图片的时候,比如logo,可以选择png8的形式,效果非常显著。来看一下这个例子:

原文件大小110kb

原文件大小110kb

初次压缩后13.8kb
当使用ps的标准png8格式保存时,图像大小压缩为13.8kb

再次压缩后图像大小4.56kb
当使用ps的存储为web格式的png8时,图像进一步压缩为4.56kb

最终可压缩到1.41kb
当使用ps的灰度模式web格式png8时,图像仅仅占用1.41kb,与原文件大小对比,压缩倍率高达98%


从单个文件的大小看来,也仅仅压缩了100kb多点,似乎影响不大,然而当我们的某些页面含有多个商标时(比如网站常见的合作伙伴页面罗列商标),比如十个甚至以上,总体的压缩大小就会非常值得期待。


上面的4大图像格式,没有包含SVG?网页图片使用SVG效果怎样?


SVG作为一种基于XML格式定义的图形,优点在于在放大或者改变尺寸的情况下,其质量都不会改变。然而, SVG中可能包含大量的代码,要使用SVG我们需要具备专业知识的的人员才行。并且,SVG在浏览器中也并不是完全支持的。然而,如果你的图像并不复杂,使用SVG的效果可能会非常理想,我们需要自己来评估是否有必要使用。

总结


通过优化图片,有效地减小网页体积,加快网站加载速度,是一个很有效的办法。在优化图片之前,第一步要做的就是选对图片的格式。之后再进行其他的工作,关于后续的优化工作,青岛新锐将在下次的文章中给您讲述,请继续关注。


 

      免责声明 | 新锐观点 | 网站运营 | 网站推广 | 联系我们 | 网站地图