ImageMagickでCSS Sprite用の画像を作る。

フリーのアイコンを使ってWebサイトを作るとします。感謝しながらアイコンを使っていますが、残念ながら、一つ一つ画像が分かれている場合もあります。別にそのまま使えばいいのですが、サーバーの負荷やクライアント側での速度を考えるとCSSスプライトでやりたいですよね。

自分はプログラマーですし、PCにフォトショップなんて入っていませんし、大体、たくさんのアイコンを一つの画像になんてめんどくさくてやってられないです。当然、デザイナーの方も嫌でしょう。やることはアイコンを並べるだけで単純かつ繰り返しなので、こういう作業こそプログラマーの出番ですよね。
そこで、ImageMagickを使って アイコンを結合します。以下の様なコマンドをコマンドプロンプトやbatファイルで実行して、appendしていけば画像の右にどんどん追加されていきます。[0]がついていますが、つけなくてもいいです。これがついていると元画像がアニメーションgifだった場合に1枚目の画像をappendするようになります。

"C:\Program Files\ImageMagick-6.7.6-Q16\convert.exe" +append icon1.gif[0] cloud.gif[0] iconList.gif[0]
"C:\Program Files\ImageMagick-6.7.6-Q16\convert.exe" +append iconList.gif[0] icon2.gif[0] iconList.gif[0]
"C:\Program Files\ImageMagick-6.7.6-Q16\convert.exe" +append iconList.gif[0] icon3.gif[0] iconList.gif[0]
"C:\Program Files\ImageMagick-6.7.6-Q16\convert.exe" +append iconList.gif[0] icon4.gif[0] iconList.gif[0]
"C:\Program Files\ImageMagick-6.7.6-Q16\convert.exe" +append iconList.gif[0] icon5.gif[0] iconList.gif[0]
"C:\Program Files\ImageMagick-6.7.6-Q16\convert.exe" +append iconList.gif[0] icon6.gif[0] iconList.gif[0]
"C:\Program Files\ImageMagick-6.7.6-Q16\convert.exe" +append iconList.gif[0] icon7.gif[0] iconList.gif[0]