160

I would like to try the CSS Sprite technique to load a few thumbnails as a single image. So I need to "merge" a few thumbnails in a single file offline in the server.

Suppose I have 10 thumbnails of the same size. How would you suggest I "merge" them from Linux command line?

Michael
  • 41,026
  • 70
  • 193
  • 341

4 Answers4

316

You can also try ImageMagick which is great for creating CSS sprites. Some tutorial about it here.

Example (vertical sprite):

convert image1.png image2.png image3.png -append result/result-sprite.png

Example (horizontal sprite):

convert image1.png image2.png image3.png +append result/result-sprite.png
keul
  • 7,673
  • 20
  • 45
Petr Mensik
  • 26,874
  • 17
  • 90
  • 115
  • 52
    Note: This will generate a vertical sprite, for horizontal sprite use `+append` instead of `-append`. – Chango Dec 11 '13 at 22:16
  • 23
    If you are lazy, `convert -append *.png out.png ` – Chillar Anand Dec 29 '16 at 07:15
  • 2
    This works, but for huge files takes a lot of time. IS there way to fast compositing? – Vlad Tsepelev May 19 '17 at 11:56
  • 1
    @VladTsepelev Concatinating lots of PNGs means to decode them (to a pixmap) for the operation and finally encode them again. If you want to extend an existing sprite very often, then maybe keeping the decoded pixmap versions can speed up things. See my answer for doing it using the PNM tools to achieve this operation. But of course the pixmap versions are way larger than the PNGs, so expect to use more storage. – Alfe Jul 23 '18 at 08:42
  • 2
    It says: ´convert-im6.q16: width or height exceeds limit `ktwo201121817-c102_lpd-targ.fits_autoaper.png' @ error/cache.c/OpenPixelCache/3839.´ – zabop Oct 10 '18 at 08:35
  • What if one image has a different width ? It goes to the left and the rest is filled with WHITE, how to change the position and background color ? – Robert Vanden Eynde Dec 22 '18 at 23:17
  • @zabop changing the width and height limit in `/etc/ImageMagick-6/policy.xml` to something like 128KB worked for me with the PNG file format. I found it here: https://www.guyrutenberg.com/tag/imagemagick/ – baptx Sep 06 '20 at 20:30
  • How do I control the size of the images? One is 10x bigger than the other. – Bryce Guinta Sep 16 '20 at 19:48
  • 1
    On Windows, it would be `$ magick.exe convert *.png -append o.png` – James T. Dec 10 '21 at 09:12
40

You can also use GraphicsMagick, a lighter and faster fork of ImageMagick:

gm convert image1.png image2.png -append combined.png

A simple time comparison of merging 12 images:

time convert image{1..12}.jpg -append test.jpg

real    0m3.178s
user    0m3.850s
sys     0m0.376s

time gm convert image{1..12}.jpg -append test.jpg

real    0m1.912s
user    0m2.198s
sys     0m0.766s

GraphicsMagick is almost twice as fast as ImageMagick.

tjanez
  • 2,175
  • 1
  • 21
  • 14
13

Use the pnmcat of the netpbm-package.

You probably have to convert your input files to and fro for using it:

pnmcat -lr <(pngtopnm 1.png) <(pngtopnm 2.png) | pnmtopng > all.png

EDIT: As user Hashbrown pointed out in a comment, this might have trouble with different sizes and/or transparency in the PNGs. To circumvent that he came up with this solution (just copying it here because the Q is closed and new answers cannot be added):

pnmcat -jleft -tb \
    <(pngtopnm image139.png) \
    <(pngtopnm image73.png) \
| pnmtopng \
    -alpha <(pnmcat -black -jleft -tb \
        <(pngtopnm -alpha image139.png) \
        <(pngtopnm -alpha image73.png) \
    ) \
>test.png

I didn't test that solution, though.

Alfe
  • 56,346
  • 20
  • 107
  • 159
  • 1
    `-tb` for vertical sprites, and use `-jtop` (or `-jleft` for `-tb`) to align different sized sprites to the axis (the default is centre!). If they are the same size I wouldnt use `pnmcat`, but [`pnmundice`](https://linux.die.net/man/1/pamundice) as it supports PAM (and thus transparency). However, if you have transparency in your input pngs &/or want the leftover space between not-the-same-size images to be transparent you'll need to use [`pnmcat` like this](https://gist.github.com/Hashbrown777/0020897274d9dbebe717437efb2ff6e5) (I cant make my own answer since the question was closed) – Hashbrown Aug 05 '21 at 04:30
  • 1
    I like this answer; `pnmcat|pnmtopng` makes much smaller filesizes than ` convert` – Hashbrown Aug 05 '21 at 04:36
  • 1
    @Hashbrown Great additions! I took the liberty to copy your code into my answer since new answers cannot be added anymore (which is weird, btw). Yeah, it's a mess with all these pnm-tools, some of them supporting pam, some not etc. – Alfe Aug 06 '21 at 01:38
5

If you prefer to merge the pictures from left to right, use the following command:

convert image{1..0}.png +append result/result-sprite.png

Note the +append instead of -append.

abu_bua
  • 1,361
  • 17
  • 25