Using images on Squarespace
The images we use on our website can be as important as the words when it comes to communicating our message. It’s worth spending a couple of hours reading up, and watching videos, on how to use images on Squarespace in their brilliant support pages. But I thought I would gather up some of the top tips here as a quick intro or refresher.
Squarespace Video Series: All About Images
Real images vs professional ones
Amateur photos will make you look, well, amateur. Good quality pictures are a must and luckily there are lots of free quality stock photos out there. But are stock photos good enough? I read somewhere that people are 40% more likely to see you as trustworthy if you use real photos of your business. I’ve no reference for the quote, but it makes sense doesn’t it?
So the best option has to be photos that are real and professional. If your budget can stretch this far, hire someone to take pictures for you. You can always mix them up with more abstract stock images, like Sonas Health Foods did, to great effect.
My favourite place for stock photos is Unsplash, and they’re now integrated into your Squarespace site. If you open an image block you’ll have the option of uploading an image from your computer or searching directly on Unsplash. Though be warned, your images won’t be exclusive to you, you’ll probably see them elsewhere too.
On this site, I’ve used stock photos as I wanted some abstract images to use as part of the design. If you are going to use stock photos the images need to ‘hang together’ in some way. You could look for certain colours or themes. One tip is to choose images from just one photographer, as I did here. A bonus was that I was able to credit her in my footer and thank her for making her images available on Unsplash.
Formatting images article - Squarespace
You’ll find all the info you need in the article above. But there are a few things worth keeping in your head, or at least close to hand -
Image files have to be one of the following - .jpg .gif .png
The largest dimension for an image should be 2500px
If using an image as a banner, across a whole page, make sure the width is 2500px, not less.
All images should be less than 500KB, a larger size will slow your site down
Images and SEO
Adding Alt Text to Images - Squarespace
When you add an image to your site you also have the opportunity to add searchable content. The little google robots can’t see your image of a cute kitten, or the ‘hats for cats’ that you sell on your site, but you can tell them what the picture is.
File name: instead of uploading a file called IMG567.jpg change the file name to kitten-in-hat.jpg before you upload it.
Alt text: if you have changed your file name then when you upload your file you’ll see it is called kitten-in-hat.jpg, you can then edit this to 'kitten in hat’. Alt text isn’t primarily there for SEO, it’s there for people who are visually impaired and might be using a screen reader, so make your description as helpful and relevant as possible.
Caption: You’ll have the option of adding a caption, this comes up as default. If you don’t want captions, then, in the design tab you can choose to hide the caption, but add one first, then hide it. It becomes another bit of searchable info.
Image Blocks overview - Squarespace
When you add an Image Block to your site you’ll have numerous design options. You’ll find some of them in the design tab on each image block, you can choose from Poster, Collage and more. You can also make other design choices, like whether to have the image to the right or left of the text.
Then there are a whole set of options, which are part of your overall site design settings. You’ll find these in the main menu, under ‘Design’. Here you can change the font, colours etc.
This is a poster block
This is a card block
You can alter all the design settings in the design tab
This is an overlap block
Same as the card but with overlapping text
This is a collage block
Change the colour in settings
Using Spacer Blocks - Squarespace
Probably the most important of all the blocks we use on the site is the spacer block. Yep, the all important empty space. If you sit an image next to another block, like a text block, they will between them fill the space. You can grab the text block and drag it so it becomes larger and the image will become smaller, or vice versa.
But say you have an image on it’s own and you just want to move it to the left, you’ll want to just drag and drop, but that doesn’t work. What you have to do is create some empty space and place it next to the image. Then you can easily resize teh space and the image in relation to each other. Watch this little video below to see how it is done.
Adding a banner image - Squarespace
You may want to add banner images to your site. They appear at the top of the page and take up the full width of the site, you can overlay them with text. Choosing a good banner image is a little different to finding good images in general. With other images on your site the whole image will be displayed no matter what size screen it’s viewed on. With banner images they will be cropped to fit the screen.
If you’ve got parallax scrolling on your site then as you scroll down the page the image moves slower than the content. This gives the effect of depth, you can see it in action on the main pages of this site. It means that some of the image is concealed as you scroll. It works well with images that are more abstract or spacious.
To add a banner image go to the Main Menu > Pages > and then click on the ‘settings wheel’ of the page that you want to add a banner to. Take a look at the Squarespace article above to find out how to size and edit your image.
As usual there is always more to say! But hopefully these tips will get you started on adding or changing the images on your site.