How to size images for Squarespace SEO – Faster Page Speed!
Sizing down and compressing your images is a critical step in optimizing your Squarespace website for SEO. If you want your Squarespace website to rank on Google, it needs to load fast. Site speed is one of the many ranking factors Google considers when deciding which website should rank on the top of page 1! The number one thing that will slow your Squarespace website down is large images. This article will walk you through how to size your images for Squarespace SEO.
Learn how to size your images down and compress them for free without Photoshop. You can do this with your built in image application (such as Preview for Mac). Or, if you have access to Photoshop, you can use the “save for web” feature to both size down and compress images at the same time.
This article details why you should size your images down, recommended page size and image size requirements to meet Googles specifications, and tools to help you compress your images, test image size, and audit your website for SEO.
-
0:00 In this video we're going to size our images down and compress them for the web. This will help your website pages load super fast and it'll also help you rank higher on Google.
0:12 I went ahead and downloaded some high-resolution, royalty-free copy right free images from Pexels. You can also do this from Unsplash.com.
0:21 I'm on a Mac. I'm going to go ahead and switch the view from icon to list. This is helpful because you can see the size of the image.
0:28 I'm going to go ahead and hold the shift key down and open up more than one of these at a time.
0:34 First we're going to size these down in bulk and then I'll show you how to do it one at a time.
0:39 So I held the shift key down. Now I'm going to double click on this. It's going to open up in preview, which is the native app on my Mac.
0:46 If you're on a PC, you can use whatever's there. It's native on your device to size images down. I'm going to go ahead and hold the shift key one more time because you want to make sure both of these are highlighted in the left hand menu.
0:57 We're going to go to tools and adjust size. Now these images are different sizes so we can't actually size down by pixel, but we can by percent.
1:10 In general, go down to 30 percent. What that does is it's going to get your images under 2500 pixels and Squarespace won't even display anything wider than 2500 pixels.
1:21 anyways. So this is a really good starting point. I'm going to go ahead and hit okay. And then we're going to go ahead and click the red X and size down.
1:32 So already these images are way smaller. We're down to 100 pixels. 109 gigabytes, 198 gigabytes. This in and of itself is probably fine, but we can size down even more.
1:43 For images that you download from Unsplash, typically sizing them down isn't enough and you want to compress them as well.
1:50 Compression is when we remove pixels that nobody wants what he's going to miss on the internet. So we're going to go to tinypng.com.
1:58 This is a free image compressor. And we're going to go ahead and drop one of these in here. Now if you're doing this at home, you actually can click and drag multiple images at once, but for sake of time, I'm going to go ahead and just drag this one that's 198 gigabytes.
2:13 It's still a little bit big. And we'll go ahead and see what size it spits out for us. Alright, so I went ahead and got it down to 177 gigabytes.
2:26 So that's not a ton, but sometimes when you drag these images in here, it will will reduce it greatly. So you would go ahead and download the image and go from there.
2:35 So now let's go ahead and get into sizing down a little more specifically for one image at a time. I'm going to go ahead and click on this image that we haven't sized yet.
2:44 I'm going to double click on it. It's going to open in preview. We're going to go to tools, adjust size.
2:51 Now here, because we're doing one image at a time, we actually can go by pixel. So the original width is five hundred, five thousand, four hundred and thirty-two pixels.
3:02 And again, a site like Squarespace won't even display anything larger than twenty-five hundred. So at minimum, we can go ahead and size it down to twenty-five hundred.
3:11 So I'm going to hit okay. And we're going to exit out of here. And it went ahead and brought it down from eight hundred gigabytes to two hundred nineteen.
3:18 And that, again, is already a huge difference. I would still drag this into TinyPNG or Compressor.io and get it down a little farther.
3:27 But that's all you need to do to make sure that all of your images load super fast and keep your website functioning as nice as possible.
Table of Contents
Why reduce the size of your images for Squarespace SEO?
Image size has a dramatic effect on page speed and Squarespace SEO. Websites that load slowly will perform poorly in search engine results (Google search). Because site speed also affects user experience, slow loading websites will affect conversions too.
As recommended by SEOSpace, the SEO plugin for Squarespace, you want to get your images under 250 kb. High resolution images from Unsplash or your smartphone may be as much as 2 MB or more! Anything above 250 kb could slow your website load time down, lead to a poor score on Google Page Speed, and affect user experience.
Squarespace doesn’t currently support next-gen formats such as Webp, which is a new image type that retains quality but is greatly reduced in size. However, this new feature is on the road map for 2024, so stay tuned!
There is also a rumor that Squarespace increases compressed images. I have found this to be true. The file size in Squarespace doesn’t always represent the size of a file accurately. What I recommend is that you compress your images under 250 kb and then use the free or paid SEOSpace SEO plugin to scan your website for any images that have been increased over 250 kb. This is what I do for myself and my clients.
How to size images on a Mac for Squarespace SEO
Double click on your image and open in Preview
Go to TOOLS > ADJUST SIZE
Change the dimensions to “pixels” and reduce the number to 2500 or less. Make sure “resample image” and “scale proportionally” are checked on.
➟ Pro-tip: Squarespace recommends 1500-2500 px for hero/full-width images. If you are wanting to display high resolution images (ideal for photographers and portfolio sites), size your banner images down to 2500 px. However, if you are prioritizing speed, you can size down to 1920 px or less for a faster load time. If you go below 1500 px, you will likely find your images look fuzzy. Be sure to check them on larger displays to make sure they don’t look too pixelated. For images on the inside of your website go with 1000-1500px. For icons or smaller sections, go with 500px.
By changing the dimensions to 1920 pixels wide, it reduced the image 36%.
Upload to a free image compressor such as compressor.io, imagecompressor.com, or tinypng.com and export the new image. It should be reduced by about 50%!
Ideally, we like images under 100 kb. This isn’t always possible. I try to reduce my images as much as possible without loosing quality. If you upload an image on your website and it looks “fuzzy”, you’ve reduced it too much. Take note that JPG files are going to load faster then PNG files. PNG files allow for a transparent background. You can use them when you need a transparent effect, or if you want your image to look less pixelated. Keep in mind they will load slightly slower.
After I sized the dimensions down I put it into Compressor.io and it reduced 67% more (under 100kb!).
How to reduce images with Photoshop for Squarespace SEO
Open the image in Photoshop
Choose “save for web” or Shift + Option + Command
Choose JPG and “low” for the compression level
Adjust the dimensions down until the image is under 100 kb—start with 2500 pixels wide. This is the size Squarespace recommends for full-width banner images. See the pro-tip mentioned above for size recomendations.
Save
In this example the image is set to “low” compression and has been sized down via the dimensions.
Troubleshooting & More Tips
What if you need a transparent image?
PNG’s are harder to compress then JPG’s. This is where Webp formats really shine. They retain quality and allow for a transparent background.
If you must have a transparent background on the graphic you are uploading, I recommend going as small as you can without losing too much quality. Images over 100 KB will lower your performance score on Google Page Speed, but if you can get your image under 300 kb, your website will still load fast enough to keep visitors from waiting on the white screen of death.
Are there any other options?
You can try the new extension from TinyIMG to improve your Squarespace SEO. They claim to reduce your website images by 70%. I still recommend you reduce your images prior to uploading to avoid using images that are 2 MB or more (even reduced by 70%, an image of this size won’t be under 100 kb).
How do I know what images on my website are too big?
You can use the free SEOSpace plugin for Squarespace to scan your pages and find out what images are too big!
What if I need more help?
If you get stuck and want some Squarespace SEO expert help, I offer a variety of flexible Squarespace SEO Packages. I’d be happy to jump on a call and talk about how we can eliminate some stress and get you ranking on Google!
