1.使用雪碧图
在开发中常常会使用到很多的小图标或者静态图，就例如下面的这样：
一方面使用雪碧图来减少HTTP请求的数量，因为每张图片都是一个资源，都会走一次HTTP请求。另一个作用就是提前加载好需要用到的图片，以免切换图片或者小图标时出现的闪烁。 使用雪碧图的一般会采用background-position属性来进行图片位置的确定。
2.使用图片裁切或者对图片进行压缩
对于页面使用到的图片，在不影响产品效果的情况下可以对图进行压缩，然后上传到服务器。也可以利用现有的云服务器，比如七牛云/阿里云，提供了对图片的动态裁剪，只需要在路径加入相应的动态参数，比如：http://7xkv1q.com1.z0.glb.clouddn.com/grape.jpg?imageView2/1/w/200/h/200
3.使用图片懒加载
懒加载的原理是只渲染可视区域的图片，通过data-xxx自定义属性，将图片的src提前保存，待图片进入可视区域后，将自定义属性的值赋值给相应img的src。
可以用Intersection Observer实现是否进入可视区域的判断。
4.使用字体图标库
使用小图标时，可以使用字体图标，字体图标库很多，常用的就是阿里的字体图标库
阿里字体图标库使用的方式有很多种，自行学习。
字体图标的优点：
-
轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了 http 请求
-
灵活性：可以随意的改变颜色、产生阴影、透明效果、旋转等
-
兼容性：几乎支持所有的浏览器，请放心使用
5.适当使用SVG
svg的优势：
1．任意放缩：用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。
2．文本独立：SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。
3．较小文件：总体来讲，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下载也很快。
4．超强显示效果：SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨力和打印分辨力。
5．超级颜色控制：SVG图像提供一个1 600万种颜色的调色板，支持ICC颜色描述文件标准、RGB、线X填充、渐变和蒙版。
注意：不一定是SVG就一定比png/jpeg格式性能好，因为SVG需要渲染每个像素点，以及像素点的位置。太过复杂的SVG也会远超一张png图片。
6.图片转Base64
将小图片转换为 base64 编码字符串，并写入 HTML 或者 CSS 中，减少 http 请求
转 base64 格式的优缺点：
-
它处理的往往是非常小的图片，因为 Base64 编码后，图片大小会膨胀为原文件的 4/3，如果对大图也使用Base64编码，后者的体积会明显增加，即便减少了 http 请求，也无法弥补这庞大的体积带来的性能开销，得不偿失
-
在传输非常小的图片的时候，Base64 带来的文件体积膨胀、以及浏览器解析 Base64 的时间开销，与它节省掉的http 请求开销相比，可以忽略不计，这时候才能真正体现出它在性能方面的优势
