简单谈谈图片加载及优化

为什么要优化

图片是我们在项目中很常使用的,在聊如何优化前,先让我们来聊聊为什么要优化图片加载的速度。
在实际项目中,经常遇上的情况:艾玛,这个图片 真不错,放进项目吧。然后在生产环境下因为图片加载却导致了用户的体验很不好(比如b2c网站的商品图片加载2秒或3秒依然不出来)。最后不得已,抓个开发人员背锅。为了不让被抓住背锅,图片如何优化显然是重中之重。
注:如有不对的地方,请各位看官及时指正

如何优化

老板或者客户的期望

老板和客户呢,他们希望的是“我点开网页了,先别管图片清晰不清晰,我要看到所展示的所有东西,还能各种点击交互。但是如果网页好长时间都出不来,那我没有兴趣看了,你们程序员垃圾”。那么根据一个惯例,web项目的延迟,最多允许2秒到3秒(事实上2秒都已经是极限了。)

图片加载本身的问题。

众所周知,图片在加载时,最影响图片加载的无非俩点:图片本身的大小和网络环境的波动。其中,网络环境的波动,是我们不好处理的(总不能跑到客户那里,和客户说您换个网络吧。),而且就算可以和客户沟通,其成本也很高,一些不讲理的客户可能还会觉得开发的实力不行,最终再次促成开发人员背锅。

那么本着不背锅的理念,我们要解决图片加载速度的问题,只能从图片本身下手了。

图片本身呢,分为矢量图和位图。位图说明矢量图说明如果对矢量图和位图有研究的可以得出一个结论:位图侧重于处理获取和复制;矢量图侧重于编辑。但是考虑大部分用户,矢量图的使用成本可能略高(这个在下面会有说明),而且在展示速度上略逊色于位图,因此大部分情况下我们使用位图。

如何来解决我们可以解决的问题

现在我们要解决问题,只能从图片下手,那么问题又出现在面前了:什么时候用什么图片。

由于位图相对来说展示更快,如果是想某宝的商品列表页一样展示一堆东西,理所当然用位图。但是位图中也分很多种,最常见的就是jpg(jpeg)和png。这个时候有人问了“哎,我们也用的png和jpg啊,为什么有的快有的慢啊?”其实jpg和png之间还是有一些细微差别的。

jpg:jpg(也称为jpeg),属于有损压缩格式,能将图像压缩在很小的储存空间,一定程度上会造成图像数据的损伤。

png:png是一种无损压缩算法的位图格式。采用LZ77算法的派生算法进行压缩,其结果是获得高的压缩比,不损失数据。它利用特殊的编码方法标记重复出现的数据,因而对图像的颜色没有影响,也不可能产生颜色的损失,这样就可以重复保存而不降低图像质量。

jpg和png的优劣对比:

优缺点jpgpng
优点1、支持极高的压缩率。2、尺寸相对较小,下载速度快。3、占用内存小。4、多用于写实作品或背景图(比如淘宝的商品列表页的商品图、人物或者实物)1、无损压缩2、支持透明效果,支持256个透明层次。3、提供分离的线条和边缘,更好的展示较多文字、颜色相近的图片(必要时也可以用作图标)。
缺点jpg图片是有损压缩的图片,有损压缩会是原始图片质量下降,因此不适合处理文字较多的图片。占用内存大,因为是无损压缩,图片文件相对较大。

那么由以上的资料可以知道jpg比png小,但是在显示文字较多的东西时比较弱。同时jpg是没有透明的,而png有。jpg适合用于背景展示、列表展示、缩略图等对图片内容要求不高的,而png,适用于对图片内容有要求、文字较多或色彩较多的。

项目中怎么办

项目中的图片资源,主要分为两种:项目根目录自带的默认资源和用户上传的图片。
默认图片资源怎么办呢?这里我建议图标、logo一类用png图片较好;而列表默认图或背景等用jpg图更好。
那么用户上传的图片怎么办呢?建议是:1、上传的文件格式先做一个限制,然后上传的图片在后端以多种压缩比率压缩为jpg图片。2、在页面上进行加载时,先加载最小的图片,使用onload事件,待加载完成后替换为质量高的图片。

补充

jpg又有标准jpg格式和渐进式jpg。标准jpg的图片在加载缓慢时可以看出来图片是由上到下加载的,而渐进式jpg在加载时是整体显示出来但是图像很模糊然后逐渐清晰。
png又有8位、24位和32位这三种形式。其中8位PNG支持两种不同的透明形式(索引透明和alpha透明),24位PNG不支持透明,32位PNG在24位基础上增加了8位透明通道,因此可展现256级透明程度。

矢量图怎么办

当然,矢量图中也有svg可以供web使用。矢量图的优点在于可以任意放大图形显示,但绝不会以牺牲图像质量为代价。这里解释一下矢量图使用成本大:
使用成本问题:这一点主要在于用户身上。目前来说大部分情况下我们拿到的网上的图片多为jpg或png的,对很多用户而言,你让他们把jpg和png弄成矢量图会让他们觉得体验极差,因此并不建议由用户上传矢量图(除非有这种需求)。
不过考虑到矢量图的优点,最常见的应用就是做图标。如果用位图,一旦分辨率出现了变化很可能会使图标变模糊。

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页