一、图片过大
判断用户的设备（主要用在移动端）、网络等，分别加载不同质量的图片（例如高端 iPhone wifi 情况下，就可以加载双倍高清图等，蜂窝网络下面，就加载个单倍或者有损压缩过的）。
或者先加载低质量的图片，让浏览者可以看到，然后再在后台加载更高清的，等加载完了，浏览者还在观看，就插入替换掉。或者先加载低质量小图片列表，然后让用户点击，触发类似 fancybox 的效果，弹窗出现大图片。或者利用资源预加载（三个 HTML5 不常见特性简介）当用户还没打开的时候，就开始加载。还有好多思路，后面想到再补充。
压缩，预加载，缓存，图床。
1.使用缓存
2.使用CDN加速
3.使用jq延迟加载图片, 用到那个 加载哪个.
4.加大服务器宽带
5.检查服务器硬盘读取速度.
二、图片太多
1.将图片服务和应用服务分离
对于服务器来说,图片始终是最消耗系统资源的,如果将图片服务和应用服务放在同一服务器的话,应用服务器很容易会因为图片的高I/O负载而崩溃,所以当网站存在大量的图片读写操作时,建议使用图片服务器。
另外浏览器在同一时间对同一域名下的资源的并发请求数目是有限制的,一般在2-6之间,超过限制数目的请求就会被阻塞。
把图片服务器与应用服务器分开,图片服务器采用独立域名 ,css、js和图片就可以并发请求了
2.图片压缩
我们可以借助一些第三方软件来进行压缩,比如https://tinypng.com/,压缩后分辨率不变,肉眼看不失真
3.图片懒加载
图片懒加载,简单来说就是在页面渲染过程中,图片不会一次性全部加载,会在需要的时候加载,比如当滚动条滚动到某一个位置时触发事件加载图片,如下代码:
通过js将img标签的data-src属性赋值给src属性
4.css Sprites
CSS Sprites 技术早已不新鲜,就是将这些小icon合并成一张图片,只需要加载一次,每次通过background-position来控制显示icon,这样就可以节约大量请求,节约成本。
5.将图片压缩成base64格式来节约请求
将图片压缩成base64,随html或者css一起下载到浏览器,不需要额外的请求,这样就节约了请求.
我们知道图片在传输过程中是流传输,如果将图片转换成base64,实际上是变大了,并且浏览器在decode base64编码的图片时需要耗费很多时间的,所以如果我们选择此种方案的话,最好选择一些小图片,不然得不偿失,在webpack中可以设置最大多少byte的图片压缩成base64
针对decode base64编码的图片比较慢的问题,我们可以选择使用canvas来加速.当向canvas发出绘画命令时,浏览器直接将指令发到图形加速器而不需要开发者更多的干预,硬件图形加速器则以难以执行的运算速度实时绘画和渲染图形.因此,我们可以使用canvas来渲染base64编码后的图片
这里推荐一篇文章，感兴趣的同学可以看一下：《canvas图片懒加载》
