How to choose images for your Squarespace website design
Squarespace does make it easy to get a nice-looking website up and running in a relatively short amount of time. The platform provides the framework, but how you fill those spaces is crucial to making your website look professional.
If you can, get a professional photographer to take a set of photos specifically for your website and brand. The cost is well worth it as you should have a set of materials to use in your marketing material, social media properties and other needs beyond your website.
The professional photographer will provide you with a consistency and cohesiveness that cannot be matched.
The professional photographer will provide a quality level that pays off in the long run.
The professional photographer will deliver output that is unique.
Depending on where you live, an investment between $500 to $3,000 USD is to be expected depending on the duration of the shoot and the experience and credentials of the photographer. I am up for a new shoot myself and the ones Melissa Blemur took for me are now a few years old and could use an update.
How to build a shot list
As much as I shy away from wanting to have my photo taken and for images of me to be the backbone of the brand, I will submit to having shots of me to use for work. In this day and age, we all need to get over that hesitation.
Headshots: These are images used for the about page, your LinkedIn profile. Be your natural self. If you are buttoned-up go suited. If you are more casual at work, choose an appropriate look. Your headshots are typically taken from the waist up. As always, lean on your photographer for advice.
Detail shots: Have your photographer take detail shots such as you writing in a notepad, or whatever actions you might take during a typical work day. These can be used from various spaces on the website.
Location shots: Take wider shots of your office or work environment. For example, if you are a metalsmith, get plenty of shots of your studio with you in it and empty.
Also make sure your photographer takes plenty of landscape (horizontal) orientation photos along with portrait (vertical) oriented photos. Landscape photos work more easily as large full bleed banner images on a website, especially on desktop versions.
Be sure to change your outfit more often than you think. This will provide the illusion that not all the shots were taken in a single session. If you do happen to wear the same outfit all the day, like a uniform, that is the exception.
How most professional photographers work
In most cases the photographer will change by the length of time (half day vs. full day) and send his or her client a batch of unedited proofs to pick from for final editing. The process can take up to a month, so make sure your turnaround expectations are met ahead of time.
If you don’t have professional images…
The truth is most stock images are too contrived. But given how many stock images are available there are many good ones to choose from. Squarespace offers images for free directly from Unsplash.com and you can upload them directly to your site. I have an account with Adobe Stock and it offers a wide variety of photos that may suit your needs.
I don’t recommend stock images if you have a business with a physical location. To first-time visitors to your location, it would be off-putting if the images on your website did not resemble your office or retail space. Go and invest in professional photos for your location-based business.
But if you can use stock images, get very specific in your searches and never ever use other people’s images that you can steal from a website. It’s totally unethical.
Choose a certain style and stick with it
When choosing stock images, make sure they are similar in type as far as lighting and style. Don’t use stock images that combine graphics with photography. They generally just look unrealistic. Look for images that are more in journalistic style. Avoid fake-looking smiles, arms-crossed suits and overly posed shots.
You can also run all your photos through a photo filtering software like PicMonkey to provide an effect that provides a certain cohesiveness to the look of your site.
File size
Make sure your images are not too big or too small. Over 3,000 pixels widths for wide banner images and at least 500 pixels in width for images used on the interior of sections within your Squarespace section. These are very general guidelines, but whatever you do, never use an image that’s too small and looks blurry.
I use an app called JpegMini that compresses images just enough to still load quickly but not lose visual quality.
Cropping and focal points
Did you know you can crop and edit a photo inside of your Squarespace site? Just click on an image and click edit and you adjust your images with basic editing tools. It saves the new version in your media library and keeps the original image too. Wait, media library? What’s that? Your Squarespace Media Library is not perfect as it needs better sorting, but it’s there. You can use any image that has already been uploaded to the site. When choosing an image click on choose from Media Library to access this feature.
What about using icons on your Squarespace website?
Icons or symbols to represent services or other elements of your business are popular. I use them on my business website. But proceed with caution. They can be cliche and don’t use them in a scale that is too big. Icons should be subtle and are better if they are custom made as opposed to stock from a site such as Noun Project. Choose a set that is similar in style, whether that’s thin or thick lines, detailed or simple.
How use image blocks in Squarespace
Another design element to consider is when to use image blocks as standalone items, or when to combine them with text with image blocks styles. Image blocks styles allow you to place text on top of our next to images in a manner where the text lines up with the dimensions of the image.
I use the Card format (selected when you click on the Image and choose a design) a lot because it is simple and clean. Text appears right next to your image and you can place a call-to-action button within that Image Block. Overlap and Collage are nice options too for a visual effect where the text section covers part of the image.
When do you use Image Blocks vs. Text Blocks with a separate image block? I choose a separate text block when the amount of copy is longer and can’t be contained within the Image Block neatly. If I have a large chunk of copy, I will use regular Inline Image blocks interspersed within the body of copy to break it up and make it easier to read.
Images on mobile devices with Squarespace
By default, Squarespace does a great job of rendering your website in mobile view. Banner images stretch to fit a container that is vertically oriented, befitting if you are looking at your phone internet browser with the standard vertical viewing mode. What you can do to make your images shine on mobile devices is to adjust the Focal Point of your banner images.
The Focal Point adjustment can be found in the image editor. There is a small white circle in the middle of the image. You can drag and drop that white circle to a location on your image that you want the viewer to focus on. So, for example, if a face of a person is cut off from your standard mobile view, you can move the focal point closer to the subject matter’s eyes and nose and your image will show his or her face on your website while viewing mobile.
Otherwise, use the mobile preview setting at the top of your Squarespace editor to preview your site in mobile and determine if the images of your site stack up correctly.
How to use captions on your Squarespace website
Using captions really helps keep your copy contained within your image block. If you have a page of team members for example, I like to keep the bio as a caption not as a text block underneath the image. This allows you to drag an entire block of image and copy to a new location, useful if you are hiring or losing employees on a fairly regular basis.Captions allow for the variety of text formatting options available in a standard text block in Squarespace 7.1, a shift that allows for a lot more versatility in using image blocks.
What do your images convey?
Thematically, consider what the images on your site convey. One of my favorite Squarespace sites I’ve designed was for a medical malpractice law firm in which the photos did a majority of the storytelling work. Medical malpractice law is a serious business often involving severe medical mishaps. How was it possible to show that the members of this law firm are warm and welcoming? The photographer did an excellent job of conveying the smiles and friendly demeanor of the team when appropriate—at their desk working or talking with colleagues. There were no smiles involved when it came down to shots of the lawyers looking at legal documents and medical evidence, the serious matters.
Photographs that look natural and authentic work. Professional photographers can make magic happen as they’ve built a lifetime of experience shooting for business purposes. It’s best to avoid wedding photographers who say they are able to shoot business photos, for the most part. Look for a photographer who has experience shooting editorial style images.
Radiate positivity whenever possible on your website. In addition to avoiding negative language (as in what you aren’t), don’t allow negative images to make it into your website as you want your prospects to aspire to whatever your business is selling. There are always exceptions, but for the most part you want a cohesive look that projects confidence.
If you do use stock images, here are some tips
I’m not against stock photography. I use it on my site. The key is to search specifically for the images you need. Broad searches are OK to start with, but be sure to further refine your search to improve your results, just like when you are Googling. The top stock image services, such as iStock, Adobe, Getty, all have a massive library of images to choose from. We are fortunate to have access to such a wide range of photographs for even the most niche topics.
I once designed a site for a scientific research group that studied a specific type of reindeer. I was able to search by the keyword provided by the client and found photographs that were true to his work.
Have fun and experiment
Another tip: You can download a free lower resolution, watermarked version of a stock image so you can try it out on your site before committing to purchasing the high-quality version. Part of designing is trying things and testing to see if they work on your Squarespace website.
Sometimes you may choose to reorder images on a page to show a particular progression of a narrative. Storytelling is crucial to creating a website that has meaning behind it. I’ll write a whole post on what that means, but in the context of this article, choose images that help tell a beginning, middle and end to your brand story. If you want to dig deeper into that subject, I suggest reading Donald Miller’s book “Building a Brand Story.”
There are enough images to choose from to allow you to be picky. Being picky is key. Look over every detail of the photos you select and much sure they align with your brand identity.
