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.
These are commonly used for things like logos and graphical elements within the design.
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 often 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.
This is fairly simple if your heading text is aligned to the left (or more unusually, the right), but can be more tricky if your text is centralised.
If your heading text is in the centre of your image, you'll need to make sure you're choosing an image where there isn't a main focal point in the centre, and that there's suitable contrast between the colours of the image and the heading text for it to be easily read.
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 towards a style that's going to speak to your audience, and will complement the rest of the design.
Once you're happy with the general style, your design agency will then be able to give you guidelines on the sort of photos they need, whether you're getting them taken professionally, want to choose them from a stock library, or are thinking about using AI to generate them.
Many design agencies will use stock photos as placeholders if you're planning to get your own photos taken, 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 - for example, 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
There are several different ways to generate images for your website, the main three being unique images which are created just for you, stock images that you buy with a license, or AI photos that are generated based on your requirements.
Bespoke photos and images for your website
Often, the easiest way to get the perfect pictures for your website is to get a photographer or illustrator to create them for you.
Bespoke images can really create an air of credibility for your website, as people will immediately see that the images you have are genuine, and not just stock.
Get a professional photograper
Paying for a photographer for a few hours or days can quickly pay for itself, and should give you a bank of photos that you can use not only on your website, but in brochures, advertising and on social media too.
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.
DIY website photos
Lots of people try to take their own pictures with a phone or camera, and while you can get some decent images this way, 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 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.
Bespoke website illustration and graphics
If you would prefer to use illustration, rather than photos for your website, then hiring an illustrator can be a great way to get exactly the images you need.
This can give you a lot of control over the look and feel of your images, as you can direct your illustrator to create something very specific.
The downside of this is that illustration is very difficult to replicate, so if you need additional graphics in the future, you may need to come back to the same illustrator for them - so if you go down this route make sure you forge a good relationship!
Your design agency may also be able to produce illustration or graphics in-house, but be aware that it will add to your overall website design costs. Creating these sorts of elements is much more intensive than adding images, so don't assume it's all included in the price.
How to choose stock images for your website
There may be some situations where you've really not got any option but to use stock photography. If you're not able to get your own photos, or if you've chosen to go with illustrative images rather than photos, then stock is often the best bet.
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.
Using stock photography
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)
- 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 images for them from our licensed image bank after that!
Stock illustration and graphics
Using illustration or graphical images has become a much more popular website design trend over the last few years, and using a stock library for these can be a brilliant way to balance your creative needs without needing to hire a bespoke illustrator.
Stock libraries often include suites of illustrations or graphics in a particular style. This can give your designer a lot more freedom to build what you need while keeping everything consistent - without needing to create anything from scratch.
This sort of balance is often a great option if you're looking to move away from photography.
How to generate AI images for your website
Image generation is one of the areas where AI can hugely help you with your website design.
By using a good AI image generator, you can create bespoke images in a wide range of styles from photorealistic to different types of illustration.
Your designer can also then edit these images to make them perfect for your website, ensuring they are unique and consistent for your brand.
To make use of AI generated images, it's really important to choose a licensed AI image generator. Don't try putting unlicensed images into a free generator and getting them re-worked - that's still going to be a breach of the image license.
We recommend using a service like Midjourney, which uses prompts to generate unique AI images. These can then be downloaded and customised by your design team to create exactly the style of image you need.
Taking Team photos
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 just wasn't appropriate for their 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
If you're supplying your own images, it's always best to get it 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 a bit of additional guidance from you about what goes where.
It's also really helpful when you organise your images before sending them over. Make sure you arrange files into folders so images for different pages, or different types of use (for example, product pictures, team photos etc.) 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!
