WHAT SIZE SHOULD I DISPLAY IMAGES ON MY WEBSITE?
Uploading the correct size images to your website will make a difference to your website load time and could quiet possible make a difference to the amount of users that stay on your website, rather than clicking off whilst they wait for your images to appear. In the video below I talk about the right sizing you should apply to your images for height and width, as well as file sizing. For a brief low-down on sizing I have added some extra info below the video for reference.
This video applies to Squarespace Version 7 and Squarespace Version 7.1. Published 2 October 2019.
A bit of a summary on image sizes for web…
Large Banner Images:
Width no larger than 2500 pixels
File size around 300KB, no larger than 500KB
Medium Images:
Width/height 1000 pixels
File size 100-200KB
Small Images:
Width/height 500 pixels or less
File size 50-100KB
Background Colour Banner Images (Squarespace V7):
Width/height 5-10 pixels
File size around 5KB or less
Resizing an image on a Mac Computer
There is a simple way to change the size of your image using the ‘Preview’ app that comes standard on all Mac computers.
How to resize an image using Preview:
Double click your image to open it in Preview
If the default program isn’t Preview then hold down the control button, click the image and then select ‘Open with’ select ‘Preview’
Next click ‘Tools’ and then ‘Adjust Size’
Change the width of the image until the image size is as per the image sizing guide above.
Resolution should always be 72 pixels/inch.
This video is part of a series called ‘Website Wednesdays’ that is published on my IGTV channel (@joannetapodicreative) on Instagram, and then re-shared on my YouTube channel. If you have any questions relating to Squarespace or website content please put them in the comments section below and I will answer them in a future episode of Website Wednesdays. Did you find this information useful? I would love to hear your feedback, please feel free to comment below.