• 使用SVG矢量图片
  

前面说的几种方式，使用的都是位图，或者叫点阵图，这里所说的矢量图，指的是一种新的svg图片格式，矢量图片相对于位图来说，容量更小，在显示上图像元素的边缘光滑，不会出现锯齿，矢量图不足的地方是，它没有位图的色彩丰富，所以在使用单色的图标图片的时候，使用svg，不仅可以提高性能，而且在显示效果上也非常好，下面是位图和矢量图放大时的对比：

• 使用字体图标
  

所谓的字体图标，是指我们在网页上使用的一些单色的图标，可以把这些图标做成自定义的字体，这些图标就没必要用图片来做，直接用特殊字体就可以实现，网上有集成的字体图标库，我们可以下载使用，但是这些字体图标库集成了许多不需要的图标，会增加下载的容量，建议使用阿里巴巴的字体图标库，http://www.iconfont.cn/，在这个平台上，UI可以将项目中用到的图标按照特定格式上传，生成项目自定义的字体库，也就是说，字体库里面只包含项目要用的图标字体，这样就可以节约字体库的容量，提高性能，同时也可以方便前端的开发。

• 设置图片文件的缓存
  

设置图片的缓存，也就是设置图片文件在客户端缓存的时间，在多少时间期限之内，让用户的请求直接使用本地的缓存图片，而不用去服务器下载，这样可以极大地提高前端的性能。设置文件的缓存有多种方式，可以结合几种方式来设置。这种方法不仅仅适用于图片文件，还适用于其他可以缓存的文件。

• 使用静态资源服务器
  

所谓的静态资源服务器，就是专门存储静态资源的服务器，比如说图片资源，将图片存储在这种服务器上，这些图片在页面请求时，不会额外地增加cookie等信息，节约网络传输的容量，静态资源服务器不仅仅适用于图片，还适用于其他的资源，比如公共的CSS样式，文档等等资源。

以上就是七种针对图片优化的方案，您可以根据项目的需要，选取特定的方案来对项目的图片进行优化，提高前端的新能。

• 使用SVG矢量图片
  

前面说的几种方式，使用的都是位图，或者叫点阵图，这里所说的矢量图，指的是一种新的svg图片格式，矢量图片相对于位图来说，容量更小，在显示上图像元素的边缘光滑，不会出现锯齿，矢量图不足的地方是，它没有位图的色彩丰富，所以在使用单色的图标图片的时候，使用svg，不仅可以提高性能，而且在显示效果上也非常好，下面是位图和矢量图放大时的对比：

• 使用字体图标
  

所谓的字体图标，是指我们在网页上使用的一些单色的图标，可以把这些图标做成自定义的字体，这些图标就没必要用图片来做，直接用特殊字体就可以实现，网上有集成的字体图标库，我们可以下载使用，但是这些字体图标库集成了许多不需要的图标，会增加下载的容量，建议使用阿里巴巴的字体图标库，http://www.iconfont.cn/，在这个平台上，UI可以将项目中用到的图标按照特定格式上传，生成项目自定义的字体库，也就是说，字体库里面只包含项目要用的图标字体，这样就可以节约字体库的容量，提高性能，同时也可以方便前端的开发。

• 设置图片文件的缓存
  

设置图片的缓存，也就是设置图片文件在客户端缓存的时间，在多少时间期限之内，让用户的请求直接使用本地的缓存图片，而不用去服务器下载，这样可以极大地提高前端的性能。设置文件的缓存有多种方式，可以结合几种方式来设置。这种方法不仅仅适用于图片文件，还适用于其他可以缓存的文件。

• 使用静态资源服务器
  

所谓的静态资源服务器，就是专门存储静态资源的服务器，比如说图片资源，将图片存储在这种服务器上，这些图片在页面请求时，不会额外地增加cookie等信息，节约网络传输的容量，静态资源服务器不仅仅适用于图片，还适用于其他的资源，比如公共的CSS样式，文档等等资源。

以上就是七种针对图片优化的方案，您可以根据项目的需要，选取特定的方案来对项目的图片进行优化，提高前端的新能。