How to resize your images for your Squarespace website
There's no doubt that Squarespace treats images beautifully and showcases them so well on your website. However, you need to make sure you get a few things right before you upload your images, which will make life easier later on. Nothing too onerous! But it’s good to get into a routine of remembering which size your images should be so that you can have all of that ready in advance. And if you’re going to be providing images to a Squarespace designer when they build your website, they’ll love you for getting super organised from the start!
So this is a pretty snappy post, giving you just what you need to know about image sizes for Squarespace. Shall we start?
1. File types
Save your images as .jpg, .png or .gif files
2. File name
There are certain characters you can’t use in a file name anyway (apart from letters and numbers you can only use hyphens and underscores - no other punctuation characters). But don't upload your images with names like x_123-dgf.jpg because whilst this may be perfectly logical for your camera or iPhone, it doesn't help you in Google's eyes!
So save your image file with a logical name so that 1) you can easily find it again and recognise the name, and more importantly 2) you can make it useful for SEO. Put a couple of keywords in the file name and this will be another step towards better SEO for your website.
3. File size
Images that you upload to Squarespace should be less than 500 kb. This is to help your site load faster - you don’t want your text showing up and your images eventually appearing 30 seconds later!
To check file size - on a Mac:
- open the image in Preview.
- Click Tools > Show Inspector. You will then be able to see details about the image including its dimensions and file size.
To reduce the file size, see below!
4. Image size
Squarespace recommends uploading images with a width of between 1500 and 2500 pixels. I tend to go for 1000-1500 pixels width for standard images and 2000-2500 pixels wide for banner images.
Squarespace will cleverly reformat your images for whichever part of your website they are going to be used but don’t start out with anything too small. If a too-small image is then resized (or stretched) by Squarespace it could look pixelated or blurry. This is more likely to happen if you upload an image that is less than 1500 pixels wide.
5. Image resolution
For use on screen a resolution of 72 dpi or 144/150 dpi is fine. You only have to worry about a higher resolution when it comes to print and then you should make sure your images are a resolution of 300 dpi.
6. Aspect ratio
It is best to be consistent with the aspect ratio across all of your images that you plan to upload to your site. So this means the ratio between the width and height of the image - the easiest to demonstrate being 1:1 which is square (ie the ratio of the height and width is the same). Other ratios that you might see are 3:4 (a vertical image), 3:2 (horizontal). Just imagine drawing a rectangle that is 3 cm across and 2 cm high, or 3 cm across and 4 cm high. That’s how aspect ratio works and if you reduce one dimension by say half, you must reduce the other by the same amount.
When you add your images on to your web page in Squarespace (for example in an image block or gallery block) you need to ensure that you choose the same aspect ratio that your image has. This will make it display properly.
If you need to reduce image sizes here's how you do it:
- On a Mac, open the image in Preview
- Click Tools > Adjust Size
- Change the Width to, say 1500, which will automatically change the Height too (as long as Scale Proportionally is ticked)
- You can also adjust the Resolution
- At the bottom you’ll see the Resulting Size. If it is 500kb or less you’re good to go. If not then see below about compressing images.
You can also use all sorts of online apps, such as Picmonkey, to reduce the dimensions of your images.
How to compress file sizes
If reducing the image size does not have enough of an effect and your image file is still larger than 500kb, you can compress the file without losing quality. Here's how I do it:
- Go to www.tinypng.com
- Upload your image file (it can be .jpg or.png) and it will automatically start to compress
- When done, it will show you how much the file size has been reduced
- Click download to save your compressed image which by this stage should be well under 500kb
- You can upload up to 20 images at once so it can be a pretty quick batching exercise!
- It's best to have a new folder ready to store your compressed image files as once they are downloaded from Tiny PNG they still have the original file name but obviously a much smaller file size!