中文說明請往下捲。

CSS sprites is a CSS technique that concentrate small images into a large one, in order to cut short http request required. I made this tool to ease the process of making such image.

While there are many other tools available on the net, this one uses <canvas> to make the sprites image. No server-side script involved; you don’t have to upload images to my server. The only downside is that I didn’t aware only Firefox provide the “Save As…” option on context menu; unless you use Firefox, you won’t be able to save the work you made. And no, canvas2image won’t work due to security constraint.

Please give it a try and tell me if you have any feed back: Canvas: CSS Sprites Generator.

CSS sprite 是把很多小圖示/片組合起來，在畫面呈現時再用 CSS 切開的技巧。好處是這樣可以大大的減少需要的 HTTP Request 次數與傳輸量。要組合那張圖片，網路上有很多工具，不過我用了瀏覽器的 <canvas> 功能寫了一個：Canvas: CSS Sprites Generator。

用 canvas 的好處是，你不用把檔案傳到我的機器上，所有的合成都仰賴瀏覽器。倒是寫完之後才發現在 canvas 上面按右鍵只有 Firefox 可以選「另存新檔…」呀，其他瀏覽器都不行；真是辛酸。

總之玩玩吧，希望對你有幫助。有什麼意見歡迎留言。

更新：喔喔喔，加上中文版了！