Photography on small business sites: picking and cropping

Photos do a lot of quiet work on a small business website. Before anyone reads a headline, they have already formed an impression from the picture beside it: whether the place looks clean, whether the people look friendly, whether the product looks worth the price. That makes photography one of the highest leverage decisions on a site, and also one of the easiest to get slightly wrong.

This post is about two skills: picking the right image, and cropping it so it holds up on a phone, a laptop and everything in between.

Start with what the photo needs to say

Every image on a page should have a job. Before choosing one, write a short sentence describing what a visitor should learn from it. For example:

• "This bakery bakes its bread on site, early in the morning."
• "Our physiotherapy clinic is calm, bright and easy to get into with crutches."
• "This joiner builds kitchens that fit awkward old houses."

Once you have that sentence, judging candidate photos becomes much easier. A beautifully lit flat lay of croissants is lovely, but a slightly imperfect photo of hands shaping dough at a floured bench says "baked here" far more clearly. The second one does the job; the first one only decorates.

Real beats generic, almost every time

Stock photography has its place, particularly for abstract ideas or when you genuinely have nothing else yet. But visitors have seen the same smiling call centre worker and the same handshake over a laptop many times. Generic images signal that the page could belong to anyone.

Your own photos, even if they are less polished, carry information stock images cannot: your actual premises, your actual team, your actual work. If you are choosing between a perfect stock image and a decent photo of your real shopfront, the real one usually wins.

A few practical ways to get usable original photos without hiring a photographer:

1. Shoot near a window. Soft daylight from the side flatters people, food and products. Turn off overhead lights that add a yellow or green cast.
2. Clear the frame. Remove cables, receipts, mugs and anything that doesn't belong. Clutter reads as carelessness in a photo even when it is normal in real life.
3. Take far more shots than you need. Move a step left, a step right, crouch, stand on a chair. The best angle is rarely the first one.
4. Hold the phone level. Tilted verticals on door frames and shelves make a room feel off balance.
5. Shoot wider than you think. You can always crop in later. You cannot add back what wasn't captured.

What makes a photo work on a website

A photo that looks great in a phone gallery can fall apart on a page. When judging a candidate, check these qualities.

A clear subject

The eye should land somewhere immediately. If a visitor can't tell in a second what the photo is of, it is probably too busy. A single potter at a wheel works better than a wide shot of a whole studio with six people doing different things.

Room for text, if you need it

If the image will sit behind a headline, it needs a calm area, such as sky, a plain wall or a blurred background, where words can sit without fighting detail. Placing white text over a busy market stall rarely ends well, even with a dark overlay.

Consistent light and colour

Images on the same site should feel like they belong together. A mix of warm golden-hour shots, cold fluorescent interiors and heavily filtered phone pictures makes a site look stitched together. Pick a direction (warm and natural, bright and airy, moody and rich) and choose or edit photos to match it.

People looking somewhere useful

When a person in a photo looks in a direction, visitors tend to follow their gaze. A portrait looking into the page, towards the headline or the button, feels more cohesive than one looking off the edge of the screen.

Cropping: the part most people skip

Cropping is where a good photo becomes a good web image. The same picture often needs to be shown in several shapes, and each shape asks for different decisions.

Know the shapes you need

Common shapes on small business sites include:

• Wide banners at the top of a page, often much wider than they are tall.
• Squares for team portraits, product grids or social previews.
• Portrait rectangles for side-by-side layouts on larger screens.
• Narrow tall crops when a wide banner is squeezed onto a phone.

That last one catches people out. A banner that shows a café counter, a barista and a window on a laptop may shrink on a phone to show only the middle third: perhaps just the espresso machine. Check every important image at phone width and decide what must survive.

Find the focal point

Before cropping, decide on the one thing that must stay in view: a face, a product, a sign. Many website tools and image components let you set a focal point so the crop centres on it as the shape changes. If yours does, use it. If it doesn't, crop separate versions by hand for the shapes that matter.

In plain CSS, the same idea looks like this:

.hero img {
  width: 100%;
  height: 60vh;
  object-fit: cover;
  object-position: 30% 40%;
}

The object-position values nudge the visible area towards the part of the photo you care about, instead of always cropping around the exact centre.

Leave breathing room, but not too much

A crop that slices through the top of someone's head or the edge of a product feels cramped. A crop where the subject is a small speck in the corner feels empty. Aim for the subject to fill a comfortable share of the frame with a little margin around it, and give slightly more space in the direction the subject faces.

Crop to remove, not just to fit

Cropping is also an editing tool. If a photo of a finished bathroom includes a half-visible toilet brush at the edge, crop it out. If a portrait includes a distracting doorway behind the shoulder, tighten the frame. Small trims often make an ordinary photo look considered.

Practical housekeeping

A few details that make a real difference:

• Write useful alt text. Describe what the image shows in the context of the page, such as "Florist arranging white tulips in a glass vase at the shop counter". Skip "image of".
• Export at sensible sizes. A banner rarely needs to be wider than about twice its displayed width. Huge camera originals slow the page down.
• Use modern formats such as WebP or AVIF where your platform supports them.
• Name files descriptively, like bakery-morning-bench.webp, so you can find them later.

A quick checklist

Before an image goes live, ask:

1. Can I say in one sentence what this photo tells a visitor?
2. Is it real, or is there a real alternative I could use?
3. Is the subject clear within a second?
4. Does it match the light and colour of the other images on the site?
5. Have I checked the crop at phone width and laptop width?
6. Is the focal point set or the crop adjusted by hand?
7. Does it have specific alt text and a reasonable file size?

Good photography on a small site is less about expensive equipment and more about intention. Choose images that say something true, then crop them with care, and the whole site will feel more trustworthy.