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's image CDN and answer some common questions to help you get a better understanding of how your images are handled on the platform.
Storing Images on Squarespace's 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.
Optimizing Image Delivery on Squarespace
Squarespace doesn't simply serve images as-is. There is a limit on the maximum size of an image, with a maximum width of 2500px. According to Squarespace's official document, images uploaded to the platform will be created in seven different versions, each with a different width, to serve on different device widths.
| Visualization on generated image versions
These optimizations, along with Squarespace's own delivery mechanism, are designed to ensure fast and responsive image delivery to users. But how fast?
I did some test with the platform image CDN, and the speed is really fast, according to this test, the delivery time is superb! The response time is fast and clients all around the world can receive the image as same speed regardless their location.
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.
The Bottom Line
Overall, Squarespace's built-in 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.
