I have a CSS spritesheet with equal-sized sprites. I want to add a 1-pixel margin to each sprite, and extend each sprite's outermost pixel into that margin -- basically a full bleed effect for each sprite. For example, if I started with the following spritesheet of four 8x8 sprites:

Spritesheet example, original

I would want to end up with this: (yellow rectangles added to call out the original sprite size)

Spritesheet example, after adding bleed margins

There are ways to add a blank margin between the sprites, but I've hunted through the documentation and I haven't seen a command to add a bleed margin like this.

I've thought about adding a blank margin around each sprite, and then compositing the result with itself at various offsets. But that won't work when some of the sprites are transparent, because it would add pixels inside the original sprite (making the bottom two sprites super-bold), and I only want to add extra pixels around the outside.

Now obviously I can take slices manually, and then -append/+append. For example, I could do this to add the horizontal bleed margins:

convert in.png[1x16+0+0] in.png[8x16+0+0] in.png[1x16+7+0]
        in.png[1x16+8+0] in.png[8x16+8+0] in.png[1x16+15+0]
        +append temp.png

And the same kind of thing again to add the vertical. The downside is, this requires me to know how many sprites there are, and add parameters for every row and every column; so if I want something I can reuse with different-sized spritesheets, I need to write a script that figures out the image dimensions and generates the command line.

Is there a simpler way to add a bleed margin between sprites -- preferably one that doesn't require me to write a script to generate convert's command-line parameters programmatically?

1 Answer 1


I had a very similar problem in that I wanted to add bleed pixels around my image for printing purposes. My problem was simpler because I just wanted to do it to the whole image, not tiled images. Anyway, here it is:

Starting with this 32x32 pixel image: enter image description here to this 70x70 version: enter image description here

convert tree.gif  -set option:distort:viewport 70x70-19-19 \
      -virtual-pixel Edge -filter point -distort SRT 0 \
      +repage  virtual_edge.gif

You can see it basically adds 19 pixels around the edge (because ((70-32) / 2) = 19 )

I think this should get you most of the way towards your solution. More details here.

  • 1
    That's perfect! I could use something like -crop 32x32 to split my image into tiles, then your commands, and finally -append or +append them back into one image (if I was okay ending up with all my tiles in a single row or column). Or if I wanted to keep the original layout, I could split my image into columns, add bleed pixels between the columns, then join them back up and repeat for rows. Either way, this does exactly what I was looking for. Thanks!
    – Joe White
    Mar 13, 2015 at 2:42

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .