Understanding Squarespace Image Delivery and Optimization
When it comes to managing images on Squarespace, there's a lot more than meets the eye. In this post, we'll dive into the mechanics behind Squarespace Image CDN and answer some common questions to help you get a better understanding of how your images are handled on the platform.
Squarespace image pipline
Storing Images on Squarespace Image CDN
One of the first things to know about Squarespace is that all images uploaded to the platform are not saved on the same domain as your website. Instead, they are stored on Squarespace's CDN, with image URLs always starting with images.squarespace-cdn.com.
This approach is designed to ensure that images are delivered to users as quickly as possible. By storing images on a network of servers distributed around the world, the nearest server to a user's location will be the one to serve up the image, ensuring fast delivery.
Note: If you want to quickly copy the image URL, use Asset library enhancer free plugin
Squarespace CDN URL Structure
Squarespace uses a distinct URL structure for serving images through its CDN. Here’s a breakdown:
https://images.squarespace-cdn.com/content/<website_id>/<image_id>/<filename>
website_id: The ID of your Squarespace website. For demo images, this ID originates from the source site.
image_id: Unique identifier of the image in the Squarespace system.
filename: The name of the uploaded file. Interestingly, this part is optional; you can serve the image without it.
Optimizing Image Delivery on Squarespace
Squarespace doesn't simply serve images as-is. There are specific requirements to follow:
Supported File Types: Only .jpg, .gif, and .png files are accepted. Files like .pdf, .psd, and .doc are not compatible.
Maximum File Size: The maximum file size for an image is 20 MB, with resolution upto 120MP. For optimal performance, aim to upload images that are 500 KB or less.
Tip: Next-gen image formats like WebP and AVIF are not supported for upload and delivery by default. However, I have developed a JavaScript solution that can facilitate this by using a third-party CDN. This means you don't have to convert and re-upload your Squarespace assets manually.
Images uploaded to Squarespace will be processed into seven different versions with varying widths, up to a maximum width of 2500 pixels. This allows for better delivery across different device sizes while maintaining image quality.
Visualization on generated image versions
Below are the generated variants of the original image: 12303 x 9740 JPG, 19.5 MB
| No. | Width | Height | File size | View image |
|---|---|---|---|---|
| 1 | 100 | 79 | 3.9kB | 🌐 View image |
| 2 | 300 | 238 | 21.6kB | 🌐 View image |
| 3 | 500 | 396 | 53.8kB | 🌐 View image |
| 4 | 750 | 594 | 113kB | 🌐 View image |
| 5 | 1000 | 792 | 197kB | 🌐 View image |
| 6 | 1500 | 1187 | 440kB | 🌐 View image |
| 7 | 2500 | 1979 | 1.2MB | 🌐 View image |
Example generated 7 variants
To access different variants of an image, you can use URL parameters to specify the desired width.
Format for Squarespace Image Variant:
https://images.squarespace-cdn.com/content/<website_id>/<image_id>/<filename>?format=<variant>
variant: Specifies the maximum width of the image. Accepted values are 100w, 300w, 500w, 750w, 1000w, 1500w, and 2500w, where "w" stands for width in pixels.
These optimizations, along with Squarespace's own delivery mechanism, are designed to ensure fast and responsive image delivery to users. But how fast?
Speed Tests with Squarespace Image CDN
To gauge the effectiveness of Squarespace's image delivery, I conducted several tests using Uptrends.com:
First test results URL
Second test results URL
Third test results URL
These tests focused on a target image URL with a size of 984KB and a resolution of 2500 x 1669 pixels.
The aggregated results are summarized in the following chart. Note that results from China, specifically Beijing and Hong Kong, were omitted due to poor performance and timeout issues. Detailed performance metrics for these locations can be viewed in the provided test result URLs.
These tests revealed that while major cities like Rome, New York, and Tokyo consistently experience fast image delivery times, there were notable inconsistencies in locations such as São Paulo and Auckland. Moreover, locations like Beijing and Hong Kong exhibited extremely poor performance, likely due to network constraints or server issues in those regions.
Squarespace image CDN speed test
All of the optimizations are to ensure the best experience to clients in term of speed and responsinvess. Though this serve most of the use cases beautifully, there are some known limitations:
Smaller devices are served smaller versions of images, which can result in blurriness when zooming, especially on mobile. This is, I guess, one of the main reasons why Squarespace's lightbox doesn't allow zooming on any device, as stated in their documentation.
Squarespace's CDN doesn't preserve folder structure. Once uploaded, images are served with a unique ID and their name in a flat structure. This makes it difficult to implement certain advanced features such as image sprite animations, deep zoom images, or 360-degree image sequences, as these typically require a naming convention for the images.
However, there is a workaround for this limitation by combining all sprite images into a single image with a maximum width of 2500px and let the height be as much as possible while still respecting the 120 MP resolution limit. Let’s look at this image, which contains 96 frames in a single image. I used it a scroll trigger animation for a website.
Hires zoom mode of Lightboxify URLs and 360 degree product viewer are also benefit from this technique
Responsive images delivery
To see how these image variants work in real-time, view this image in different browser viewport sizes and observe the change in the variant:
I made a small test against those image variants and publish a detail article on how Squarespace delivery responsive images and suggest best practice for Images on different areas on your website
The Bottom Line
Overall, Squarespace Image CDN is designed to ensure fast and responsive delivery of images, and creators don't need to worry about anything other than uploading images and letting the platform do the rest. While there may be limitations for more advanced use cases, the CDN does a great job and is one of the reasons why Squarespace is a popular choice for website creation.
