Optimise Images for Squarespace SEO

Learning Objectives

• Understand how to prepare images before uploading to Squarespace
• Learn the best practices for image resizing and compression
• Identify the optimal dimensions and file sizes for Squarespace images

Introduction

Images are crucial for both how your Squarespace site looks and how fast it loads. Poor image optimisation can slow your site to a crawl, frustrating visitors and hurting your search engine rankings. This chapter shows you how to get your images ready before uploading them. You'll learn to resize, compress, and choose the right file formats to keep your site running smoothly whilst maintaining visual quality.

Lessons

Choosing the Right Image Dimensions

Getting your image dimensions right prevents Squarespace from having to resize them automatically, which can slow your site down.

Step 1: Check where your image will appear on your site. A homepage banner needs different dimensions than a gallery thumbnail.

Get the Squarespace Template Builder, with over 300 unique section designs.

Step 2: Use these recommended dimensions for Squarespace 7.1:

• Full-width banners: 2500px wide
• Gallery images: 1500px wide
• Blog post images: 1200px wide
• Product images: 1500px square

Step 3: Keep your image height reasonable. Most banner images work well between 800-1200px tall.

This is the bit most people miss – Squarespace will automatically resize oversized images, but this happens after the large file has already been downloaded. Your visitors are still waiting for that massive file to load.

Compressing Images Without Losing Quality

Compression reduces file size whilst keeping your images looking sharp. Here's how to do it properly:

Step 1: Use a compression tool like TinyPNG or Squoosh (Google's free tool).

Step 2: Upload your image and let the tool compress it automatically.

Step 3: Compare the before and after images. Most tools show you the file size reduction.

Step 4: Download the compressed version.

A typical result: a 3MB photo becomes 800KB with no visible quality loss. That's a massive improvement for loading speed.

Here's the quick version for batch compression: if you have lots of images, TinyPNG lets you compress up to 20 images at once.

Choosing the Right File Format

Different formats work better for different types of images:

JPEG: Best for photographs and images with lots of colours. Use quality settings between 80-90% for the best balance of file size and quality.

PNG: Perfect for images with text, logos, or transparent backgrounds. File sizes are larger than JPEG but quality is lossless.

WebP: Newer format that's smaller than both JPEG and PNG whilst maintaining quality. Squarespace supports WebP, so use it when possible.

Uploading Optimised Images to Squarespace

Once your images are properly sized and compressed:

Step 1: Rename your file with a descriptive name that includes relevant keywords. Instead of "IMG_1234.jpg", use "red-leather-handbag.jpg".

Step 2: In Squarespace, drag and drop your image or use the upload button.

Step 3: Add alt text that describes what's in the image. This helps with SEO and accessibility.

Step 4: Check how your image looks on both desktop and mobile views.

Roll your sleeves up and check your current images using Squarespace's Asset Library. Look for any files over 1MB – these are prime candidates for optimisation.

Practice

Pick three images from your current Squarespace site or images you plan to use. Run them through this optimisation process:

1. Check their current file sizes in the Asset Library
2. Resize them to appropriate dimensions using Canva or Photoshop
3. Compress them using TinyPNG
4. Re-upload them and compare the loading speed

Note the difference in file sizes and how much faster your pages load. This exercise shows you the real impact of proper image optimisation.

FAQs

What's the maximum file size I should upload to Squarespace?
Keep individual images under 500KB when possible. Squarespace allows up to 20MB per file, but that will seriously slow your site down.

Does Squarespace automatically compress images?
Squarespace does some automatic optimisation, but it works much better when you upload properly sized images to begin with. Don't rely on Squarespace to fix oversized images.

Can I optimise images after uploading them to Squarespace?
You can use Squarespace's built-in image editor to crop and adjust images, but you can't reduce file sizes significantly. It's better to optimise before uploading.

What happens if I upload really large images?
Squarespace will resize them automatically, but visitors still have to download the original large file first. This slows your site down and uses more bandwidth.

Jargon Buster

Compression: Reducing an image's file size whilst trying to keep it looking the same quality.

Dimensions: The width and height of an image measured in pixels.

Alt text: A short description of an image that screen readers use and search engines see when they can't load the image.

WebP: A modern image format that creates smaller files than JPEG or PNG whilst maintaining quality.

Asset Library: Squarespace's storage area where all your uploaded images, videos, and files are kept.

Wrap-up

You now know how to prepare images properly before uploading them to Squarespace. This isn't glamorous work, but it makes a huge difference to how fast your site loads and how well it performs in search results.

The key points to remember: resize your images to the right dimensions first, compress them to reduce file size, choose the right format for each type of image, and use descriptive filenames and alt text.

Make image optimisation part of your regular workflow. Every image you add should go through this process. Your visitors will have a better experience, and search engines will rank your site more favourably.

Joun Pixelhaze for free and gain access to courses, plugins and discounts.

Next, you'll learn how to monitor your site's performance and identify any remaining speed issues that might be holding you back.

https://www.pixelhaze.academy/membership