1 Common Mistake Newbie Squarespacers Make (Update Aug 2019)

Squarespace Tips & Hacks. Get Squarespace How to-s and Why to-s straight to your inbox. I love to share!

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 and Unsplash have a partnership so you can now add free stock Unsplash images from directly in the dashboard.

Squarespace best practices for Images

  • Your ideal image width should be 1500px. Squarespace is responsive, so it will resize the image depending on your layout and the device your visitors are using.

  • Your ideal image file size should be 500kb or less. And less is better.

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.

Check out the examples below (which makes this layout look ugh, but to show how it works, I need to use the full image width.)

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.

testing stretch images in Squarespace.

So, you need to optimize your images for Squarespace. Now what?

Use TinyPNG to reduce 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 use a template for the main blog post image and screenshots for any how to images. My 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 clients on Design in a Day™ projects, I often resize a few of their 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? Have a look at your images and spend some quality time resizing them. ;)

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.

Mail Box | Squarespace Tips and Timesaving Hacks Emails

Squarespace Tips & Hacks

Get Squarespace How to-s and Why to-s straight to your inbox. I love to share!

Nope to spam. Unsubscribe anytime. Read the Privacy Policy.