Css Sprite，有時也稱為雪碧圖、精靈圖，是每一個前端開都會遇到的問題，也是常見的小圖片加載優化手段。相信各位同學都清楚其原理，具體就不贅述了。

之前一直有動機利用html5實現一個合成雪碧圖的工具，方便小項目的快速開發，減少一些諸如開photoshop、fireworks等工具來合圖的機械勞動，最近終于抽出時間將構思實現。

• 在線使用地址：http://alloyteam.github.com/gopng
• github地址：https://github.com/AlloyTeam/gopng

Go!Png介紹：

目前實現的功能如下：

1. 支持圖片文件拖拽
2. 支持生成png圖片與css文件
3. 支持兩種自動排列的模式
4. 放大鏡功能
5. 磁力吸附對齊功能
6. 工作狀態導出功能，可以方便導出文件，在下一次操作通過拖放改文件來恢復工作狀態（包括圖片數據跟參數設置）
7. 支持Mac（Chrome） ：）

使用說明：

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

2.輸入類屬性設置與目標圖片、css文件生成，如下圖

3.生成的css文件是可以通過改變css模版來定制的

4.生成目標圖片、css后可以直接下載

5.工作狀態導出