Getting perfect product photography for a website

We have seen it time and time again, the worst case scenario during a web or branding project is receiving a folder of images without prior discussion and ending up with all sorts of images that won’t work with the dimensions of the web, let’s give you some examples of how not to do product […]

What we will cover

We have seen it time and time again, the worst case scenario during a web or branding project is receiving a folder of images without prior discussion and ending up with all sorts of images that won’t work with the dimensions of the web, let’s give you some examples of how not to do product photography for website…

What kind of images will your web developer need?

This will depend on the type of website you are developing. For example, an ecommerce site will need large, well-lit product images on a plain background, normally square.

Ecommerce product photography for a website

Here’s a common example of a photographer framing a product shot to its dimensions, here we have a portrait shot that will need to fit a square.

The picture is great, but note the background is slightly off-white and we have a product reflection. Let’s now try and crop these for our e-commerce website and see what impact they have.

If we take our square we are having to chop off the grey areas which means we lose the top and bottom of the vase. We don’t want that so…

We can fit the image height-wise, this now leaves a space on either side of the image.

If we outline the image to show the square, it highlights how far away from white the background is, leaving the only option in post-production, cutting out and resizing every image, at great time and expense.

It’s extra infuriating as the solution lies in the photographer spending just a few moments setting up the frame to include more background on either side, allowing for the square crop.

Website banner images

One type of image often seen on websites is the banner image. These are images with a wide and short aspect ratio (e.g. 4:1 or 16:3) and are often used as page headers.

Again without direction, a photographer is unlikely to provide suitably composed banner images and it can be very difficult for your web designer to create banners by cropping standard portrait or landscape shots.

Here’s another example, see the photographer has even left a space to one side for overlaid text.

However, banners are so wide and slim that we lose the context of the image.

Of course, we can make the banners taller, but this takes up more of the page pre-scroll and on an e-commerce site it is effectively pushing your products down the page, this can impact engagement with the page, and let’s not forget this article is about getting perfect product photography for a website!

If we examine this shot, the subject matter is probably 10% of the image unlike the above where it is over half. The result when we apply the crop is that we can frame our subjects.

Getting creative input from multiple angles

From a photographer’s point of view, they have spent years mastering their craft and seeing life’s key moments in 4:3 frames, without regular practice it can be difficult to pull away from that, unlike the web designer, who is looking through letterbox lenses.

To avoid missing out on important shots like this, it helps to have some creative direction from somebody involved with your website, would you have thought to get your local web design team overseeing your photoshoot?

These are the key areas of the website that are readily impacted but other examples could be a decent selection of corporate headshots, often critical when taking a business up a level in perception or if you provide a professional service.

Or a selection of bespoke framed portrait and landscape-oriented shots, this will give your web developer consistency when creating page templates or if they have a vision for a unique style or overlay post-production, the opportunity to create their vision.

What were saying here is getting a set of professionally produced photographs for your website is exciting, and can elevate your brand, but without proper preparation and an agreed brief, the end result could be disappointing and expensive.

So what could you do to prepare…

Getting in the zone

Photographs and other visual content give you the opportunity to connect with your audience on a deep level.

You may not know exactly how your potential customers will react to your visuals but by researching other websites, social media platforms and specialist photo sites (e.g. 1x, Flickr, GuruShots, etc.) you can get some inspiration for what might work on your site.

Instagram and Pinterest are particularly useful for browsing creative visuals, or have a look at stock websites (you probably want to do better than shaking hands across a boardroom table) but it can give you something visual to discuss with your photographer to ensure you’re on the same page.

You might also benefit from creating a ‘mood board’ on Pinterest or Canva.

Reflect your audience back at them, we have seen big brands doing this for years, if you aren’t sure on your audience then workshop who this page/website is for, or pick a real-life customer who engaged with certain elements of your organisation and take visual cues from them, or to be truly authentic, ask them to be in it.

As you research, take notes and begin drawing up a brief for your photographer.

Creating your photographer’s brief

A professional snapper will have the technical knowhow and experienced eye to translate your vision into high quality print and digital images. To get the most out of your investment, you will need to provide them with a brief.

The more detailed you can be, the better but your photographer’s brief should contain the following as a minimum:

  • Details about your business or organisation and what you do
  • The purpose of the photoshoot
  • Who your target audience is (as much detail as possible)
  • A link to your mood board or reference images
  • Where the images will be used (e.g. website, flyers, press pack, social media, etc.)
  • The image dimensions or style of crop
  • Details of specific kinds of images you must have (see next section)
  • Details of ‘nice-to-have’ images
  • The time you want to spend on the photoshoot
  • The location/s of the shoot
  • Who will be on the shoot and their roles (include people from your team and anyone you want the photographer to source)
  • How many images you need
  • When the first drafts will be needed
  • When the final retouched images will be required
  • Budget

If you are approaching multiple photographers for quotes, it is enough to summarise this information in your initial emails. You can provide a more detailed brief later.

With Vu, we will have specific partners in mind for different types of shoot, so a lot of this thinking and briefing work can be handled by the team.

Who’s on your team?

For high budget ad campaigns, a photographer forms only one part of a large creative team. While you probably won’t need to involve a production manager, stylist or location scout it may be worth bringing along your web designer or even appointing them as a creative director.

A professional photographer will often appreciate the input of a web designer who can give them clear instructions on what is needed, in our experience the more you can have behind the camera the less pressure an individual feels and the more that ideas and collaboration can flow, of course there’s a requirement of additional budget but spending more the first time is better than having to buy twice. 

So there we go, hopefully this will help focus the shoot to get perfect product photography for a website and avoid the frustration of missing out on important shots or the need to arrange a costly reshoot.

Do you know anyone who may be interested in this project?

Click to share: