Combine sprite pictures on Mac with Shortcuts

As discussed in our Deep Zoom post, Squarespace does not organize uploaded images into folders and imposes a 2500px width limit per image. When working with multiple sprite images for animations or 360-degree product photography, this limitation can seem restrictive. However, we can take advantage of Squarespace's resolution limit (up to 120 megapixels) by combining images vertically, allowing you to effectively upload an entire animation sequence as a single image.

There are many ways to accomplish this, but in this post, I will guide you through using Shortcuts for MacOS users.

Shortcuts is an automation utility available on iPhone, iPad, and Mac. It includes pre-built macros (called shortcuts) that help you automate various tasks.

Step-by-Step Guide

1. Download the Combine Images Shortcut

You can find the Combine Images shortcut through the Shortcuts app or via download links online.

• Navigate to Combine Images Shortcut

• Once on the website, click Get Shortcut.

Get shortcut

2. Add the Shortcut to MacOS

After downloading, the shortcut will open in the Shortcuts app. Here's how to install and modify it:

• Open the Shortcuts app

• Search for the Combine Images shortcut within the app.

• Double-click the shortcut, then select the Shortcut Details button on the right pane (In macOS Sonoma, it’s marked by an Info icon).

• In the Shortcut Details, check the boxes for:

  • Use as Quick Action

  • Finder (to enable the shortcut to be accessed through the Finder’s right-click menu).

3. Combine the Images

Now that the shortcut is installed and modified, you can start combining images. Here’s how:

• Navigate to the folder where the images you want to combine are located.

• Select the images, right-click, and choose Quick Actions > Combine Images.

Select images & Combine

• Select the order in which you want to combine the images. For most cases, choosing Chronological will work best. Hit Done.

Choose order

• When prompted for Image Spacing, enter 0 for no spacing between images, then click Done.

Set spacing

• Choose the style for combining the images. Available options include horizontally, vertically, and grid. For Squarespace use, especially for sprite images, choose Vertically.

Choose vertically style

• Once the process is done, you will see a preview window. Click on the Open with Preview button in this window.

Open preview

4. Save the Combined Image

To save the stitched image:

• In Preview, click File > Save, or use the shortcut Command + S.

• Provide a name for the file, choose the desired file format (PNG or JPG), and click Save.

Export stitched image

Use cases for combined Images

Now that your individual sprites have been merged into a single vertical spritesheet, it’s ready to be used in several ways, including:

• Enable Hi-Res Zoom on Lightbox Studio.

• Used in 360° product photo viewer.

• Use for on-scroll animations.

By combining images into one spritesheet, you can bypass many of Squarespace’s limitations and optimize your animation or product viewer to load smoothly and beautifully.