1：图片占用资源比例大，图片对设备的清晰度有一定的依赖，且无法监听
相反css效果和css动画可以弥补
2:css-sprites:优化图片大小：
合并地址：alloyteam.github.io/gopng/
把多个图片合并成一个，
然后导入资源，把多个图片地址换成一个，然后查看图片大小，之后设置background-size: 比例要求，如果是pc端可以是1:1直接赋值，如果是移动端那么就是一般是1:2缩小赋值，宽度一样，高度是n分之一的高度
然后在各个图片的样式中设置background-position: x y
x:指x轴移动，y是Y轴移动，只要移动y轴即可，具体移动距离查看合并地址png，或者自己算
其他工具比如fis3可以直接样式中设置合并
2：响应式动态图片加载：
需要一个默认图片，需要把屏幕分辨率的信息带给服务器，要用服务器返回给我们更优质的图片
3：新元素，部分浏览器支持
优点：根据屏幕大小，来决定加载什么图片
<picture>
<source srcset="small图片地址" media="(max-width: 768px)">
<source srcset="big图片地址" media="(min-width: 1000px)">
<source srcset="区间默认图片地址" alt="my default image">
</picture>
tips：单纯的想法: 创建新图像格式100K的文件里面包含各种版本的图片
