Why Your Squarespace Images Might Be Bigger Than You Think — And What To Do About It

The Hidden Problem With Squarespace Images

If you’ve ever compressed an image to speed up your Squarespace site, you probably assumed that’s the version your visitors would see.

But here’s the twist:

Squarespace has its own image processing system. When you upload an image, it quietly re-encodes it — usually making it BIGGER.

We found:

• JPEGs get 30% larger than your compressed original.

• Indexed PNGs (like those from TinyPNG) can double or triple in size when reprocessed into RGB PNGs.

• RGB PNGs generally have their quality preserved with no bloat.

It’s a hidden problem — because it’s counterintuitive that this would even happen. But if you're aiming for fast load times and clean performance scores, it matters.

✅ The Strategy That Actually Works

We tested 20 JPEGs and 6 PNGs (both RGB 24-bit and indexed color), across a variety of image types: product shots, banners, illustrations, and logos.

Here’s the winning strategy:

Resize before you upload.

Don’t upload a 2500px image just because you can.

Instead:

For Foreground Images

Upload your image at below its maximum display width.

• For instance, if it’s going to be shown at 1600px, upload at 1500px or smaller.

• Then test the quality — if it still looks sharp, you’ve likely avoided unnecessary bloat.

For Background Images

These are often blurred slightly or obscured by text overlays.

• In most cases, uploading at 1500px or less is more than enough.

• Only go larger if you genuinely need the extra visual clarity — and even then, stay below 2500px if possible.

What About Retina Displays?

It’s a common belief that to make images look sharp on Retina or HiDPI screens, you should upload them at 2× the intended display size.

That rule makes sense in many contexts — but it doesn’t work cleanly in Squarespace.

Squarespace does serve higher-resolution images to Retina and HiDPI screens — but not in the way you might expect. Instead of doubling your image, it uses a simple formula:

Layout Width × Device Pixel Ratio = Target Image Width

It then rounds up to the next available breakpoint, chosen from: 100w, 300w, 500w, 750w, 1000w, 1500w, 2500w

Why This Matters for Performance

We’re not chasing perfect Retina sharpness here — we’re prioritizing page performance and SEO.

To get a 2500px-wide image small enough to pass page speed audits, it has to be aggressively compressed. That kind of compression often introduces visible artifacts — even on standard displays.

But if you resize the image to 1500px instead, you need far less compression to hit the same file size. Standard-density displays will look great, and Retina displays may look slightly softer — but the image will often look cleaner overall, with fewer visible artifacts.

We'll add an example comparison here soon to show exactly what that tradeoff looks like in real-world usage.

Here’s what that means in practice:

Example 1: You upload a 2500px wide display (foreground rather than background) image.

Squarespace’s guidelines recommend a 250kb size for display images. To hit the recommended 250kb the uploaded file should be around 220kb (allowing for the bloat Squarespace introduces). To hit this target you will need to heavily compress, sometime as low as Quality ZERO in Photoshop export.

• It appears in a container 1400px wide

• Squarespace serves:

  • ?format=1500w on standard screens — resulting in ~1.07× pixel density

  • ?format=2500w on Retina screens — resulting in ~1.78× pixel density (still short of full 2× sharpness)

Result: Retina displays have a sharp image with very noticeable compression artifacts. Other displays will also have artifacts, especially because Squarespace recompresses the 2500px image to make the 1500px version.

Example 2: Now compare that to uploading a 1500px wide image for the same container.

The 1500px image will compress to the 250kb recommended file size at a much higher quality with far fewer compression artifacts.

• Squarespace again serves:

  • ?format=1500w on standard screens

  • ?format=2500w on Retina screens — but it’s still using the 1500px image so pixel density is 1.07 compared to 1.78 in the previous example.

Result: For retina displays Squarespace now delivers a 1500px image that is squeezed into the 1400px container. The displayed image will be slightly softer but have fewer noticeable compression artifacts.

Other displays will enjoy BETTER image quality because less compression was needed to hit the target file size.

Bonus Tip: Breakpoint Obsession Is a Distraction

There’s a common belief among Squarespace designers and users that images must be uploaded at exact Squarespace breakpoint widths (like 1500px or 2500px). That’s a myth.

For years I’ve been requesting my clients to provide image assets at 1500px or 2500px wide.

In practice, you can upload at any width below the maximum display size and get nearly the same visual result — while avoiding unnecessary image editing.

Let go of the breakpoint mindset. You’ll save time, reduce client confusion, and avoid admin overhead without sacrificing quality.

Perceived Detail vs Pixel Dimensions

It’s easy to assume that more pixels always means a sharper image — but how we perceive detail is more nuanced than that.

In many cases, a slightly smaller image (like 1500px wide instead of 2500px) can still appear perfectly sharp, depending on:

• Viewing distance (further away = less detail needed)

• Screen resolution (standard vs retina)

• Image role (background vs foreground, decorative vs focal)

This is why resizing an image down — instead of uploading at maximum size — often delivers similar visual impact with far less file weight. You’re not necessarily sacrificing quality; you’re right-sizing it for how it’s experienced.

When Quality Matters More Than File Size

Some images are so important — think product close-ups, hero banners on retina screens, or full-screen photography — that quality trumps file size.

Squarespace caps its image breakpoints at 2500w, but here's a trick:

• If you upload an image that’s larger than 2500px (e.g., 3200px), Squarespace will resize it down to 2500w for display.

• That resized image will be sharper and better quality than a native 2500px upload.

• However, the file size will be larger — often significantly.

Think of it like this: you’re feeding Squarespace more source detail to work with.

Why This Matters for SEO

On most platforms, image optimization is simple: you compress your images to make them smaller and your site loads faster. That’s good for SEO.

But Squarespace changes the rules.

Compression Doesn’t Work the Way You Think

The standard advice — “compress your images before uploading” — backfires on Squarespace. Even if you carefully reduce file size (while sacrificing quality), Squarespace will:

• Re-encode your JPEGs

• Introduce bloat - your compressed file will increase in size

• Undo all your hard work

Resize Instead

Instead of compressing, focus on resizing your images to the actual dimensions they’ll appear OR SMALLER (see section on Perceived detail above) . This is a reliable way to reduce the final file size served to your visitors — and the only way to help your Squarespace site load faster in real terms.

PNG Pitfall: The Worst of Both Worlds

Be especially cautious with PNGs. If you upload an indexed PNG (a compressed version that dramatically reduces file size at the expense of quality), Squarespace will convert it into a full-color 24-bit PNG — drastically increasing its size.

You end up with a heavy image that’s no better looking than your original, and way worse for SEO performance.

If the image has transparency it will look far worse than a 24 bit PNG upload.

Real-World Recommendations

The Bottom Line

If you care about performance, SEO, and fast-loading visuals — don’t just compress your images and hope for the best.

Instead:

• Resize before upload to a size smaller than the image’s actual size on screen that still retains good quality.

• Aim for 1500px or lower where possible.

• If sharpness matters above all else, try uploading above 2500px — and accept the trade off.

These changes can make your Squarespace site feel faster, smoother, and cleaner.. ..and they have a better chance of benefitting your SEO.