As a photographer, beautiful imagery on your website is crucial – it sells your work, sells who you are, and helps potential clients envision what their own photography will look like.
Full-width banner images that occupy the entire width of the screen or window have become popular, and for good reason. They help people focus on a ‘hero image', a call to action or a function, they’re an impressive way to display your work, and they draw in the viewer from the second they land on your website. They're easy to upload, but what images should you use? Here are some helpful tips to help you pick the perfect banner image.
Composition and centred subject matter
In Workspace, the maximum height of your banner image is fixed, and the image always takes up the full width of the browser window or mobile screen. The challenge is that you don't know how your visitor will view the image. If they're on computer you won't know the shape of their browser window. On mobile you won't know whether they're holding their device vertically or horizontally. The image just needs to look great no matter what they're doing!
On small screens and narrow browser windows, Workspace will crop the image from the left and right. On wide screens, it may crop from the top to bottom. What all that means is that the core content needs to be in the centre, so it doesn't get cropped out! If there are people in the photograph, for example, try choosing an image where they are small and in the centre.
If that's not making sense, clicking here in your desktop or laptop browser will take you to one of our demo sites. Resize the browser window and you'll see what we mean.
Ensure the content is relevant
Just because an image looks great on a page, doesn’t mean it’s right. If you’re talking about weddings but your photograph is of a puppy, your potential clients’ are going to struggle to envision what their wedding images are going to look like. Choose images that relate!
You may want to add a text overlay to your image, which you can certainly do, but you need to ensure the text stands out and is legible. In most cases, white text will have the best results, but for high key images try using black text. If you need to darken the image slightly for legibility, add an overlay in Photoshop to help the text stand out.
Finally, visitors, today expect high resolution and professional looking images on websites. But remember the larger the photo the longer it will take to load, we recommend resizing the image to 1800px in width and crop to a ratio of 4:1. This will ensure that quality isn’t lost but will load quickly on all devices.
Test, test, test
When you upload a banner image to your site, always remember to test it on all devices – to ensure it looks great across all screen sizes. It only takes a minute or two upload an image, try it out and if necessary upload a new version. For more information on using the Workspace page designer, click here.
Featured imagery by Lauren Anne Photography, Izo Photography, and Cam Grove Photography.