点击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

这里谈一下移动页面开发时，几个图片优化的点。

一、base64编码图片替换URL图片

能不发请求的就不要发，对于一些小图标（一般是8K以下的图标都转换成base64）之类的，可以将图片用base64，来减少请求的发送，尤其是在移动端，请求显得特别珍贵，在网速不好的情况下，请求就是珍贵中的珍贵。

二、图片压缩

对于整个网站来说，图片是最占流量的资源之一，能不使用就不使用，图标可以使用base64编码，字体图标代替，SVG等来代替，使用就要选择最合适的格式，合适的尺寸，然后压缩（这里推荐腾讯推出的智图）。

PS：过度压缩图片大小，图片会失帧，可以会使得图片变得模糊，影响图片显示效果，一般来说，品质在60左右就差不多了！

三、图片懒加载

首屏加载的快慢，直接影响用户的体验，建议将非首屏的图片资源放到用户需要用时才加载。这样可以大大优化首屏加载，减少首屏载所需要的时间！

PS：懒加载需要使用JS频繁操作DOM，期间会导致大量重绘渲染，影响性能。

四、img还是background

图片的展示方式有两种，一种是以图片标签显示，一种是以背景图片显示！接下来简略看一下这两者的区别。

img：html中的标签img是网页结构的一部分，会在加载结构的过程中和其他标签一起加载。

background：以CSS背景图存在的图片background会等到结构加载完成（网页的内容全部显示以后）才开始加载。

也就是说，网页会先加载标签img的内容，再加载背景图片background引用的图片。引入一张图片，那么在这个图片加载完成之前，img后的内容不会显示。而用background来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，网页内容能正常浏览，但是看不到背景图片。至于这两种，大家按照习惯，需求等权重因素选择！