The images on your website have a huge effect on the overall look and feel, after all the human brain processes visuals 60,000 times faster than text. But it can be really difficult to know what makes a photo right for your website, or how to source the images that are going to create the right impact on your audience.
Hopefully this guide will give you the confidence to pick the perfect photos for your website, so it makes an incredible visual impact right from the first click. We'll talk about:
What makes a good picture for your website?
When you're getting a new website, before you even think about the style and composition of images, you need to know the technical and practical requirements.
We'll take you through all the requirements that will help you provide the best website images, from orientation and file format, to size and resolution.
Best format for images on a website
There are many different formats and file types for images, but the most common ones should be fine for use on your website. The best formats for images are usually jpg and png files, although you may also come across svg, bmp, tiff and gif.
These file types should be fine for most of the images on your website, but there may be times when you need a specific file type - like a vector.
Vector files allow for easy resizing of images, and are often the best option for logos and illustrations. The most common vector formats are eps, ai, svg and pdf.
Best orientation for web page images
It's something that gets overlooked an awful lot, but it's always best to provide landscape pictures - not portrait.
This is because a lot of the images that get used on websites are actually more of a letterbox style so they fill the width of a screen without descending too far down the page.
That shape is fairly easy to generate from a landscape photo, but if all you've got to work with is portrait, you're left with a tiny fraction of space to work with.
Have a look at these examples to see what I mean.
See how the actual usable space from the landscape image is much larger than on the portrait photo?
So, if you're providing your design agency with pictures, try and make sure that as many are possible are landscape. Portrait photos may be usable in some circumstances, but whereas it's easy to make a landscape image into a portrait, it's a lot harder to go the other way.
Focal point on images
This is quite similar to the orientation issue, but if you're replacing an image on your website (particularly in a heading), really think about where the focal point needs to be.
Lots of sites have large headings with text over them. If you're providing an image for one of these areas, make sure that the main focus of the image is not going to be hidden under the text.
See how one image works perfectly with the balance of text, and the other is a bit of a jumble, making the image difficult to see and the text hard to read.
If your heading has text on the left, make sure the focal point of the image is on the right - and remember that your designer can't just add more space onto the left side of that picture, it needs to be in the image to start with.
Best resolution for photos on a website
You'll want to use the best quality images on your website, but at the same time, you don't want those images slowing the website down - particularly on mobile.
It's always best to start with the highest quality images first, as it's usually fairly simple to compress files at least a little - but you can't make a smaller file bigger or improve its quality.
If you're using a design agency, they will manage the compression of images for you as part of the development process, to ensure you get great page speed, so you don't need to worry about providing images with high resolution.
If you're building a website yourself, then depending on the platform you're using, you may be able to use a plugin that will compress photos for your website.
If that's not an option for you, you can also use a free service like TinyPNG to compress your image files.
Style
One of the best ways to start selecting a style is by listening to your design agency.
It can be counterproductive to pick an image style simply because you like it. Your designers will guide you to a style that's going to speak to your audience, and will complement the rest of the design.
Your design agency will be able to give you guidelines on the sort of photos they need, giving you a list of types of image, what and who should be in them, and the style to go for.
They will most likely use stock photos as placeholders, and you can use these as a guide to the sort of picture you should be getting to fill each space on the site. They don't need to be identical, but make sure you're replacing like for like - don't provide a picture of your warehouse to replace a picture of your team in a meeting.
How to create images for your website
When you're gathering images for your website, it's important to have a plan in place so that you know what images are needed.
Professional photography
The easiest way to get the right website photos is to hire a professional. Paying for a photographer for a few hours or days can quickly pay for itself, and should give you a bank of imagery that you can use not only on your website, but in brochures, advertising and on social media.
You can even put your photographer directly in touch with your web design agency so they can discuss the types of shots needed, and make sure you get the most out of your shoot.
Lots of people try to take their own pictures with a phone or camera, and while you can get some decent images, there's no comparison with what a good photographer can do.
A professional is going to be able to manage things like lighting and composition. They will know how to get natural-looking photos of your staff without them feeling staged.
They'll know from experience how to create the right type of image, and will be able to take a good range of photos that give your designers a good bank of suitable images to choose from.
Of course, the downside is that a photographer costs money. But it's highly recommended that you factor this cost into your website design costs, as a picture really is worth a thousand words.
How to choose stock images for your website
There may be some situations where you don't have any option but to use stock photography for your website.
In these cases, it's usually best to give your design agency free rein to choose what they think works best, but if you decide to source stock photography yourself, make sure you're choosing the right sorts of images.
The biggest consideration with stock photography is licensing. A lot of people are unsure what pictures they can use on their website, and think that if you find an image on Google, you can use it for free.
This is NOT the case, and it's essential that you obey licensing and copyright restrictions for any images you use.
A design agency won't know whether the pictures you send them are licensed or not, so if you supply them with an image, they will take it in good faith that you have secured the rights to use it. So don't depend on them to police your image choices*.
If you are sourcing your own stock images, there are a range of websites dedicated to this service which will provide clear licencing information for each image before you download. Take a look at some of the below for inspiration.
- Unsplash (free)
- Pixabay (free)
- Pexels (free)
- Pikwizard Background Designs (free)
- Shutterstock (paid)
- Getty Images (paid)
However, most web designers will likely have access to a wide range of high-quality stock photography.
One of the best ways to use stock photos is not to try and find the exact ones you want to use, but to create a Pinterest or mood board of the images you like and share it. Your designer can then source similar stock images, and you'll be safe in the knowledge that they are definitely licensed for you to use.
*We once heard from a client who had been sent a very stern letter from Getty Images, with the instruction to take the photo they had used down or pay a VERY hefty licensing fee. They let us pick their images after that!
Staff photography
Some of the most difficult pictures to get are your team photos. There are a number of really common pitfalls with these, including letting people supply their own, or not factoring in that you'll need more when new employees join.
Uncomfortable subjects
A really common issue with taking team photos is that one or two people will be adamant that they hate photos and don't want to be part of it.
That's fair enough if you're happy that they don't actually need to be on the website, but if they're an essential person, getting that profile photo is really important.
Don't allow them to break the style you've established just because they don't like their picture being taken.
Using your own photos
Never let your employees provide their own photos for your website. You will end up with a random assortment of styles, mostly taken with phones, with people in the background, poor quality or just unprofessional*.
You should always take team photos specifically for the site, and make sure they are a standard style and composition. That way your team page will look professional, and everyone's profile is consistent.
*We once received a photo from a client which was clearly taken in the pub. Nice picture, but it's just not right for a company site.
Complex styles
Some people like to get creative with their office team photography and have a stylistic photo shoot. This can help you stand out - but remember, any time you get a new employee who needs to go on the site, you'll need to create a similar picture.
For companies where there's not a big turnover of staff, that's not going to be a problem. But if you regularly have new profiles, you might want to reconsider a style with lots of props or complicated themes, because you need to be able to recreate it every time you employ someone new.
Fixing the problem
One of the best ways to avoid the problems above is to hire a photographer to manage the team photos for you. They'll be experienced in coaxing a natural shot out of the most uncomfortable subject, and establish a style for your profile images that's fairly easy to recreate, as well as fitting the culture of your company and style of your site.
Storing and organising your photos
Once you've sourced your website photography, the next stage is to share it with your design agency.
It's always best to get imagery to your designers as soon as you can, so they can look through and let you know if there are any gaps, or if they need any additional guidance from you about what goes where.
It's also really helpful to organise your images before sending them over. Make sure you arrange files into folders so that your Team, Product and About photos are all separated and easy to find.
Making sure your image files are named appropriately can also be a massive help - particularly with profile and product images. So instead of IMG1234567890, try naming the file johnsmith or by the product name or number.
If you've had a photographer, they can liaise directly with the web design team to provide the image files. Providing those pictures in an unedited format is always best, as the design team may want to add their own filters to go with the site design.
When you get to actually sending images, some of the best strategies are to use file sharing services like Dropbox, or using dedicated transfer services like WeTransfer.
If you want to send something on a USB or flash drive, make sure you have a backup before popping it in the post - just in case it gets lost! And remember to mark the drive clearly so your agency knows what they've been sent and can easily identify it in the office.
How to create the best pictures for your website
This guide should help you navigate some of the more problematic issues of getting the right photos for your website.
But the general rule if you're unsure is always ask your designer! They know what they need for your website, and they'll be more than happy to guide you through this.
Website imagery helps showcase your business's brand image and really sets the tone for the whole design, so your agency will be just as keen to make sure you've got fantastic pictures as you are.
If you're ready to start a project and want an agency who'll give you help and guidance choosing your images, get in touch with us - we'd love to hear from you!
