How to prepare images for Squarespace - the right way!
If youβve been compressing your images before uploading them to Squarespace, youβre not alone. Itβs a common mistake, encouraged to improve site speed. But if you compress your images aggressively, youβll end up making things worse.
Introduction
One of the most common mistakes I see is when users compress their images before uploading them to Squarespace. While it might seem helpful to shrink the image file size in advance, overdoing it can actually backfire - leaving you with images that are much larger than they need to be.
Letβs unpack why this happens, and what to do instead.
Why compression can backfire
When preparing images for your Squarespace website, it might seem logical to compress them before upload. After all, smaller files should mean faster websites, right? But when it comes to Squarespace, heavily compressing your images before uploading can actually make things worse!
Understanding what Squarespace does with your images
When you upload an image to Squarespace, it doesn't display this version on your website. Instead, it processes the image and generates up to seven different versions, each at a different width. These are:
100 pixels
300 pixels
500 pixels
750 pixels
1000 pixels
1500 pixels
2500 pixels
This process is part of Squarespaceβs responsive image system (previously referred to as ImageLoader, though that term isnβt used much these days). The idea is that the platform will automatically serve the most appropriate image size based on the visitor's screen. For example, a phone might only get the 750px version, while a 4K monitor gets the 2500px version.
To create these different sizes, Squarespace resizes and re-encodes each image as you upload it. This re-encoding means your image goes through compression again, and this is where problems arise! If the image was already heavily compressed, it will get larger.
Itβs complex math
Compressing an image involves a lot of complex math to find patterns in the image data, and simplify them. But once an image has already been compressed, most of those patterns have been flattened or removed. When Squarespace resizes and compresses it again, itβs trying to simplify an image that no longer has much meaningful structure, just flattened data. This often leads to a larger final file size, not a smaller one.
I know this seems a bit counterintuitive, but uploading a more compressed image usually results in larger and lower-quality images than if youβd uploaded a cleaner one.
What Squarespace Engineers recommend
To ensure your images are processed cleanly, Squarespace engineers recommend:
Resize your images before upload, so the file is no wider than 2500px. You don't need to do this because Squarespace will resize any images you upload that are wider than 2500px, but formatting beforehand will speed up both the upload and the processing time. Squarespace wonβt serve anything larger than 2500px, so uploading 4000px-wide images is unnecessary.
If you are preparing your images before upload, light compression is OK, but donβt use anything more. In most photographic or image editing tools like PhotoShop, a βhighβ quality setting of 95β100% is correct in most cases. This ensures that Squarespaceβs re-compression process works efficiently, without being tripped up by earlier compression. If you compress it too much, the filesize will get larger when you upload the image!
Avoid PNGs unless absolutely necessary for transparency. JPEGs are smaller and compress better for photographic content.
Squarespace now supports WebP images, but you donβt need to upload WebP versions of your images. When any image is served, it will automatically be converted to WebP, if the setting hasnβt been disabled (it is enabled by default).
Summary
Hereβs what you should do when preparing images for upload:
Images do not need to be any larger than 2500px wide.
Save images as JPEG or WebP, with only light compression (95β100% quality, where 100% is uncompressed)
Only use PNGs if you need transparency
Donβt over-compress your images.
Let Squarespace handle the responsive resizing and WebP conversion automatically.
By giving Squarespace clean, high-quality images to work from, youβre helping its responsive image system do its job more effectively. Youβll often end up with smaller final file sizes, better load times, and more consistent image quality across devices.
Over-compression before upload doesnβt save you anything, and it can actually work against the platformβs built-in optimisation tools.
