Resource: Shrink & resize your images for a better, faster Squarespace website

Change & update images without bloating & slowing down your Squarespace website

Introduction to optimising images for Squarespace

Changing and upload images is a routine task in the lifetime of a website, but important. It helps keep your website on brand, but also feeds in to Search Engine Optimisation (SEO).

The steps are relatively straightforward, but repetitive, so building a workflow can be helpful. This is why we’ve laid out the key steps below to help you with your site maintenance and updates.

We are a brand studio based in Torquay, South Devon, offering branding, website design & brand video to creative businesses across the UK - find out more about our website design services for businesses.

Key principles to remember when optimising images for Squarespace

• Uploading lots of images with a large file size (over 1MB) will slow your website down over time, and impact visitors’ experience and your Search Engine Optimisation (SEO) performance

• Although not critical, adding concise, descriptive alt tags to images feeds in positively to your SEO performance over time and within a thought-through strategy

How to add images to Squarespace

1. Log in via squarespace.com/login or your built-in domain https://www.YOURDOMAIN.squarespace.com/config/
   

2. Find your site in your Account Dashboard and click the ‘edit site’ button on the thumbnail image of your site
   

3. Using the Home Menu on the left or live preview panel on the right, navigate to the area where you want to update an image
   

4. Find the edit menu for the image or section and click to enter edit mode
   

5. For images in banners or section headers, click ‘banner’ to edit
   

6. To remove an image, click the ‘bin’ icon
   

7. To replace the former image, click ‘upload an image’ to add a new image from your computer

   • See below on how to optimise your images
     

8. Once uploaded, add a short, descriptive sentence in the field titled ‘Filename (Optional)’ (the alt tag for the image)

   • See below on how to write your alt tags
     

9. When you are happy, click the ‘apply’ button at the bottom
   

10. Double check you are happy and then click the ‘save’ button for the section to save your work

Squarespace image optimisation step by step checklist

1. First, to help with your admin, collate all your images and put them together in a folder on your computer or cloud folder

2. Using Adobe Photoshop or an online image resizing app (such as squoosh.net), upload images one by one or in batches

3. Reduce the image width to between 1500px and 2500px, if possible

4. Compress the image file size to below 500 KB - below 300KB is ideal, but ensure to double-check the quality

5. Save the compressed file to a separate folder with a short, helpful descriptive filename (see below for pointers on filenames)

6. Upload your chosen images to your Squarespace website and the ‘Filename (Optional)’ field (alt tag) will be populated automatically

7. To save time by batch processing images with Adobe Photoshop, check out further resources via a Google search

Best practice with Squarespace filenames & alt tags

• An alt tag is the piece of text that is displayed when a browser is unable to display an image

• It also helps search engines scan and analyse the content of a page

• The filename of an image often acts as the alt tag if one is not specified

• Alt text is also used for those with access needs, so needs to be short and readable

Pointers for alt tags in Squarespace

1. Write them for humans so that they can be understood at a glance

2. Use proper sentences although you can omit definite and indefinite articles (‘a’ and ‘the’)

3. Don’t include ‘image of’ or ‘photo of’, as screen readers automatically introduce images, making the text superfluous

4. Remember the keywords for your business and include them if appropriate, but avoid keyword stuffing

5. Keep the length of the alt tag to no more than 125 characters or 12 words

   1. Use a character counter like lettercount.com

   2. Or the new Character Counter Tool from Originality.ai, which uses AI to edit the text to your target length

   3. It uses AI to adjust the text you enter to hit your target character or word count, plus it highlights the characters once you go over a limit that you can set

Further reading on alt tags for your Squarespace website

• ‘Alt Text’ from Moz

• ‘Accessibility: Image Alt text best practices’ from SiteImprove

• ‘Image SEO alt tag and title tag optimization’ from Yoast

---

This website checklist should help get you get to grips with honing your website, and if you’d like to receive our studio e-mail which we (usually) send out on a Tuesday, pop your details in below.

We share website and branding tips; insights into brands we create; behind the scenes in our studio; as well as interesting events. Plus there are no silly marketing antics!