Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to concatenate icons into a single image with ImageMagick?

I want to use CSS sprites on a web site instead of separate image files, for a large collection of small icons that are all the same size. How can I concatenate (tile) them into one big image using ImageMagick?

like image 516
Peter Hilton Avatar asked Sep 17 '08 23:09

Peter Hilton


3 Answers

convert works much better than montage. It arranges images vertically or horizontally and keeps png transparency.

convert *.png -append sprites.png (append vertically)
convert *.png +append sprites.png (append horizontally)
like image 157
Simon Ernst Avatar answered Oct 22 '22 16:10

Simon Ernst


From the page you linked, 'montage' is the tool you want. It'll take a bunch of images and concatenate/tile them into a single output. Here's an example image I've made before using the tool: alt text
(source: davr.org)

like image 31
davr Avatar answered Oct 22 '22 15:10

davr


You are looking for:

montage -background transparent -geometry +4+4 *.png sprite.gif
like image 24
Alexander M. Avatar answered Oct 22 '22 16:10

Alexander M.