Css Sprites图片整合应用详解(一)

Css Sprites图片整合应用详解(一)

                                                                                               
                    说到Css Sprites，其实就是我上一品文章中谈到的css中把所有背景图都放在一张图片上，但是现在还没有一个很官方的译名，网上有很多叫法，为了好记些，这里就叫Css拼图或css图片整合技术。
Css Sprites是一个比较早的技术了，最初应用在导航条上比较多，比如要实现默认情况下和鼠标悬停在菜单上显示不同背景的效果，可以在a:link和a:hover定义不同的背景图片，为了使这种悬停效果显示更流畅，图片加载更快，将相应的图片整合在一张，这便是Css Sprites的一种应用。
现在讲Css Sprites的优势，Css Sprites提升页面性能基本可以从三个方面体现：
1、减少http请求数，这一点应该可以得到大家的认可；
2、减少整个图片的大小，查看每张图片的属性，我们都可以看到有大小和占用空间两个不同的值，如果将多张图片合并到一张大图中，那大图的大小和占用空间是远远小于所有小图加起来的大小的，具体实例可查看崔凯的文章《CSS Sprites 图片整合技术》有详细介绍；
3、减少css文件的体积，这一点我会在接下来详细介绍。
Css Sprites虽然有以上的优点，但也不是彻底完美的，其劣势就是使项目维护成本的增加，这主要表现在三个方面：
1、图片的拼合、摆放需要更多的时间。之前的单张小图不会存在这个问题，但现在如果要将多张小图拼合在一起，就需要考虑各图摆放的位置，每个小图的应用时候会对其周围的其他图片造成影响，这些都得花时间来考虑；
2、读取图片位置的计算。在写css时，每应用到大图中的某一小图时，就得量取一次该图的纵横位置，而且必须要绝对精确，这是很费时的；
3、后期图片的增加和删除。在项目后期维护中，有些页面可能会经常改动，那大图中相应的图片就得进行相应的调整，有时候可能还会遇到迁一发而动全身的麻烦。
毋庸置疑，Css Sprites的应用优势还是很大的，为了性能，其他的也只能想办法解决。接下来就谈下我一般对Css Sprites的操作方法。

Css Sprites图片整合应用详解(二)

                                                                                               
                    </p>1、整合图片的分类。有些朋友可能会将所有能整合的图片都放在同一张图片上，这样的方法或许更适合一些不是很大的页面，如果要完成的页面有很多，有很多的频道，那我会选择将整合的图片进行分类。
第一类是背景平铺类。如果是高度固定的水平平铺，我会将所有的图片都放在一个宽为10px、高度调整的的文件中，使每个单独背景都宽为10px，各自之间留有适当间距。至于选择宽为10px是为了避免repeat过多造成的性能浪费而选的一个中间值，这个可根据实际情况而定，这样就形成一个行为10x∞（无穷高）的文件；相应的如果是宽带固定、垂直平铺的文件，则放在一个∞（无穷宽）x10px的文件中。
<p>

PS：在读取各背景的时候，可以使用一个小技巧，就是在该图片下新建一层，用深色背景填充，这样查看各背景就一目了然，完成后在去掉该背景保存即可。
第二类是Icon、Button等图片。这类图片一般都是可以固定宽高的，所以可以将同类的图片有规律的列在一起，方便其位置的计算。但对于内容左侧修饰类的Icon图片，最好是统一居左纵向排列，留有适当的间距，这样更加适应不同的内容的变化。
<p>

Ps：处理这类图片时，可以将PS中的网格参考线选取，这样可以更方便的摆放图片。
第三类是一些特殊图片的处理。像高度不确定的平铺类背景、始终居中或居右的图片、列表类内容下的平铺虚线等待这些比较特殊的图片，一定要小心处理，我的原则是安全性第一，然后再能优化则更好，是在不行，可以单独分类拼合。比如不不固定宽度的圆角导航效果，将相应的图片单独拼合在一起也很方便，不是说必须要把所有的图片都拼在一起的。
<p><p>

Css Sprites图片整合应用详解(三)

                                                                                               
                    </p>2、图片的存储与格式。一般来说，我会将所有平铺背景类的图片存储为.jpg格式，品质方面可以适当调整，因为.jpg格式显示的色彩比较饱和，不至于是背景图片产生很明显的变化；其他Icon、Button类图片则最好存储为.gif或者png-8的，因为这两种格式不会计算图片之间空白部分的大小；而且经常有圆角、渐变类的效果需要半透明来支持，所以这两种格式最适合。
这里要小小鄙视下自己了，因为之前为了保险，几乎每次都是将.gif或者.png-8的图片存为256色的；会上，有朋友提到128色即可保证图片的品质，这样又可以减小图片的大小。
这里需要注意图片的大小。我们的要求：除特殊图片外，每张图片不超过30KB。
3、图片在Css中的应用。我们都知道在Css中通过读取background-position读取合并图片的位置来应用每一个小图片，在读取中，我接触的有三种方法：
第一种、每应用到大图片就读取一次图片的url、repeat、position。这样虽然在服务器端可以认为是一次请求，但无疑大大的增加的了css的体积，尤其是当图片的ur是绝对路径时更是明显。这种方法只在初期应用Css Sprites时可用，不推荐长期使用。
第二种、定义一个类来引用图片的url和repeat，然后在用到position样式的标签中增加一个引用的类。例如：

• .bodyBg {background-image:url(images/all_bg.jpg); background-repeat:repeat-x;}
  
• .bodyIcon {background-image:url(images/all_icon.gif); background-repeat:no-repeat;}
  

• <h2 class="contentTiele bodyBg">心得体会</h2>
  

第三种、将所有应用图片position的样式统一定义一个url和repeat，这样在标签class中也不用增加统一定义的类。例如：

• .wpnavi .current,.commentNavi .current {background:url(images/all_bg.jpg) repeat-x;}
  

<p>相对来说，第三种方法是最合适的，不过可以根据实情情况来应用，方法不是唯一的。

Css Sprites图片整合应用详解(四)

                                                                                               
                    </p>还有大家讨论中讲到的图片缓存、图片预加载、首页收屏加载、CSS样式结构读取的问题，无不从各方面围绕Css Sprites展开话题。如果是任何的一个人，未免会考虑到这么多的问题，这对每个人来说都是一种知识面的扩展。
简单介绍一下 CSS Sprites 的优点：
当用户往U盘中拷200张图片，会等很久。但是如果弄成一个文件，再拷贝就会快很多。
CSS Sprites 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。

• 首先将小图片整合到一张大的图片上
  
• 然后根据具体图标在大图上的位置，给背景定位。background-position:-8px -95px;
  

</p>