How to optimize images for your Squarespace website
My exact process for optimizing website images for speed and SEO, from resizing to renaming to alt text, using nothing but what's already on your Mac.
Images make up over half of the average website's total bandwidth, more than any other single resource on a page. That's the kind of stat that sends people straight to Google looking for a fix, and most assume that fix is compression alone. It's not. Real image optimization touches file size, format, file names, alt text, and how each photo actually displays once it's live, and every piece of it matters for speed and for SEO. Here's the full process I use on every site, most of it using nothing more than what's already on your Mac (and your head) and inside Squarespace itself.
Why optimizing your images isn't about finding the right app
People assume optimization means finding the right compression tool: a new process, a plugin, a paid subscription. But compressing a file is only one piece of a bigger checklist, and most of that checklist doesn't need an app at all. Renaming a file, writing alt text, setting a focal point, none of that lives in Photoshop. It lives in habits, and in tools you probably already have open.
I'm a big believer in keeping things low-tech when the simple option already works. I love what The Lifestyle Lab is building around a slower, more intentional relationship with technology, and it's basically my whole philosophy for image optimization too. You don't need another app or another favorite cluttering your bookmarks. You need a handful of habits and the tools already sitting on your computer.
For the one step that does need an app, resizing and compressing the file itself, I use Preview. :) I've tried multiple tools over the years, and most add a step without adding real value. For a task this simple, the built-in option wins every time.
The full image optimization process
Now let's go over my exact process for optimizing images for websites. None of this needs to happen all at once, and it's not a checklist you have to memorize. It's the same 7 small habits, every time, until they stop feeling like habits and just become how you upload a photo. Here's the order I actually go in.
Open your image in Preview
Double-click any image on your Mac and it opens in Preview by default.
Resize to the right target for where it's going
Go to Tools > Adjust Size. I use two targets, depending on what the image is for. For background and banner images (the big, full-width ones behind your homepage or section headers) I keep under 500 KB. Every other image on a site, like gallery photos, product shots, or an inline photo in a blog post, I get as close to 250 KB as I can without the quality visibly suffering.
I keep the default resolution and scale the file down using percent until I hit my target, then crop if it needs it. I always feel like I'm beating the system by shaving the file down even further when cropping the image after it's already hit my sizing sweet spot. 🤓
Skip PNG unless you need transparency
PNG has its place, but not for regular photos. It's a format built for graphics and transparency, while JPEG is built for photos and compresses them far smaller with almost no visible difference. Save your PNGs for logos. Reformat everything else as JPEG.
Check the file size before you upload
Before I ever upload, I view my images as a list and check every file size against my target one more time. If something's still sitting north of my target, I go back and resize it again. Just in case…
Rename the file before you upload it
This one gets skipped constantly, and it's free, easy SEO sitting right there. Before uploading, rename the file from whatever your camera or phone called it (no IMG_4827.jpg please!!) to something that actually describes the photo, using hyphens instead of spaces: montreal-web-designer-workspace.jpg, not a string of numbers nobody, including Google, can read from.
Add alt text once it's uploaded
Alt text is the short written description Squarespace lets you add to every image after it's uploaded, and it's one of the easiest SEO wins on the entire list. It tells search engines what's actually in the photo, since they can't "see" it the way a person can, and it's what screen readers read out loud for visitors who can't view images at all. Write it like you're describing the photo to a friend on the phone: "woman working at a laptop in a sunlit home office," not "image1" or a stuffed list of keywords.
And honestly, the SEO win is the smaller reason to bother. Good alt text is what lets someone using a screen reader actually know what's on your site, since that's literally what gets read out loud in place of the image. Skip it, and a visitor who's blind or low vision hits a string of blank "image" announcements with no idea what your work even looks like. That's not a technical nice-to-have. That's the difference between your site welcoming someone in and quietly shutting them out. Accessibility, people!
Set the focal point once it's uploaded
Squarespace lets you set a focal point on every uploaded image, which controls how it crops on mobile and in different layout sections. It's a 2-second click that's skipped constantly, and it's the difference between a photo that looks intentional on every screen size and one where someone's head gets cropped unintentionally out on a phone.
Small habits, and none of them require anything you don't already have. But the reason this matters goes past just having a faster site.
What optimizing images does for your site
The biggest single win for site speed usually comes from properly sized images, not a redesign or a platform switch. That lines up with what I see on client sites constantly.
There's an SEO upside on top of that, and it's bigger than just speed. A well-named file and a good piece of alt text both give search engines information they'd otherwise have to guess at, and guessing is not a strategy you want to rely on to get found. Images are often the biggest single contributor to a page's overall size too, and a slow page works against you in search just as much as it works against you with visitors. Optimize your images properly, and you're doing real work toward how well your site ranks, on top of how fast it feels.
There's a compounding effect on top of all of that. Every photo you resize, rename, and tag before uploading is one less thing dragging down every page it lives on, and that adds up fast on a site with a gallery, a shop, or a blog that grows every month. A habit that takes a minute per photo now saves you a much bigger cleanup job later.
I build this whole process into every site I hand off, and it's one of the easiest wins a business owner can take on themselves. No new software, no learning curve, no subscription. Just an app that's already sitting in your dock, and a few extra minutes per photo.
If you'd rather hand off the image optimization process entirely, here's how I can help.
Frequently asked questions
Do I need Photoshop or a paid app to do this?
Absolutely not! You can use Preview, built into every Mac, to resize and compressing images for your webste, with no subscription or learning curve. The only other steps, like alt text and focal point, happen directly in Squarespace's image settings once your photo is uploaded, so nothing extra needs to be installed anywhere in the process.
What file size should I actually aim for?
It depends on what the image is for. Background and banner images, the big full-width ones, I keep under 500 KB, since they're large enough that some extra weight is expected. For everything else on a site, like gallery photos, product images, or inline blog photos, I aim closer to 250 KB, since those add up fast when there are several on one page.
Should every image on my site be a JPEG?
Almost every photo, yes. JPEG compresses photographic detail far smaller than PNG with almost no visible difference at normal screen sizes. Save PNG specifically for logos or graphics that need a transparent background, since that's the one thing JPEG can't do.
Do I really need to rename my image files?
Yes, and it takes seconds. A file still named IMG_4827.jpg tells Google nothing about what's in the photo, while a name like squarespace-web-designer-montreal.jpg gives search engines real, readable information. It's one of the easiest SEO wins on this whole list because it costs no extra time once it's a habit.
What should I actually write for alt text?
Describe the image plainly, the way you'd describe it out loud to someone who can't see it: what's in the photo, and any context that matters. "Woman working at a laptop in a sunlit home office." is a good alt text. A pile of keywords or a blank field is not, and both hurt more than they help.
What's a focal point, and do I need to set one?
Yes, it's worth the two seconds. Squarespace lets you click a focal point on every image after upload, which controls what stays in frame when the photo crops for mobile screens or different layout sections. Skip it and you risk a hero photo cropping out the exact thing it was supposed to show, like a face landing outside the frame on a phone.
