Using images on your Squarespace website
To build an engaging website, it is important to use good quality images that reflect your business and your branding. Once you start noticing high-quality website design, or websites that catch your eye, you will soon realise that the images used are a major part in what makes a website work.
Having well composed, bright, high-quality images will make or break your website. A small number of perfect images is infinitely better than a collection of poorly lit snaps from your phone. In this post, I hope to break down what you should think about when sourcing images for your website and also touch on how these images should be used on your Squarespace website.
Why do you need images on your website?
Websites are visual experiences. Whilst the text on your website is what is going to specifically tell people about what you offer, sell or details about your services, the images are what people are going to connect with first. They will share the essence and vibe of your business quickly and engage the visitor’s interest.
What type of images do you need for your website?
The images that you select should be in line with your business brand guidelines (read more here) whether that is the colour palette used, the style of the images or the content. Number-wise, your web designer is going to say as many as possible, because that gives us lots to work with. But if you've not got a bank of images built up yet I would say for a service business, 10-15 photos would be a good place to start and for a product business, an additional 3 photos of each product.
As for the images themselves, I would recommend having three different categories of images:
Photos of you
This allows people to better get to know the person behind the business and build a personal connection. It will also help your website to stand out and be more memorable to visitors. It's certainly easier to remember a face than a generic stock photo.
Photos of your product (product businesses)
This is fairly self-explanatory if you have an online shop. You should have consistent, high-quality images of the products you sell. If you can't work with a photographer, keep things simple, use plain background and natural light.
Photos of your service being delivered (service businesses)
These are a little more abstract but if you sell a service, you will still need images to add interest and engagement to your website. Think about images of you providing that service, so if you're a dog groomer, images of you in the salon working on a dog!
Lifestyle photos
It's also great to have a bank of more general 'lifestyle' photos. These will include your brand colours and personality and can be used throughout the site to keep people’s attention and to share the vibe of you and your business. These could be your studio, outside shots of the area you are based in, your office space, or the people you work with.
Where to find images for your website?
Next comes the question of where you will source these images. Your options here will be to source either free or paid stock images, to take your own photos or to hire a professional photographer. It’s also possible to do a mixture of all three throughout your site.
Stock Images
The simplest, quickest and most cost-effective place to find images is through free stock galleries. My personal favourites are Unsplash (which can be access directly from the Squarespace builder) and Pexels. Here you will find high quality images that are license free and can be used on your website. My advice here is to spend some time really searching for unique images that reflect your business. As you are using free images, there is a chance they have been used by other businesses on their own marketing materials, but if you are selective, you can build up a collective of unique images.
There are also paid stock image websites which you can use if you are after something very specific. Some to look at here are Adobe Stock and Shutterstock.
DIY
It’s also possible to take photographs for your website yourself. For the first few years of my website being online, I used photos taken using a tripod, automatic timer and my mobile phone! If you plan to DIY, there are many, many tips online but my quickfire advice would be:
Natural daylight is your friend.
A consistent, plain background on your images will give a cohesive look.
Use your best plates and cake stands to add interest to your shots.
Light editing to brighten pictures can really take them to the next level.
I believe less is more on websites. Keep it simple and offer the information that is the most important to your customers. Don't just fill up your site because you can and be selective with high-quality, useful content.
Professional photographer
Working with a professional photographer is a brilliant investment for your business. Understandably, not all businesses can make this investment straight away but if you are a product-based business, it’s something I would recommend prioritising when possible.
Before selecting a photographer to work with, it’s important that you spend time researching who is going to be the best person to showcase your business. If you are getting personal brand photos taken, it’s important that you have a rapport with the photographer. It’s equally important that their style matches your business branding principles.
Related Posts
Using these images on your site
Once you have your photos ready to be used on your website, you must make sure to do a little bit of work on them before uploading. If you are working with a website designer, I would expect that they will take care of this step for you, but it’s worthwhile asking. To ensure your images are as search engine friendly as possible, you want to make sure they are correctly named and sized.
Renaming
Google can only read text, which is true, but it includes the text associated with your images, so the file name. This means should name your images descriptively, including keywords and your business name.
So instead of IMG083618.jpg your images should be named rustic-peach-wedding-bouquet-longlevens-flowers.jpg
Resizing
Your images should be as compressed as possible and no more than 500kb, although ideally, they should be under 250kb. As small as possible without effecting the quality. The ideal pixel size for your images is between 1500px and 2500px, depending on where you are using the image.
To resize images, you can use software such as Photoshop, or your computers default image editor. There are also free online services that can compress large JPG and PNG files, such as Tiny PNG.
Learn more SEO tips here >
Images in Squarespace
Using Asset Library
Squarespace has recently launched a new feature within the platform that can make managing the images you use on your website a bit easier. This is called Asset Library and you will find it in the main menu (on the left-hand side). Once in the Asset Library, you can create folders to organise your images. This could be folders for each page, per product type, by category of image…basically whatever will make it simpler for you to find the images once uploaded.
After you have completed the renaming and resizing steps outlined above, I recommend batch uploading the images you plan to use on your website from the Asset Library and placing them in folders.
Then you can use them throughout your pages by selecting ‘Use Image from Library’ rather than uploading new images each time.
Image alt text in Squarespace
When you add an image to a block within Squarespace, you may have spotted a box called ‘Image Alt Text’. This feature allows you to describe what is in the image to help visually impaired people using screen readers to access the website. You can get some SEO benefits from these descriptions, but I only recommend using keywords here if it’s natural. The priority should be accessibility and accurately explaining what you see in the image.
Different places to use images in Squarespace
Within Squarespace, there are various places you will use images to help add interest, character and life to your pages.
Image blocks
Image blocks are the most common place to use images throughout the site. These can be added to sections and moved around to align with your text, buttons, and other content.
Generally, images being used within blocks can be 1500px wide, which can help keep the file size down, avoiding any impact on page loading speeds.
Backgrounds
Background images are a great way to add some visual definition to different sections within a page. One thing to be careful of when using images as a background is to make sure there is enough ‘white space’ within the image to make sure your text is readable. Another option is to change the opacity of the image to make it brighter or darker, allowing the text to stand out better.
Images used as background do need to be larger to ensure they do not appear pixelated. I recommend 2500px wide.
I hope this guide helps to answer any questions you have about using images on your website. If you’d like help with your website or have any other questions, you can get in touch any time!
