How to concatenate icons into a single image with ImageMagick?

Question

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?

Not ImageMagick, but here are instructions on how to do this in Python using the Python Image Library: http://29a.ch/2009/5/14/concatenating-images-using-python — Ashley Davis, Jun 17 '12 at 22:51
Use the 'montage' tool: [here are some instructions](http://www.imagemagick.org/script/montage.php) — Ludvig A. Norin, Sep 17 '08 at 23:38

score 60 · Answer 1 · edited Dec 16 '13 at 08:09

60

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)

edited Dec 16 '13 at 08:09

circuitry

1,169
16
16

answered May 18 '12 at 15:00

Simon Ernst

1,430
9
10

Well I didn't test, but it seems that -background None will allow transparent background (see http://www.imagemagick.org/Usage/montage/#bg ) – AkiRoss Feb 09 '13 at 11:32
There is a problem that it seems to just append the pictures in random order despite I named them from 1.png to 15.png. Do you know how to make imagemagick append the pictures in a specified order? – xji Jan 06 '15 at 03:52
@AnonJ, your shell might be expanding `*` to the list of filenames based on lexicographic ordering - that's what zsh is doing for me, at least. – Jonathan Chan Jan 08 '15 at 01:52
@JonathanChan That's true. I forgot that numbers like 15 doesn't go well with such ordering. Anyways I ended up using some gem(compass-rails in this case) for sprite generation and didn't do it manually. – xji Jan 08 '15 at 03:14
3

This is amazing. Is there a way to specify how many rows per columns? (or have columns, for that matter :P) – NiCk Newman Oct 07 '16 at 22:57
This should be the accepted answer, montage uses the size of one frame to set all the frames inside in the resulting image. While 'convert append' appends one frame after the other making it as wide or tall as needed. – LightMan Jul 25 '18 at 16:41

score 31 · Accepted Answer · edited Feb 18 '19 at 07:20

31

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:
_{(source: davr.org)}

edited Feb 18 '19 at 07:20

Glorfindel

21,988
13
81
109

answered Sep 17 '08 at 23:37

davr

18,877
17
76
99

Oleksandr M. · Answer 3 · 2011-11-18T19:20:35.673

25

You are looking for:

montage -background transparent -geometry +4+4 *.png sprite.gif

edited Nov 18 '11 at 19:20

answered Nov 18 '11 at 18:57

Oleksandr M.

649
8
7

printminion · Answer 4 · 2016-10-22T20:05:13.143

5

I like this script for automatical sprite/css generation. "Building CSS sprites with Bash & Imagemagick"

article copy in Waybackmashine https://web.archive.org/web/20150529041037/http://jaymz.eu/blog/2010/05/building-css-sprites-with-bash-imagemagick
script copy http://blog.kupriyanov.com/2011/01/solvedbuilding-css-sprites-with-bash.html

edited Oct 22 '16 at 20:05

answered Sep 15 '10 at 17:49

printminion

2,988
1
26
30

3

@printminion That link is dead, too! – user2441511 Oct 14 '16 at 19:14

How to concatenate icons into a single image with ImageMagick?

4 Answers4

Linked