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
0for 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:
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.
