Squarespace Speed Boost: How to Compress Images and PDFs Without Losing Quality
There’s a moment every Squarespace owner knows. You hit publish, open your site on your phone… and it loads with the calm confidence of someone finding their keys in a very large bag.
Nine times out of ten, it’s not Squarespace being slow. It’s your media being heavy.
A big hero image, a gallery full of gorgeous photos, a PDF you exported for printing (because of course you did). None of this is unusual. It’s just that your site is trying to carry it all at once, and visitors feel that weight immediately.
The fix isn’t complicated or technical. It’s mostly about doing one small thing earlier in the process, before you upload anything.
Resize first. Compress second. Upload last.
That order alone will speed up a surprising number of Squarespace sites without changing how they look.
Before You Upload: the 60-second speed ritual
If you’d like a simple habit to keep your site fast, here it is:
Before you upload an image, make sure it isn’t bigger than it needs to be. Then compress it gently and give it a quick zoom-in check. You’re not hunting for perfection. You’re just making sure hair doesn’t turn into fuzz and text doesn’t turn into soup.
Before you upload a PDF, make sure it was exported for screens, not printers. Then open it on your phone and scroll it like a real visitor would. If it feels crisp and it loads quickly, you’re in good shape.
For quick image compression, tools like documents.io can make this task less painful.
Ideal file size targets (so you know what “good” looks like)
You don’t need to obsess over numbers, but it helps to have a sense of what “healthy” file sizes look like.
For images, a good goal is to keep most files comfortably under half a megabyte. A large hero image might land somewhere around 300–500 KB, and most gallery images can often sit around 200–400 KB without any visible quality loss. Smaller images and thumbnails should usually be much lighter than that.
For PDFs, the main thing is avoiding “print-ready bloat.” A short, screen-friendly PDF is often 1–3 MB. Bigger documents will naturally be larger, but if your portfolio PDF is creeping up into the 20 MB+ range, it’s almost certainly carrying print settings that don’t belong on a website.
Why Squarespace sites slow down (and why media is usually the culprit)
Squarespace does some helpful things automatically. It can create responsive versions of images for different screen sizes, and it’s generally good at presenting your content cleanly.
But there’s one thing it can’t do for you: it can’t un-upload a huge file.
If you upload a massive image, your page still has to deal with it one way or another. That’s why the biggest wins usually come from treating images and PDFs properly before they ever touch your site.
Typical “heavy” blocks: hero images, galleries, background sections, embedded PDFs
When people ask why their site feels sluggish, the answer is often sitting right at the top of the page: the hero banner. Full-width images are the first thing a page tries to load, so they have an outsized effect on how fast your site feels.
Galleries can be the next big factor. Even if each image doesn’t seem enormous, ten medium-heavy images in a row add up quickly. Background images in sections can also be surprisingly chunky, especially if you’ve used a very large file to keep things sharp.
And PDFs? PDFs are the quiet heavyweight. They don’t always look big… but they often are.
What Squarespace does automatically vs what you still control
Squarespace can help display images nicely, but you control the original file size, the dimensions, and the format. Those three choices determine whether you’ve uploaded a feather or a bowling ball.
Image optimization for Squarespace without visible quality loss
Image optimisation sounds technical, but the logic is very ordinary: don’t upload more pixels than your design can show, and don’t store images in formats that are heavier than they need to be.
Choosing the right format: JPG vs PNG vs WebP (practical rules)
If your image is a photograph, JPG is usually the best choice. It’s designed for photos and tends to give you the smallest file size for a nice-looking result.
If your image is a logo, an icon, or something that needs a transparent background, PNG is usually the right format.
If you already export WebP, it can be even smaller while staying sharp, but don’t feel like you need to rebuild your workflow just to use it. JPG and PNG can get you most of the way there.
Resizing first: picking dimensions for banners, galleries, and thumbnails
This is the part that makes the biggest difference.
A common mistake is uploading the original image straight from a phone or camera. Those files are built for cropping, editing, printing, and zooming. Your website usually doesn’t need any of that. It needs an image that looks sharp at screen size.
As a rule, hero images on Squarespace typically don’t need to be wider than about 2000–2500 pixels. Gallery images often look great around 1500–2000 pixels on the longest side. Smaller images can be smaller still.
If your visitors need to zoom in for detail (photography, artwork, texture-heavy work), you can size a few key images larger, but you rarely need every single image to be huge.
Compression second: how to pick a safe quality level
Once an image is the right size, compression becomes easy and low-risk.
For most photos, exporting at around 75–85% quality is a safe place to start. After exporting, do one simple thing: zoom in to 100% and look at the parts that usually betray compression. Hair, fabric texture, sharp edges, text overlays, and dark shadows. If those look clean, you’re done.
If they don’t, you don’t have to guess wildly. Just raise quality slightly and export again.
If you want a quick, simple tool to do this step, this one is straightforward:
https://documents.io/image-compressor
PDF optimization for Squarespace downloads and embeds
PDFs are where lots of Squarespace sites quietly lose speed, because PDFs are often created in “print mode” by default.
Screen-optimized PDFs vs print-ready PDFs
A print-ready PDF is designed to look perfect on paper, so it often contains high-resolution images and extra information that helps printing. It can be many times larger than it needs to be for web use.
A screen-optimised PDF is designed to load quickly and read well on devices. If your PDF is meant to be downloaded from your website, screen optimisation is what you want.
Downsampling images inside PDFs without blurring text
The goal is to reduce the size of images inside the PDF while keeping text crisp. The easiest way to do that is using export options like “PDF for web” or “small file size,” depending on the tool you’re exporting from.
If you’ve ever seen a PDF that looks fuzzy on mobile, that usually happens when text gets flattened into an image. If you can avoid flattening text, your PDF tends to stay much sharper.
Removing bloat: fonts, metadata, hidden layers
Some PDFs carry extra baggage: embedded fonts you don’t need, hidden layers, previews, or leftover elements from a design file. Re-exporting with a screen preset often clears a lot of that automatically.
Once you’ve optimised it, open it on your phone, scroll through it, and zoom in on a couple of headings. If it reads cleanly and loads fast, you’ve nailed it.
A quick workflow you can repeat every time
Here’s the simplest way to make this routine stick:
When you create images for your site, save a “web version” folder where everything is resized and compressed. Keep your original files elsewhere, untouched. That way you’re never compressing the only copy you have.
When you export a PDF, export two versions if needed: one for screen and one for print. Upload the screen version to Squarespace, and only offer the print version if you genuinely expect people to print it.
After publishing, do one quick real-life check: open the page on your phone in a private/incognito window. If it feels snappy there, it’ll feel snappy for almost everyone.
Troubleshooting
Blurry images, banding, and crushed shadows
If your image looks blurry, it’s usually because it was resized too small or compressed too aggressively. Re-export slightly larger, or increase quality a little.
If you see banding in gradients (skies and smooth backgrounds are the classic places), that’s usually compression being too heavy. Raise quality and export again.
If shadows look “crushed” and you’ve lost detail in dark areas, raise quality a bit and check the darkest parts at 100% zoom.
PDFs that look fuzzy on mobile
If a PDF looks fuzzy on phones, it often means text was flattened into an image during export. Re-export using a screen/web preset and look for options that preserve text.
The questions everyone asks (and the calm answers)
How do I optimize images for Squarespace?
Make them the right dimensions first, then compress gently before uploading. Most speed gains come from those two steps.
Does Squarespace compress images automatically?
Squarespace helps with responsive display, but you still want to upload properly sized, reasonably compressed files. That’s where you get the biggest improvement.
What size should images be for Squarespace?
For many sites, hero images around 2000–2500 px wide and gallery images around 1500–2000 px on the longest side are a safe range. The key is avoiding massive originals when your design can’t show that detail anyway.
