The gargantuan guide to website photography
Everyone knows the old proverb “A picture says a thousand words” but is that always the case? Will photography really help your website? There’s a lot to consider but when done well, Yes! Absolutely!
Photos have become a vital aspect of any website; they incite emotion, boost trust, and answer questions all at a glance; it’s no wonder why they’re so widely used.
But are you utilising images to their fullest? In this guide, I’ll introduce you to my own thought process when using photos on websites.
Let’s start by defining the different types of images.
What types of images are there?
You might be surprised to learn that there are several types of images; the somewhat, web standards authority w3c have an overview of each, but we’ll be focusing on the two that commonly use photography as opposed to graphics.
Informative images are used to describe, or convey a message; they can either be shown on their own or alongside descriptive text.
Let’s say we’re explaining how to identify a labradoodle. A photo of our furry friend, combined with a caption outlining their appearance would quickly achieve our goal.
Decorative images are used to enhance the look of a website. They’ll still be relevant to the topic but won’t add new information.
Think of them as generic images that help direct a users focus, break up text or just fill a space.
Let’s say we’re writing about the Dorset population and showed a picture of Shaftesbury’s high street; It’s relevant, but it’s not going to answer any questions.
Which type of photo should I use?
Both have their place and choosing the right type is a matter of context. Think about what you are trying to achieve; Is it to answer a question, or to enhance the experience? Remember that it’s possible to match both types with one photo.
A customer’s perspective
Good use of photography can do a lot for your customers, and it’s important to think about the impact that an image will have on them, and the effect it will have on the website.
Think of it this way, your site is built for your customers; so the imagery should help them to achieve their goals.
Pictures affect emotion a lot more than text ever could and the reason why is simple.
People can relate to photographs more than words.
I did say it was simple; that picture of my Labradoodles earlier, how many of you got a little sense of relief or, cracked a smile when seeing it? (If you didn’t you’re a monster)
How is this useful?
Think about the last time you awkwardly crossed eyes with someone on the street. I’d bet they smiled to avoid tension and can guarantee that you smiled back.
It boosts trust and at least for me, makes my day a little better. Carry that concept to your website.
Let’s have an example. You’re looking to buy a new pillow to help you sleep. Would you go for the product with a photo of a noisy concert or someone snuggly tucked into bed?
It’s the latter, you want to feel relaxed, and if the photography can achieve that, then the product must do the same thing. Right?
The concept can be used in so many different ways, but the general rule of thumb is to show someone or something that triggers the emotion you want. Fair warning though, people are good at spotting stock photography, which can result in the opposite effect.
The behaviour of a customer can also be influenced heavily by photography. Joe Leech a UX strategist; once talked about how he managed to promote honesty from customers filling out an insurance quote form.
If you have the time and are interested in psychology in design, I’d recommend watching the whole video, and his others over on his website.
The general thought process demonstrated in Joe’s video is that people are more likely to be honest if someone is watching, and that’s a learned response. Basically, we’re all children at heart.
If someone’s watching you, you’re less likely to be or do something dishonest
We can go further, the eye direction in a photo can influence where we look, for example, if a picture shows a person looking straight at you, your eyes will be drawn to theirs, whereas if the person’s eyes are looking toward an object, we usually can’t help but focus on the same thing.
eCommerce Product Photography
Now, we know pictures can affect a customer’s emotions and behaviour, but so far we’ve only spoken about decorative images since they don’t answer questions.
When it comes to product photography, you really need a mixture of decorative and informative photos, and they’re usually used in different ways.
Decorative photography is typically used in social media, hero/banner sections on a website or in advertisements; that’s because there is more space to work with and you’re trying to sell the product. You want to incite emotion and convince the customer to purchase.
Informative images are commonly found on list pages, search results and product detail pages, because at that point the customer is looking to buy and will have questions.
To explain how informative images can answer a customer’s questions about a product let’s use an example. So, congratulations everyone, we’re now the proud owners of an online mug selling company.
Our mugs are top of the range and can be branded to our customer’s logo, but now we need to portray as much information to customers as possible; sure we can use text to describe it but who reads on the web?
The things we need to highlight are:
- The mugs can be branded
- The mugs come in sets of 2
- The capacity of the mug is 14oz
Though not a comprehensive list, these are the things people will likely want to know when shopping for a mug; let’s break them down (the points, not the mugs).
Show that mugs can be branded
I don’t know about you but I’ve been on some “brand your own product” websites, and a lot of the time I’m not impressed.
In my experience, they show an example logo to demonstrate it can be branded, and that’s bad; I don’t know if that’s just the logo on the mug or an example by looking at it. The answer is to show a “Your logo here” it’s that simple three words and everyone knows what’s up.
The mugs come in sets of two
We’ve all been there, you’re looking for a product, and the title is “Set of the product name”; but fails to specify how many are in the set. The first point of call for anyone is going to be the image; if the photo shows two we instinctively decide it’s a set of two; if there’s four then a set of four etc.
Basically, use a photo that shows how many are in a purchase. Avoid showing more than what’s being sold per purchase, as that’s a fast way to confuse and frustrate your customers.
The capacity of the mug is 14oz
Demonstrating the size or capacity of a product is never easy in 2D, without depth it can be hard to decide on somethings height, width or length; so you might be thinking that showing size isn’t accurately possible; and yes, a photograph on its own would struggle, but we live in a world with photoshop.
Adding dimensions to images is relatively easy, just a faint line with some text on it; sometimes it doesn’t look stunning, but it gets the job done and means your customer can avoid reading for a few seconds longer.
In this scenario, it would be a case of using a secondary image, so you don’t clutter up the main one. Remember it’s unlikely your website will only allow one image per product.
I know that our example might not encompass all business types, but the same principle can be used, think about, or better yet ask your customer what questions they have when looking at your products, then find ways to answer them with photography.
If I’m buying a car, I’m going to want to know how many gears it has, if it’s left or right drive. Is there a USB port? In my case is there a tape player? All these things can be answered by having an interior shot of the car, but avoid photos that are so zoomed in that it becomes difficult to know where it is.
Product photography summary
I’d recommend having around three or four different photos for your products.
- A decorative shot that draws people’s attention, for adverts or banners
- A clear shot that highlights what the customer is purchasing
- A detailed shot that shows the more delicate details (such as quality, size, etc.)
- A few images of different perspectives (front, side, back, etc.)
- If you have multiple variations (colours, sizes etc.) have pictures for each.
- *Bonus* 3D photography can be used online and adds a little more engagement.
Photography for service-based businesses
Obviously, not every company is eCommerce, so a slightly different approach to photography is needed; you’re not going to be highlighting your product, hell, most of the time your customers don’t understand what you’re doing anyway.
Instead, you need to focus on your business and staff. I know no one likes having their photo taken, but it’s a handy tool for building trust and excitement to work with you.
Let’s think from a customers perspective. So, you’ve had the misfortune of your car breaking down. Luckily you’re at home and can do some research on local garages.
Looking at the top two results on google you see:
The first result has photos of their building and stock photography of people.
It’s always nice to see a picture of the building, it helps later on when I need to find them, but stock photography isn’t as helpful. Sure it shows a smiling person doing something technical, but it’s not a real-world representation of the business. I don’t learn anything about the company from it, in fact, its only purpose is decorative.
The second result has photos of their staff in uniform with happy faces.
We already know that happy pictures can make people happy; but now we have photographs of real people, looking like they enjoy their jobs, are friendly and willing to help; best of all they have branded shirts clearly showing they work at the company.
This boosts a customers confidence in a few ways, but most importantly it shows that you as a business are confident; I mean you’ve put your face on it; you’re not afraid to be seen as a part of the company.
So be sure to remember:
- Have photos of happy people working
- Use your real staff and not random people or stock photos
- Have a building shot but focus on your team
Where to get photography
We’ve discussed the different types of images, and know what we need, to use them effectively, but how do we find the photos that will work on our website?
There are two primary sources of photography. Stock, or Professional.
Based on what I’ve said so far, you might be thinking that stock isn’t the way to go, and generally, that would be correct; however, there are times when it comes in handy.
For example, you can use stock photography to add a decorative feel to advertisements, just like our pillows from earlier, quick social media posts on Facebook and Twitter is also an excellent time to use them.
Basically, stock photography is good for the quick, indirect selling aspects of your business or for adding a little depth to advertisements. Just try and avoid using them for front-facing portions of your website, like service, about or homepages and you should be fine.
Hire a Professional Photographer
The second option is to hire a photographer, many of you might be thinking “Great, one more expense to deal with”; and I can understand why, but remember the photos that you get from the shoot can be the difference between making a sale or not.
75% of Online Shoppers rely on product photos when deciding on a potential purchase.
Finding the right photographer for you
With so many photographers out there it can be challenging to find the one that fits you best, but it’s not as hard, or long-winded as you might think; I’ll breakdown how you can find a photographer that produces excellent results that match your brand expertly.
To start, we’ll need to find out which photographers in your area will do the types of photos you want. For our situation let’s assume we want some product photography, so, we’ll do a Google search for “Product Photography Dorset” and we’ll quickly see over 9 million results; but let’s be honest no one ever goes past page 2. Right?
How to choose your photographer
Now, we have a list of photographers but which to choose?
There are a handful of things you’re going to want to look for, consisting mostly of:
- Previous work
- The Photographers personality
- The Price
I’ve listed them in that order for a reason, and that’s because not only should that be your priority, but that’s likely the only way you’re going to be able to decide; let me explain.
Just like web design, it’s rare to see a fixed price associated with photography, after all no two projects are the same; you might get a starting price, but even that isn’t a guarantee. So, narrowing it down by price won’t be possible and to be honest that’s a good thing.
Secondly, it’s hard to gauge someone’s personality by a photo, or by the way they write on their website; so, you’ll have to wait until you talk to them to learn what they’re like as a person.
The last option and our starting point are to look at their previous work, it’s usually called a “portfolio”, and you’ll be searching for pictures that are similar to the style you like and want.
Making contact with your shortlisted photographers
You’ve looked through the photographer’s portfolio, noticed that they do exactly what you want and now it’s time to get in touch, but before you ask for a price, explain what you’re looking for.
For our example eCommerce website where we’re looking for product photography then we’ll detail:
- Our business and products
- The type(s) of pictures we’d like (With links to examples)
- How many products we need to be photographed
- And above all, we’ll try and start a general chat
Likewise, if we’re looking for service photography we’d explain roughly the same things; but the most critical thing is that “Try and start a general chat”.
Photography is essential, and consistency is critical, it’s not a one and done deal, and you’ll likely need more taken later on, so it’s imperative to find someone you get along with.
Scatter general conversations into your emails, while continuing to plan your project. The photographer will likely go along with you, and you’ll be able to better judge their character. It’s a win, win.
They’ll ask you questions about your products, the space available, where you are, lighting, and of course, about a budget; just be honest and understanding.
If your budgets too low, and you’ve managed to make them like you, you might get a discount; but don’t try and push it. Photography isn’t just taking a few snaps, and it’s done there’s a lot of very time-consuming tasks which you’ll only see around a third of; so try to be fair.
Don’t limit yourself to talking with one at a time, make a list of photographers you like and get in touch. That way if one falls through you don’t have to start again, and remember that it’s not uncommon to meet face-to-face at least once before the shoot to verify and prepare everything; use that opportunity to double confirm that you like them.
For those wondering a photographer will usually charge around £100-£500 a day, depending on where you are and the styles you’re after. It’s worth it.
I’ve got a photographer, What’s next?
Great, your newly acquired friend will walk you through their own process, and you’ll be able to discuss what will work best for you; but a few things that will help make you the best client ever, are:
- Be prepared. Nothing is worse for a photographer than turning up to a shoot and the client not having things ready. Write a list of the products you’d like photographed, and have them laid out ready. If there’s packaging, remove it beforehand.
- Be understanding. If things take longer than expected then don’t get frustrated, time is fickle and the estimate they gave you, is just that, an estimate.
- Be Friendly. Spending a day in a room taking pictures of objects can be tiring so offer tea and coffee occasionally.
After your photographer has finished taking the photos their real work begins, that’s right they’ve now got potentially hundreds, if not thousands of images which they will look through, find the best ones and edit to make them perfect.
Preparing them for your website
Your photographer’s come back with some smashing imagery, and you’re ready to add them to the site, but before you jump too far ahead, there are some things you need to know.
The images that you received are likely massive, both in dimensions and file size which is great for print but not so much for websites.
You’ll suffer slow loading times and an enormous drop in conversions as a result of large file sizes. We’ll fix that and try to get our image file sizes to 300kb or less.
The first thing to do is get in touch with your web developers, and find out what image dimensions your website uses; this will likely be in pixel value, (width x height).
Once they’ve come back, and you know what dimensions you need, it’s time to start editing; don’t worry it’s not as hard as you think, in fact, there are plenty of tools to make the process a breeze.
When looking to crop a lot of images; I like to use a tool called BRIME. It lets you upload most if not all of your photos, set the width, height ratio and then allows you to choose the focal point within each image. That’s not all though as it will also let you select the image quality, which for web 80% will usually be suitable.
Sometimes, resizing isn’t enough to get us below the 300kb target, and that’s where ShortPixel comes in, with this tool you can upload up to 50 pictures and have them automatically compressed. Just be sure to select “Lossless” or the quality will suffer.
There are plenty of other tools to optimise images, but ShortPixel is currently my favourite.
Some of the other image compression tools
Use the correct file formats.
One common mistake is using the wrong formats for images, trust me it can have a significant impact on file sizes and load times; here’s a breakdown of what to use and when.
PNG for images that have transparent backgrounds; they will have a bigger file size.
JPG for images with a background, e.g. textures, coloured, even white.
GIF for nothing, never ever use GIFs, if you want it animated use an MP4 instead.
A bonus option is to use WebP a new format currently only supported by Chrome, Opera and the latest version of Edge, FireFox is planning to implement them soon (yay).
What WebP does is compress images with a much better algorithm, meaning that file sizes are even smaller, and best of all you can quite easily support it today, but that’s a little too complex to go into here’s so point your developers to this blog post and let them deal with it.
Search Engine Optimisation
Our images are crisp, and a cool 300kb file size, what’s next? Well, we need to make them search engine friendly to help ensure that not only the image is found, but also the web pages that they are added to.
The images you’ve been working with will likely still have a generated name, something like “img_0192”, not exactly friendly for us or for computers. Rename any and all images that you use on your website to something a little more readable; be descriptive but straightforward and use some keywords.
For example, going back to our branded mugs from earlier, we might name a yellow mug “yellow-14oz-branded-mug”. With a name like that you’ve hit all the keywords for someone Googling “yellow branded mug”; renaming images isn’t going to suddenly get you to the number one spot, but every little will help.
Use alt text
Alt text is used when a customer’s device has images disabled, or when they’re using a screen reader; basically, it will show, or read the alt text instead of displaying the image.
Use it to describe what the image is showing, but also be a little sneaky and add a keyword or two for search engine optimisation.
A caption is the short amount of text usually below an image, use this as a way to highlight again what the picture is showing or to provide a little more context.
Reduce load times
Load times are vital for search engine optimisation, so be sure that all images the right balance of quality and file size.
Basically, don’t use blurry images, but also make sure they loaded promptly. If you skipped it scroll back up to our Image optimisation section.
Add the images to your sitemap
Another job for your developers. A sitemap is a little like a directory of every page on a website; search engines use the sitemap when indexing your site to ensure that they don’t miss anything. Luckily if you’re using WordPress, with Yoast, this will be done for you.
Add Structured Data
Structured data is a snippet of code that helps search engines understand the content on a page. Google has said that structured data won’t help you rank higher, but it does help to create the rich boxes found on search results. Something like the below.
I recommend letting your developers handle this one as well.
Prepare your website
Not everything is centred around your images, there are plenty of ways your website can be prepared to help with image optimisation and search engine optimisation.
Use responsive images
A relatively new trend is to use responsive images, no that’s not a case of images that merely resize with the screen size. Instead, it’s a little more, you can actually serve a different picture entirely based on the customer’s device resolution.
The benefits to this are that you can serve images at the dimensions that better fit the device. We already know that the dimension of an image can affect the file size, which impacts load time; so it’s best to not use that 1980px wide image for a phone.
This example should show it better than I can explain.
Lazy load images
We’ve talked a lot about file sizes, load times and quality, but what if there’s a lot of pictures on a web page, it’s still going to load slowly; with lazy loading, we can solve the problem (kind of).
Lazy loading images have been around for a while, but with pictures becoming more heavily used online it’s really picked up steam. It works by preventing images from loading until they are directly in front of the customer.
So, when your customer is scrolling down the page your website will be checking for images that are currently in view but haven’t loaded yet, then it loads them. This approach lowers the number of things to download when it’s first loading the page and thus speeds up the site.
Here’s an article on css-tricks.com that explains in a lot more detail, and in a much better way what lazy loading is.
Content Delivery Networks
A content delivery network is a group of web servers that are separated by geography, that all store your website’s assets (like images). The basis for using a content delivery network are that your customers get served your website from the closest server to them, it’s a speed thing.
So if I’m in America, but I’m loading a website from London, then it will be slower than a website served from America. Distance to the web server plays a part in website load times and CDN’s help negate that.
There are a lot of CDN’s out there some specialise in images, and others server any static resource.
Cloudflare is a free to use CDN that doubles as a security blanket, not only will serve your website’s assets like images from the closest one of their servers to your customer but will also protect you from DDOS and other malicious attacks.
Cloudinary is a video and image specific CDN that offers image compression and optimisation as well. It does more by making it possible to serve screen size particular images as well; think back to the “use responsive images” section, but you can also edit the photos too; like adding a watermark, or changing colours. It does a lot okay.
A few things to finish up
We’ve made it, had some laughs and hopefully learned a thing or two; but before I finish up, there are a few things I’d like to add.
This might just be personal preference, but the placement of your image will play a big part of your website, and what I mean by that is avoid using a lot of left, or right aligned images.
This comes from a readability standpoint. If your image is left aligned in one paragraph and right aligned in the next, it will break the readers flow, and likely confuse them; personally, I’d recommend just using centre aligned images if possible.
Allow users to see the whole image
In some situations, your image might be cropped, or resized in a way that makes it hard to read any text on it. Be sure to let your customers click a button to see the full image if this happens. you don’t want them missing a crucial part of the photo because they’re using a mobile device do you?
Google Images, aren’t royalty-free
I’ve come across a few people, oddly they’re usually social media experts (sorry guys) that believe that if it’s on the internet, it can be used. That’s not the case if you’re using Google images to source your photography then be sure to find out if it really is free to use or ask permission to use it.
Need a little help?
We’re excited to see you taking an interest in making your website better.
If we can help in any way, let us know.