图片优化

 

 

1. 图片素材优化

1.1  Png8、png24、png32的区别

图片文件大小对比：

Png8<png24<png32

 

图片颜色丰富度：

Png8<png24<png32

 

在线压缩网站：https://tinypng.com/

智图：https://zhitu.isux.us/

 

 

 

1.2  不同格式图片的区别：

 

图片压缩：虽然舍弃了一些无关紧要的色彩信息，但是一般情况下，人眼是察觉不出来的。

 

1.3  雪碧图：

 

优点：减少请求数量，如果本来有10张图需要http请求，但是现在只要一张。

缺点：

1.

移动页面大多数情况没办法用雪碧图，用了雪碧图表示图片大小固定了，而移动端需要兼容不同屏幕大小的移动设备，这就需要图片是可以根据屏幕尺寸而改变的。

如果你的图尺寸是固定的，那就可以用雪碧图。

2.

文件变大（如果不大就还好），如果图片还么加载完，那么整个网站的图片信息都会没有。一次加载比较慢。

避免文件太大，可以将一个很大的雪碧图，分为多张。一定程度上减少请求数量

可以根据业务场景进行雪碧图的拆分。 比如一个页面所需要的icon 可以放在一张雪碧图里。

 

 

1.4  image inline：

 

 

 

实际上，可以在我们的构建阶段，去将我们图片内容内嵌到我们的html上。作为一个与html同事存在的一个情况去发起http请求，请求一个图片资源。而是，作为一个base64位的格式将它整个文件的信息去inline到我们html上，也是减少了网站的http请求数量。对这种case呢，实际上，是非常常用的。

比如说，网站的图片都是0.1kb。非常小的一个icon，那么，我们真的要发http请求，去请求这些图片吗，显然是不合理的。因为这个时候，0.1kb的图片的真正损耗不是在这个图片的大小了，而是网络过程了。

而如果inline到html中， 那么也只是给html加了0.1kb大小的量。

 

 

1.5  svg图片（矢量图）：

 

 

 它实际上就是一个svg标签。

使用svg标签中的一些绘制线条的功能

如图，矢量图的大小比png要小很多

 

 

Webp格式（安卓支持，ios不支持）

 

Webp 压缩率更高，文件更小，解码更快。

可以使用向下兼容的方式来展示。

比如： 判断平台，如果是安卓就用webp  如果是ios 就用jpg。

例如： 淘宝的图片请求：

 

 

Inline img

 

 

 

 

1. 懒加载
   1.  懒加载优点：

浏览器对一个hostname的并发度是有上限的。如果说我们图片所在的cdn和 静态资源所在的cdn 是同一个cdn的话。那么图片的加载就会阻塞js的加载。因为js在写在我们整个html body的底部的。所以img 大部分情况下一定是先加载的。如果我们的浏览器在并发请求img的时候。它会因为并发度的限制，会导致它没有办法去并发请求里面的js相关的资源，从而导致我们js加载的延后，进而影响网站js相关的逻辑。

 

因为我们图片什么时候向服务器去发起请求来请求图片资源呢，是根据我们img内标签上的src 这么一个设置之后，那么我们的这个webcat，我们相关浏览器去渲染的过程。

它会解析到我们src下的资源。

应用场景：

我们希望，当我们图片进入我们可视区域的时候，我们上面的相关的img的src才会被设置进去。而不是一开始我们页面整体加载的时候，那些之外的图片就已经设置了src。

如果设置了，那么显然图片就会被直接加载进来。就不存在懒加载了。

 

1. 1. 懒加载的原理

懒加载的使用是，没有进入相关可视区域内的图片呢，我们的img的src并不是这个图片的真正的url，它可能只是一个img标签的占位符。它真正的url被存放在这么一个img标签上的dataUrl上面。因为这个地址没有放在src上，所以不会造成向web服务端去请求的这么一个操作。当我们的图片在通过我们的js逻辑（可能是监听我们的scroll事件），当我们的scroll事件触发到这个图片，已经进入到我们的可是区域之后呢，我们将这个img标签上的dataUrl 地址给放置到我们的src上面，这个时候呢，我们的img src的变化就会触发我们资源的请求

 

 

 

 

1. 预加载

3.1预加载的优点