Squarespace Image Size: How to Resize & Optimize for SEO

March 31, 2020 Lauren Taylar

Looking to optimize the images for your Squarespace website?

You’ve come to the right place!

And if you’re thinking, “Do I have to resize my photos before I upload them?”

The answer is yes! Because it’s super important for SEO.

As a Squarespace SEO strategist, this is something I see missing from a lot of websites for coaches and creative entrepreneurs like photographers.

If you’re not familiar with SEO, it stands for search engine optimization - read all about what SEO, how it works, and top ranking factors.

There are many reasons why you want to take the time to optimize your Squarespace website images.

Without further ado, let’s chat about Squarespace image size best practices…

Why you need to optimize your images before uploading them to Squarespace

It increases site speed

Site speed is a ranking factor when trying to move your website up in the Google search results.

Site speed the time it takes for Google to display your website to a user.

A big culprit of slow site speed is adding very large images to your website because there’s a lot that Google has to load onto a screen.

You want your website to load within 3 seconds, or else people won’t even reach your website because they don’t have the patience to wait. That means your website is practically useless because dream clients aren’t able to see what you have to offer. Super frustrating.

This is a prime example of why you need to care about SEO even if you’re not blogging.

You can test your site speed with PageSpeed Insights.

It helps Google understand the image

When you rename your image file to include keywords, which I explain below, Google is able to gain a better understanding of what exactly your image is.

Not only does it help your ranking in the Google search results, but also your ranking in Google image search.

It helps visually impaired people

This isn’t talked about as much, but Google pulls the alt text of images to tell visually impaired people what the image is.

That’s why it’s so important to rename your images at the very least.

But don’t worry, I’m going to dive into this a little later.

Image file types and recommend sizes

File types

You want to use either PNG or JPG files for your website.

PNG files tend to be images with transparent backgrounds and JPG files have a white background.

Most stock photos and brand photography are JPG images, whereas you might be uploading graphics and icons as PNG files.

Types of images and sizing recommendations:

Most high quality photos will be between 5 and 15MB, especially for photographers.

You want all of your images below 500KB before uploading them to your website.

It’s okay for banner images to be between 400 and 500KB, but you’ll want your other images to be much smaller.

Banner images or background images - 2500px x 1500px, or 2000px wide at the lowest
Logo - at least 1500px wide or tall
All other (individual images, gallery images, thumbnail images for blogs, products and events) - 2000px x 1500px

Anything lower than 1500 px can become very blurry and low quality, which you don’t want because it will hurt your professionalism.

Side note: The favicon is the exception. If you’re not sure what a favicon is, it’s the little image that appears in your browser tab. For example mine is just the letters “lt” in a pink circle. This can be as small as 300px x 300px since the area is very limited.

Manually reduce image file size

Here is where we start with the Squarespace image size optimization.

The goal here is to reduce the image file as much as possible without impacting the quality.

You can do that first by changing the width and height of the photo.

Step 1: Reduce image with Mac Finder

This is my first step when it comes to optimizing my images.

Open your Finder and find the photo. Here, you’ll see the type of image and its size.

Double click to open the image. Then go to Tools - Adjust Size.

Here is where you want to type in the width or height, and it will automatically adjust the other.

Then click OK.

Note: If your image is horizontal or vertical and you want to crop it to a square, you can do that inside Squarespace (explained below), or use the crop feature inside this window. Simply hold down the Shift key and drag. You’ll notice that the dotted box that appears is a square. You can drag it around the image or expand the box to where you’d like the image to crop. Then click Tools - Crop.

Reduce image file size with a tool

After you’ve changed the image dimensions, now it’s time to reduce the file size.

You want to use a tool that will maintain the photos’s quality. This part of the Squarespace image optimization process involves using 2 different programs so I can benefit from this twice.

Step 1: JPEG mini

JPEGmini is an amazing tool that will reduce the file size up to 80%.

You can start with a free trial before you have to upgrade to the paid version, which is $60.

In my opinion, it is SO worth the money, especially if you are a website designer, photographer, or someone who uploads a lot of photos to your website.

