CSS Sprites在线合并图片并获取图片坐标

在为大家推荐这两个在线工具之前，先来对CSS Sprites做一个简单的梳理：

CSS Sprites(图片整合技术) 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。

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

图片优化：
一、对于非动画的GIF更建议使用PNG8因为它同样能做到一样的效果，而且能为你节省10%-30%的文件体积。
二、Photoshop相比起Fireworks，导出同等质量的PNG图片，体积会稍大。而Fireworks虽然做了相应压缩优化，但没有达到最优秀的压缩。
三、我所知的设计软件，对于PNG图片的处理都没做到最优秀的压缩，图片体积还有一定的压缩空间。可以尝试使用下面介绍的”图像优化工具” 做无失真的压缩优化。
四、图片体积及尺寸方面，建议体积保持在100K以内(较为符合国情最佳请求SIZE)，size为800px(最佳尺寸）。

图片切割最佳实践：
三、CSS Sprites图片中把颜色较近或相同的组合在一起可以降低颜色数，因为少色数的图片文件体积会相对的小。
四、size相同的CSS Sprites图片中留有较大空隙，某程度上多数情况会增大了体积，所以CSS Sprites的图片不要有空隙。
五、在size相同的CSS Sprites图片中，垂直排列的图片会比水平排列的文件体积要大。
六、在CSS Sprites图片中，水平排列的图片会比垂直排列的文件体积要大。
九、黄金切割位：在CSS Sprites图片的最右或左边为最灵活动位置最适宜摆放文本前的icon，因此不会受到其它CSS Sprites图片干预，也不需要预留一定的行宽。

---

好了，下面该说说它的制作方法，也是虫部落今天为大家重点推荐的一种在线生成途径。

CSS Sprites在线合并图片：www.chongbuluo.com/tool/spritegen.html
CSS Sprites在线获取图片坐标：www.spritecow.com    虫部落备份：www.chongbuluo.com/tool/spritecow.html

合并即是把你的零散的小图片素材上传并设置相应的参数后生成拼合的图像或者CSS代码；

坐标的获取也很方便，上传你制作好的拼合图，直接用光标圈选局部的小图片，就会在下面生成CSS代码：