如果做手机H5图片用多了好么

Question

因为设计的时候用了很多元素的 ，导致代码敲不出来，所以用了大量图片，但是在手机上有很多图片被压缩了，比如有的圆啊里面的文字啊，有什么好的解决办法么？

Answer 1

关于图片的优化，我提几点

1.base64编码图片替换url图片

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

2.图片压缩

对于整个网站来说，图片是最占流量的资源之一，能不使用就不适用，图标可是使用base64编码，字体图标代替，SVG等来代替，使用就要选择最合适的格式，合适的尺寸，然后压缩--这里推荐腾讯推出的智图。
PS：过度压缩图片大小影响图片显示效果，可能会使得图片变得模糊，一般来说，品质在60左右就差不多了！

3.图片懒加载

首屏加载的快慢，直接影响用户的体验，建议将非首屏的图片资源放到用户需要时才加载。这样可以大大优化首屏加载，减少首屏加载所需要的时间！
ps：懒加载要使用js频繁操作dom，期间会导致大量重绘渲染，影响性能。

4.img还是background

一定要用图片的时候，有两种展示方式，一种是以图片标签显示，一种是以背景图片显示！下面写了这两者的区别。
img:html中的标签img是网页结构的一部分会在加载结构的过程中和其他标签一起加载。
background：以css背景图存在的图片background会等到结构加载完成（网页的内容全部显示以后）才开始加载
也就是说，网页会先加载标签img的内容，再加载背景图片background引用的图片。引入一张图片，那么在这个图片加载完成之前，img后的内容不会显示。而用background来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，网页内容能正常浏览，但是看不到背景图片。至于这两种，大家按照习惯，需求等权重因素选择！

Answer 2

一般都做个加载队列，搞个遮罩先覆盖屏幕，图片加载完再移除遮罩

Answer 3

是否考虑使用svg格式的图片呢？

能不用图片的地方就不用，真的要用，小图标什么建议使用svg

Answer 4

对加载速度肯定会有影响，但是可以采用技术手段来进行。比如压缩图片大小，懒加载，雪碧图。能用css写的尽量用css来实现。

Answer 5

小图标可以用字体图标，图片可以用这个网站压缩https://tinypng.com/

Answer 6

不管什么页面，图片用多了肯定影响加载速率，网页中的图标可以考虑用雪碧图。

Answer 7

明显不好，多用svg的，而且要懒加载