css精灵（雪碧图）

 css sprites是指把网页中的很多的小图片（很多图标文件）做成按规律排列的一张大图上，在显示的时候通过background-image、background-position显示图片特定部分达到和分散的一张张小图片一样的效果。

优点：

a.提高页面的下载速度：页面中的图片文件等外部文件都要单独下载，图片文件时另外进程来下载的，并且不同的浏览器会对一次下载图片的数量有所限制，要是页面图片比较多，这样就会不断要下载。

b：减少HTTP请求，提高网站性能，每个图片下载都是一次HTTP请求，而把每个小图片几种到一张图片上，这样只需要一个HTTP请求响应，在现在网速条件下不超过200K的图片，下载速度都是差不多的，下载一次之后无论是该页面还是站点其他页面使用包含在这张大图上的图片时就可以使用缓存，不会带来反复下载的开销，所以只有一个HTTP请求响应。

 c：省流量：因为HTTP请求响应会再客户端和服务器端交互HTTP报文，所以下载一个图片所用的流量不只是图片大小，每个HTTP报文会占用网络流量。

d：如果我们使用的图标内容是透明的，而边框是白色（和网站的背景颜色相同），我们可以通过简单的css来使整个网站的icon改变，这个在换theme的时候很贴心。

实现方法：

使用backgroung-position和background-img属性

转载来自：http://blog.csdn.net/zhi_Miss/article/details/50755715

HTML 5开发的在线雪碧图片合成工具

Css Sprite，有时也称为雪碧图、精灵图，是每一个前端开都会遇到的问题，也是常见的小图片加载优化手段。相信各位同学都清楚其原理，具体就不赘述了。

之前一直有动机利用html5实现一个合成雪碧图的工具，方便小项目的快速开发，减少一些诸如开photoshop、fireworks等工具来合图的机械劳动，最近终于抽出时间将构思实现。

在线使用：http://alloyteam.github.com/gopng

使用介绍：http://www.alloyteam.com/?p=1050

github地址：https://github.com/AlloyTeam/gopng

Go!Png介绍：

目前实现的功能如下：

支持图片文件拖拽；支持生成png图片与css文件；支持两种自动排列的模式；放大镜功能；磁力吸附对齐功能；工作状态导出功能，可以方便导出文件，在下一次操作通过拖放改文件来恢复工作状态（包括图片数据跟参数设置）；支持Mac（Chrome） ：）

使用说明：

1.拖拽图片小文件到操作区域，如下图：

2.输入类属性设置与目标图片、css文件生成，如下图

3.生成的css文件是可以通过改变css模版来定制的

使用的模版函数是John Resig的Micro-Templating，可以用的变量有：

x 图片的x坐标；y 图片的y坐标；w 图片的宽度；h 图片的高度；name 图片文件的名称（不带后缀）；absolute_path 绝对路径（自定义）；relative_path 相对路径（自定义）

x、y、w、h的解释如下图：

css模版的设置操作如下图：

4.生成目标图片、css后可以直接下载

点击download按钮即可完成下载：

5.工作状态导出

这个功能是可以将你目前的工作状态，包括图片的数据（图片、图片位置排列），参数设置（包括主页的参数设置与css模版设置），全部导出成一个文件，下次利用此文件便可复原工作状态。

导出如下图：

导入如下图：

即可复原：

原文链接：http://www.mhtml5.com/2012/06/5087.html

2.css雪碧图生成工具4.3更新

v3.0更新介绍地址：http://www.cnblogs.com/wang4517/p/4476758.html

v4.0更新介绍地址：http://www.cnblogs.com/wang4517/p/4493917.html

v4.1更新介绍地址：http://www.cnblogs.com/wang4517/p/4513711.html

v4.2更新介绍地址：http://www.cnblogs.com/wang4517/p/4516249.html

更新说明

此次更新主要针对与移动端的问题进行修改：

一、当选中为手机端时程序会将相邻图片的间距调整一个像素，避免在自适应缩放的时候出现不必要的麻烦（建议手机端的时候自己排布图片，以后直接打开.sprite文件编辑就是）

二、修改移动端bug，4.2版本的移动端是没适应的，所以在这个版本修复，并且自己测试也很好，写了个自适应的示例(http://www.cnblogs.com/wang4517/p/4528432.html)

下载地址

http://download.csdn.net/detail/wx247919365/8741243

Github地址

https://github.com/iwangx/sprite