1 Common Mistake Newbie Squarespacers Make

1 Common Mistake Newbie Squarespacers Make with Images

Those images you are using for your Squarespace website. They're too big. The file size is huge (1 MB, no no no!) They're all shapes and sizes.

Getting them right can be such a pain in the bum.

Whether you've taken a selfie, a fancy pic with your fancy camera, downloaded free images from Unsplash or bought some from Creative Market, you've got to get the size right.

Remember these two numbers: 1500px and 500kb (or less).

Write them down somewhere. Like on a Post-it note and stick it on your computer or laptop.

Squarespace best practices for Images

  • Your ideal image width should be 1500px which Squarespace will responsively resize for you depending on your layout and the device your visitors are using.
  • Your ideal image file size should be 500kb or less.

If you're wondering why your site is loading so slowly, check your image file sizes.

If you're wondering why there's white space around your blog post or page image, check the image width. You can also stretch the image to fit the image block container but be aware that it might distort or look blurry. Test it out. See what works.

This Pinterest Friendly Blog Graphic (735 px x 1102 px) is NOT stretched.

 
Not stretched
 

This Pinterest-friendly Blog Graphic (735 px x 1102 px)  is stretched.

I don't see much of a difference, do you?

 
testing stretch images in Squarespace.
 

Here's how to stretch your images, by the way.

(Ah, now this one below is stretched and kind of blurry.)

Step 1: Click on the sideways teardrops and choose Image Block.
Step 2: Upload your picture
Step 3: Click on Stretch, then click apply. Your image will stretch to fill the image block container.

 
Stretch image in Squarespace Image Block
 

Great, I need to optimize my images for Squarespace. Now what?

I use TinyPNG to reduce my image file sizes. It's quick, easy, and free. You can use whatever software works best for you. 

For banner images, make sure the width is 1500px, like Squarespace suggests.

For blog post images, I'm slack and don't worry about it so much. I mainly use screenshots in my posts for how to articles. I admit, I need to improve how I size and stretch them. Uh huh.

My main blog post graphic is Pinterest-friendly with these measurements: 735 px x 1102 px. Random but it works (and looks good on Pinterest) so I won't be changing that one.

When I work with web designer clients and entrepreneurs, I often resize images. I also teach clients how to optimize their images correctly so that this issue doesn't crop up later when they're managing their own sites.

The job can be tedious, but it makes all the difference. 

Have you had issues with the way your images look on Squarespace? Is your site loading slowly? Hop on over to my Facebook page and tell me what's going on with your images. That's where I like to talk about hacks that work.

If you're new to Squarespace, you can find out tons more hacks and tips in this post - the 10 Step Guide to Setting Up a Squarespace Website from Scratch.

 

 

Like this blog post?

Get a monthly email with my latest 3 or 4 posts and access to my resource library with tips and how to-s for Squarespace and copywriting.

 
 

Kath O'Malley

Hi, I’m Kath - author of this blog post (and others like it) and copywriter, editor, keyword researcher and website setter upper for Squarespace web designers and service-based entrepreneurs and freelancers. Team up with me to get your web design projects done, like yesterday.