可用于优化 CSS 图片加载的常见技术_@jie

总结：

CSSSprite 减少对服务器请求

SVGSprite 体积小，矢量

Iconfont 体积小，矢量，集成度高

Base64 减少对服务器请求

优化图片加载的方法：

1、图片懒加载 在页面上的未可视区域可以添加一个滚动条事件，判断图片位置到浏览器顶端的距离和到页面低端的距离，如果前者小于后者，优先加载。

2、如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

3、如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont等技术。

4、如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

5、如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

如果是css图片，以下为主要技术的介绍：

CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

优点：

1.利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

2