Last updated: September 18, 2024

<span aria-hidden="true" id="introducing-the-imagemerge-robot-for-spritesheets"></span>

# Introducing the /image/merge Robot for spritesheets

![Joseph Grabski](/assets/images/teammates/joseph2.png?dpl=dpl_6nhQNS5wkVkPZWuKMzXcWrAHNJL5)

**Joseph Grabski**

Content Lead · Rochester, United Kingdom · Show bio

[](https://x.com/joe%5Fgrabski)[](https://github.com/Missing-Tech)

It was only recently that we released our[/file/hash Robot](/blog/2022/06/announce-file-hash.md), and it's already time for us to announce the release of our next Robot -[/image/merge](/docs/robots/image-merge.md).

As you may have already guessed this Robot will take several images provided to it, and well... merges them. It'll output a single sprite sheet with all of your input images in an either horizontal or vertical line.

Let's take a closer look 🔎

![/image/merge Robot](/_next/static/immutable/media/opengraph-image.04gwlz-ab7-2t.png)

<span aria-hidden="true" id="creating-a-template"></span>

## Creating a Template

The [/image/merge](/docs/robots/image-merge.md) Robot pairs great with[/image/resize](/docs/robots/image-resize.md). We'll be taking advantage of this in ourTemplate below, to resize all of our images to the same dimensions to keep our spritesheet uniform.

Inside of our merge Step, we use the `bundle_steps` parameter to process all of our resized images in one batch. We'll also use the `border` parameter to put a small amount of padding between each of our images.

```json
{
  "steps": {
    "resize": {
      "use": ":original",
      "robot": "/image/resize",
      "height": "500",
      "width": "750",
      "resize_strategy": "fillcrop"
    },
    "merge": {
      "use": {
        "steps": ["resize"],
        "bundle_steps": true
      },
      "border": 10,
      "direction": "horizontal",
      "format": "png",
      "robot": "/image/merge"
    }
  }
}

```

After feeding it a few stock images, we end up with this result. It's really as easy as that.

![Several stock images in a horizontal line](/_next/static/immutable/media/2022-07-merged-image.2fl033ylc2-q6.png)

<span aria-hidden="true" id="thats-all-folks"></span>

## That's all folks!

Well, this is the end of our brief glimpse into the [/image/merge](/docs/robots/image-merge.md) Robot today. We'd love to see how you incorporate this into your workflow, and we'd be interested to hear your feedback on it!

[#image-merge-robot](/blog/tags/image-merge-robot.md)[#image-processing-service](/blog/tags/image-processing-service.md)[#walkthrough](/blog/tags/walkthrough.md)[#image-resize-robot](/blog/tags/image-resize-robot.md)

### 👩‍💻 Join 20k+ developers

Sign up for our [monthly newsletter](/newsletters.md) to receive direct links to 3 exclusive tech — and 2 product updates. No less, no more.

Your email:

Get access

## File uploading and encoding. Made simple.

Transloadit streamlines file handling for developers, trusted by brands like Coursera and The New York Times. We’re known for a reliable API, top-notch support, and a strong commitment to open source, with projects like [Uppy⁠](https://uppy.io) and [Tus⁠](https://tus.io) setting standards in file processing.

[Sign up](/c/)[Book a Demo](https://survey.typeform.com/to/kRg47Xi5)

No credit card needed · 5 GB included in the free plan

Cancel anytime