Photos for a website: what to shoot, where to get them, how to accept them

Photographs get done last and decide first

On a service page a person sees the image before reading the heading. The decision this is or is not the thing is made before the first word is read.

And yet in projects photography is almost always left until the end: design first, then text, then somebody should find some pictures. It ends up assembled in an evening from whatever turned up.

The difference shows immediately. A site with eight good photographs of its own looks more serious than a site with forty stock images, and costs less.

Below: what to shoot, where to get it, what you must not use, and how to accept a finished shoot. With our own figures: in one piece of work we prepared a hundred photographs for a services catalogue and forty covers for the journal, and two delivered batches had to be rejected outright.

What to shoot: the minimum set

The list is shorter than people expect. Four categories cover most sites.

The object or the result. What you sell, shot so it is clear what it is. For services that means the outcome: the finished installation, before and after, the completed piece.

The process. How it is done: hands, tools, stages. These convince more than the final result, because they show the work is done by people.

People. Not corporate portraits on white, but the people who actually do the work, in their own surroundings. One honest photograph of a team beats ten stock smiles.

And the place. The office, the workshop, the warehouse, the shopfront. That is proof of existence, and nothing substitutes for it.

Own shoot, stock or generated

Three sources, each with its own role, and the right answer is usually a mixture.

Your own shoot is irreplaceable wherever you are showing something specifically yours: the product, the site, the team, the premises. Stock does not work here at all — a buyer can tell your workshop from somebody else's.

Stock suits backgrounds and abstraction: an article cover, a section illustration, an image that does not claim to be yours. The one condition is not passing it off as your own.

Generated images suit the same places as stock and give more control over format and treatment. We did this with journal covers: four hundred and sixty-four pieces, each with its own image at a single size.

A practical rule: if a person could verify a claim from the photograph, shoot it yourself. If the photograph illustrates an idea rather than a fact, something ready-made will do.

What you must not use, and why it is expensive

A short list of what regularly reaches websites and should not.

Photographs taken from search results. It looks harmless until a rights holder gets in touch. The checking is automated, done by reverse image search, and it finds things.

Images carrying other companies' logos. This turns up in generated pictures too: the model inserts recognisable marks because it saw them in training. One batch delivered to us had to be rejected entirely for exactly this — real logos of well-known services stood in the frames.

Shots where a device displays an interface that does not exist. The second rejected batch was that: invented application windows laid over screens. Somebody who works out the interface is fictional stops believing the rest as well.

And photographs of people who were never asked. That is its own subject, and the law varies by country, but the everyday rule is simple: if a person is recognisable, you need their agreement.

Consistent framing beats beautiful framing

A non-obvious point that spoils more sites than poor photography does.

Twenty excellent photographs in different proportions look worse on a page than twenty average ones in the same proportion. Inconsistent cropping reads as carelessness, even when each frame is good on its own.

So the first decision is not how to shoot but at what aspect ratio. Product pages usually take a square or an upright; covers and headers take a wide horizontal frame.

That ratio is then held everywhere. A square frame fitted into a wide slot by adding blurred bars at the sides is not a solution: it looks like a mistake because it is one. One of our rejected batches was exactly that.

And watch the light. Eight frames in one tonality read as a series. Eight frames shot under different lighting read as a random assortment.

Size, weight and format

Technical requirements worth writing down once and handing to a photographer with the brief.

Aspect ratio and pixel size for each slot on the site. For wide images a width of roughly fifteen hundred to two thousand pixels is usually enough: more adds no visible difference and plenty of weight.

File weight. A guide for a large image is one to two hundred kilobytes after compression. We held a hundred catalogue photographs at an average of a hundred and forty-seven kilobytes; the whole set came to fourteen megabytes.

Format. Modern formats give less weight at the same quality, and most engines serve them automatically while keeping the original in a familiar format. Preparing them by hand is usually unnecessary.

And always the originals. Ask for images at full size, not only the versions prepared for the site. In a year you will need a different format, and reshooting costs more.

Images loaded from someone else's server break

A separate mistake that looks like a saving and turns into holes on your pages.

This is where an image does not sit on your site but loads by link from somebody else's. It is convenient and free right up until that site moves, closes or changes its addresses.

We worked through this on our own journal: of four hundred and sixty-four pieces, a hundred and eighty-eight pulled their cover from an external address, and two no longer opened. All of them were brought in-house.

It is not only about reliability. Somebody else's server answers more slowly than yours, you do not control its compression, and you cannot serve a modern format.

The rule is simple: everything shown on your site should live on your site.

Alt text and file names

Two small things that cost almost nothing and are almost never done.

Alt text describes an image for those who cannot see it: people using screen readers and search crawlers. Write one phrase describing what is in the frame, not a list of queries.

A fitter installing ventilation ducting in a flat is alt text. Ventilation ventilation installation install ventilation is a word list, and it does harm.

Decorative images need no alt text at all: an empty attribute value is more correct than describing a background texture. A screen reader simply skips such an image.

File names are the same thing in miniature. A name like ventilation-install-flat beats IMG_4821 and costs one minute at upload.

Where images slow a site down

Images are the commonest cause of slow loading, and it is usually not their number.

First: uncompressed files. A frame straight from a camera weighs several megabytes. Ten of those on a page is thirty megabytes, which somebody on a phone spends half a minute downloading.

Second: no dimensions in the markup. If the browser does not know in advance how large an image will be, the page jumps while loading — text shifts down and a person misses the link they aimed at. It is a measured metric and it affects how the page is scored.

Third: everything loading at once. Images below the first screen should load on scroll rather than with the rest of the page.

And fourth: one enormous picture for every device. A phone does not need a two-thousand-pixel frame, but it gets one if the site does not serve different sizes to different screens.

How to accept a shoot

The checklist we use on delivered batches. It is short and it catches nearly everything.

Every frame at the same aspect ratio, with no fitting by blurred bars.

No frame carrying another company's logo, signage or recognisable mark.

No frame carrying an invented interface or unreadable text.

Lighting and colour tonality consistent across the frames.

Full-size originals supplied, not only the versions prepared for the site.

A batch failing even one point goes back whole. Accepting half and reshooting the rest is cheaper than working out which particular frames are spoiled.

Our own run: a hundred and forty images

The results of one piece of work, so the figures are not abstract.

A hundred photographs for the services catalogue: one wide format throughout, an average of a hundred and forty-seven kilobytes per frame, fourteen megabytes for the set. All hundred catalogue entries received an image of their own.

Forty covers for the journal. The job was not to make things pretty but to remove repetition: one placeholder was standing on dozens of pieces, and that looked worse than no picture at all.

Two batches rejected outright. The first: square frames fitted to a wide format with blurred bars, plus real logos of other companies' services. The second: invented interfaces laid over device screens.

And one lesson about process: in one batch of ten, the files arrived in a different order from the list describing them. We assigned them by position and got all ten wrong by one. Since then every frame is identified by its content, never by its place in a list.