网站性能优化之图片整合？

网站性能优化之图片整合？

1.图片整合技术概念：

CSS Sprites（雪碧图或css精灵或滑动门技术），是网页图片处理的一种方式，它允许你 将一个页面涉及到的所有零星图都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅的慢慢显示出来了。

2.原理：

将许多的小图片整合到一张大图中，利用css中的背景图background-image属性，background-position属性定位某个图片的位置，来达到在大图片中引用某个部位的小图片的效果。

3.优点：

减少了对服务器的请求次数，减轻了对服务器的压力

提高了网页的加载速度

减少了图片的体积

达到了网站性能的优化

 

背景图和位置设置讲解:

首先在父容器中引入背景图如background-image：url( img/all.png) no-repeat;然后在单个标签内通过position属性来引入需要的小背景图。

距离计算的原理是从背景图的左上角移动到需要的单个背景图的左上角坐标，所走的路程x，y轴就是position（x，y）的设置。第一个参数是水平，第二个参数是垂直方向。

注意：容器的原点（0，0）和背景图的原点（0，0）是一一对应的关系或重合的关系。要找到小图标就要在容器里移动大背景图直到要找的小图标刚好出现在容器需要出现的区域。大背景图所走的坐标就是position的xy轴设置。如把小图标a插入到容器里，移动方式为背景图x轴向右，然后背景图y轴向下。把小图标b插入到容器里，移动方式为x轴向右，y轴向上。注：这里的坐标都是相对

大背景图所走的坐标。

？容器的大小是否不能超过可容纳两个小图标的大小？容器的大小是否与单个小图标的最大长宽有关？