How to optimise your images for your Squarespace website

Having really large images (big file sizes) can really slow down your website, impacting not only how easy your website is to use but also your SEO rankings.

Nobody likes a slow-loading website, especially when browsing on the go on the mobile. I don’t know about you but because we often lead hectic lifestyles, multi-tasking on the go, I am not very patient waiting for a website to load and will just give and try another company’s website. First impressions count.

How Squarespace handles your uploaded images

Squarespace does a great job of making your website as fast as possible on different screen sizes and devices. It does this by automatically creating seven variations of each image you upload, to ensure the images looks great on any screen size. The widths the system creates are:

• 100 pixels

• 300 pixels

• 500 pixels

• 750 pixels

• 1000 pixels

• 1500 pixels

• 2500 pixels

NOTE: Images added through Site Styles (background images and site-wide banner images) load at their original dimensions! So be careful with the file sizes of these images.

However, it is important to format your images in the correct way before you upload them to Squarespace to get the most out of this functionality.

Here are my tips for how to format your images before you upload them to your Squarespace website:

TIP 1: Resize the image to be website friendly

• use .jpg or .png files

• use images that are 500 KB or less

• make sure your images are formatted in the RGB colour mode (this is what is used for screens to ensure the best colour match to the original)

• Squarespace recommends using images that are between 1500 and 2500 pixels wide

• When resizing the images to JPG I recommend setting the quality setting to 85% maximum to save even more on file size

TIP 2: Don’t forget to optimize your image for the web, so that it is small in file size too!

Use image compression software to make your image file sizes as small as possible (see my tip below)

My main time-saving tip - the image compression software I recommend

Before I upload any of my optimised images to Squarespace, I run them through TINYPNG - which is a smart image file compression online software that uses smart lossy compression techniques to reduce the file size. This is a big time saver!

TIP 3: Name the file name of your image to be something relevant

Rename the file name of the image to describe what it is, this good practice for SEO.

Remember: Only use letters, numbers, underscores, and hyphens

Don’t Forget Image Alt Text!

Finally when adding your image to your website page don’t forget to add its alt text description for SEO and accessibility!

---

Image Formatting Tips

Keep in mind:

• Ensure your image is in the correct orientation before uploading it. If your image is saved

  upside-down, rotate the image with image editing software before loading it to your site.

• If you already added the image to your site, rotate the image using our built-in image

  editor.

• Images added to galleries display best if all images have a similar shape. For example,

  use all landscape images (wider than they are tall) or all portrait images (taller than they

  are wide), not a mixture of both.

• To preview how your site looks on mobile devices, use device view.

---

Need more help?

If you need help optimising your Squarespace website I offer a Squarespace Maintenance Service, as well as a Squarespace Website Audit service to help you understand how to technically improve your website.