How to Optimise Website Images for Your Squarespace Website
Optimising website images on your Squarespace website is one of the easiest things you can do to rank higher in search engine results.
By optimising website images for file size and SEO, you can speed up your website loading speed, create better engagement and improve your chances of ranking higher in search results.
Why is this important?
If your website takes too long to load, people will click off before they have even seen the first page. Furthermore, they are unlikely to return. Having a fast loading website will retain people’s interest.
Your ranking in Google Search results is affected by website loading time. Improving website loading time by optimising your website images could push you significantly higher on Google Search and therefore make your website more likely to be found organically.
How to optimise website images
Check that you are using the correct file type
.JPG (or .JPEG) for photographs. JPG stands for Joint Photographic Experts Group. JPG is a compressed format which is useful for storing photos at a smaller size without compromising image quality.
Example of a photograph on a website.
.PNG for graphics, illustrations or line art. PNG stands for Portable Network Graphics. PNG files support transparent backgrounds, so they are perfect if you have a logo or another graphic that you want to overlay onto a coloured background.
Example of a graphic on a website.
PNG files are larger than JPG files, and uploading them onto your website may slow down loading speed. However, the larger size retains the quality of the graphics, so it is worth using a PNG format for graphics with precise and defined lines.
Read my Ultimate Guide to Image File Formats for Websites for more information.
2. Image Size
Banner images
Banner images extend the full width of your website. They should be 2500px wide. Choosing a landscape image will help save on file size here. If you have chosen a portrait image for a banner, you can crop it to landscape before you use it.
Example of a banner image. It extends the full width of the website.
Non-banner images
Landscape images
If the image is going to take up most of your website width, or if it is going to appear as a pop up and be enlarged, it should be 2000px wide.
Example of a landscape image taking up most of the website width.
Inline images
If the image appears alongside text and will not be enlarged then it should be 1250px wide.
Example of inline images on a website.
Portrait images
Portrait images should be 750px wide.
Example of portrait images on a website.
Resizing images for MAC users
Open your image in Preview
Click on Tools
Click on Adjust Image Size
Set the Width based on the recommendations above
As an additional step, you can set the resolution to 72px/inch
Resizing images for PC users
PC users can use https://bulkresizephotos.com/en to set the width for each image to the recommendations above. Bulk upload your images to save time.
Squarespace recommendations for Image Size
Squarespace recommends that each image be less than 500KB in size, and the total size of all the images on a page should not be more than 5MB.
If the images are still too large after adjusting the width and resolution, you can run your images through a compression. Using TinyPNG for .PNG files and TinyJPG for .JPG files.
3. Naming your images
Search engines can’t “see” the images you use on your website, but they can read the file names. The name you give to each image on your website should be thought out carefully. Search engines will use this information to understand the context of your website, and this can impact your ranking on search results.
This is a great opportunity to work in your keywords, but only if it is relevant to the image. Don’t “keyword stuff” by using the same keywords in the same order more than a few times. Search engines see keyword stuffing as spammy and this could have a negative impact on your rankings.
Use hyphens to separate the words in your image file name. Search engines can read the separate words correctly this way. Don’t use more than 5 words in your image file names, and ensure you name your images before you upload them onto Squarespace.
Example
Good example: wedding-cake-red-roses.jpg
✔️ less than 5 words
✔️ descriptive
✔️ words separated by hyphens
Bad example: 3tieredweddingcakewithvanillabuttercreamandredroses.jpg
❌ too many words
❌ no hyphens to separate words
4. Alt text and how to add it to your Squarespace website
Alt Text, or Alternative Text, is the text that is added to an image. These words are used by people using accessibility accommodations such as screen readers, or these words would appear if the image fails to load.
Search engines use Alt Text as a ranking factor.
Alt Text should be specific and descriptive.
E.g. 3 tiered wedding cake with red roses by Company Name in Essex, UK.
Squarespace has a full support guide on adding Alt Text to images. It goes through how to add Alt Text to gallery images, product images and blog post images.
Optimising Website Images - The Bottom Line
Optimising your website images is essential for both website performance and SEO. By choosing the correct format, resizing the images and compressing them before you upload them to your website you can significantly improve your website loading speed. Giving your image files descriptive names, and incorporating keywords where appropriate, will help search engines to understand your website better. A fast loading time and improved SEO will help your rank higher on search results, which will lead to your website being found organically by your ideal clients.
You can start planning which images you will use on your website with this Homepage Workbook. It gives you some advice on where to put images and what type of images to use in different sections of your homepage.
If you liked this post, you’ll also like:
◇ Styled Stock Society: An Honest Review
◇ The Ultimate Guide to Image File Formats for Websites
↓ Liked this post? Pin it to Pinterest ↓
