How to optimise images for your Squarespace website
New to Squarespace and wanna try it out? You can sign up for a free trial here << Yes, that’s an affiliate link - thanks for supporting my book obsession, my kindle and I thank you ;)
Before you add any images to your website, there's a little bit of prep work you need to do to make sure your images are optimised for your website.
Optimising your images for your website takes a little upfront work, but ultimately saves you time and helps with your SEO down the track. So in this post I'm going to go over a few things you should know and be doing before you upload any photo to Squarespace.
What is 'optimising'?
Optimising basically means formatting your images so that they will display in the best possible way on your website. This means using the correct file types, files sizes, image resolution and aspect ratios etc.
Plus making sure that you're adhering to best practices for SEO (search engine optimisation). Making sure that your website loads quickly and easily, is a ranking factor in Google's algorithm. Plus it makes it a better experience for your website visitors.
File Format/ Type
The most common file types are: jpg, png or gif.
Jpg files are recommended for photos and images except if there is a transparent background. If you have an image with a transparent background then you'll need to use a png file otherwise it won't show up as transparent but will have a solid background colour.
File Size
Making sure that your image size isn't too big is one of the most important elements of website design.
In order for your website to load images quickly (a ranking factor for Google) you need to aim to have all your image sizes below 500kb.
If your image files sizes are too large, they will take forever to load on the page and this creates a bad user experience for your website viewers.
No one is going to stick around to wait 30 seconds for your images to load. They'll bounce straight out of there before they even see them.
To make sure your images are sized correctly you'll need to adjust the image width and compress your photos. I've covered those topics in more detail below.
File Name
Having a randomly generated file name like 'image34579509' or filing it with random letters and characters is an SEO no no.
Google uses your file name to help them understand what the picture is. They can't 'see' what your photo is so they rely on the file name and alt text to 'tell' them what the photo is.
Best Practices:
Keep the file name short and use hyphens between words eg: image-seo-for-Squarespace
Add 'relevant' keywords to the file name for SEO. Don't keyword stuff or give it a name that doesn't make sense
Add all your file names before you upload them to Squarespace as this will save you time, plus make it easier if you have to re-add an image later (you won't have to remember your previous file name)
Note: Squarespace allows you to use only letters, numbers, underscores, and hyphens in file names.
Image Width
Squarespace recommends that your images be 2500px on the longest side. This is the optimal size for their websites.
Squarespace will then take that image and resize it for different formats. Think different computer screens sizes as well as for mobile and tablet etc.
It's also best not to go under 1500px as Squarespace says that those images may appear blurry.
They also have different recommended sizes for things like adding a logo, favicon (browser icon), gifs etc so make sure to take note of those recommendations when you go to upload them.
But for your main website image banners and on page images - stick to the above recommended size.
Image Resolution
If you only need to use the image on your website then 72, 144 or 150 dpi will be fine. This will help reduce your file size without compromising quality for your website.
However, this isn't the same requirement for printing. You need a much higher dpi for optimal printing - 300 dpi is recommended.
Aspect Ratio
Aspect ratio relates to the width and height of the image. If you're adding multiple images to your website, it's a good idea for them to be consistent in their sizing.
That means they should all be the same aspect ratio (width and height) as each other.
So if you want all your images to be square in shape, then your aspect ratio will be 1:1. That means that every side will have the same width eg. 1500px
This will make sure that your design looks consistent and flows well from one page to another.
How to change your image size
If you have a Mac computer you can do this easily using Preview.
Open your photo in the Preview application
Select tools
Adjust size
That will open a pop up window where you can choose the width, height and resolution of your image.
I usually adjust the resolution and the pixels on the longest side only (e.g. if it's a landscape image then I'll adjust the width, if it's a portrait then I'll adjust the height).
NOTE: Make sure to keep the 'Scale Proportionally' box ticked so that your image doesn't squish into a weird size.
Once you've adjusted any of the properties then it will automatically calculate the file size of your image for you to see. Don't worry if it's still larger than 500kb, there's still one more step to reduce the file size.
Compressing your images
After changing your image size and aspect ratio, your file size might still be over 500kb. If that's the case then you'll also need to compress your image before uploading it to Squarespace.
If you use a good image compressor, then compressing your image reduces the file size without compromising the quality.
The best free option I use is TinyJPG
Head to https://tinyjpg.com
Upload your photos or drag & drop them on the page (you can only add 20 at a time. If you have more just open another window and add them there)
The files start to compress automatically, once they have completed you'll be able to see the new file size on the right
Download the photos: Individually - click the download button to the right of each image.
All Together - click the 'Download All' button at the bottom underneath the images
Open your download folder, access your compressed images and save them. They'll have the same file name as the parent images but will have a smaller file size for you to use on your website.
Alt Text
Alt text is text you add to your images, after you've uploaded them to Squarespace, to make them more accessible. It's used for assistive screen readers and browsers and is used by the visually impaired.
It's also used if an image can't be loaded. In that case, then the alt text may be displayed instead.
Alt text is used to describe what the image looks like. Plus search engines also use alt text to determine what your images are so it can be utilised for some SEO benefits too.
Make sure to use short, readable terms to describe what the image is eg 'book cover for Sunkissed Days novel by Jane Doe', Sunkissed Days book cover with man hugging a woman etc.
Don't keyword stuff them. Google penalises this practice. Stick to making them descriptive for screen readers and add in relevant keywords if it's natural to do so.
Now you're ready to add all of your images to Squarespace!! Woohoo!!
Making sure that this is all taken care of in advance will save you a lot of time during this process - trust me! Instead of doing this individually every time you add a photo you can batch process and get it all done faster :)
And if you need some extra design help - check out my Squarespace website templates. These pre-designed websites will enable you to quickly and easily set up your own website. All you need to do is add your own content :)
LIKE THIS POST - THEN YOU’LL ALSO LOVE…
Have I made you curious? You can sign up for a free Squarespace trial here << Yes, that’s an affiliate link - thanks for supporting my book obsession, my kindle and I thank you ;)