Once you download the app onto your desktop, you can drag and drop all your images into the app. Once it’s done reducing the file, it will automatically update your files so you don’t have to separately download the optimized versions. It’s such a convenient tool!

As you can see in the images below, the original photo that was 6.2MB is now 908KB. Now we need to get it closer to 500KB.

Step 2: Tiny PNG

Now we’re going to compress the images further with Tinypng. This tool is free, and you can drop up to 20 PNG or JPG images in here. Or you can go to Tinyjpg, but they allow both files so it’s all the same.

Here, I’ll take all the images that have been condensed by Jpegmini in Step 1 and drop them in here.

I download them onto my desktop and repeat this step if I have more than 20 images that need to be reduced.

Now you can see that the final image is 311KB, which is perfect.

Note: here is where you want to check all of your images - are they below 500KB? If not, start the process again. Try to reduce the file between 200 and 500 pixels, but be careful that the quality doesn’t get impacted. It’s easier to go reduce the file in smaller increments than reduce too much and have to backtrack.

Rename images file name

Now that you have all of your images below 500KB, it’s time to rename them before you upload them to your Squarespace website.

Most images will download with a file name similar to this: “IMG_9543”

The problem is that this tells Google absolutely nothing about your image.

Here’s a format you can use for your image file names:

[keywords - what images is]

For example, let’s say you’re a meditation coach and this is a photo of you for your website.

Your image file name could be: “meditation coach for busy entrepreneurs - woman meditating on yoga mat”

Or maybe you work in the wedding industry…

This photo could go two different ways.

Wedding photographer: “wedding photographer in Tampa, FL - bride holding flowers”
Wedding floral designer: “Houston wedding floral designer - bride carrying white rose bouquet”

See how simple and straightforward that is? You only need to use your keyword once - anything more looks spammy and is considered keyword stuffing.

Note: You can rename your file name after you upload it to Squarespace, however, I find it much easier to just batch change all the file names in the folder on my laptop.

Add alt text

You may be wondering...well what’s the difference between the image file name and the image alt text?

Alt text, as mentioned in the beginning of this post, helps visually impaired people understand what an image is.

So if you don’t use your file name to clearly state what the image is like I did above and you only include the keywords you want to rank for, you definitely want to make sure you’re being descriptive here.

If you don’t manually add alt text, Squarespace will use the file name. For some images in Squarespace, the alt text will automatically be pulled from the file name if there is no option to manually add alt text.

There you have it! That’s the full Squarespace image size optimization process.

Changing image size on your screen

Now that you’ve reduced the size of your images and renamed the file, you can change how it appears on your website’s live version

Add Squarespace blocks

There are 6 different individual image layouts you can choose inside Squarespace.

Once you upload those images to your site, you can add additional blocks around your image block to format the page design how you’d like. Simply hovering on the side of the page and clicking the insert point where you’d like to add a block.

Common blocks you can add:

Text
Spacer
Line

Below, you can see how the image size changes when you increase the width of the spacer block.

You can resize banner images in Squarespace with spacer blocks.

Crop images in the photo editor - aspect ratio

When you add an image to a page, you can change the aspect ratio.

This is a great feature to use if you are uploading several images next to one another and want to appear as the same size.

On an individual image:

Click edit
Click image editor
Click crop
Choose which ratio you’d like, or you can click custom

On a banner image:

Hover over the image and click banner
Click image editor
Click crop and you’ll see the same options

To recap, before uploading your images to Squarespace, you want to:

Manually reduce the image dimensions
Use JPEGmini to condense the file size
Use Tinypng to condense the file size further
Change the image file name
Add image alt text (after you upload the image)

I hope you found this post super helpful in giving you everything you needed to know about Squarespace image sizes and how to optimize your photos for SEO.

Have questions or comments? Drop them below and I’ll be sure to answer them :)

Want to drive traffic to your website, grow your leads on autopilot and convert more dream clients?

After implementing SEO strategies for billion dollar global brands and high profile individuals, I’m passionate about helping my clients reach page 1 of Google so they can get seen by the people that need their services most.

Looking for more Squarespace SEO tips? Check out these blog posts: