Plan original photography for a website

List placements before taking pictures

Review the homepage, service pages, team, case studies, cards and articles. For each placement, note the subject, orientation, crop, space for text and priority. A wide banner cannot automatically replace a portrait or square thumbnail.

Plan genuinely distinct subjects: work in progress, setting, products, team and useful details. Repeating one picture on every page weakens understanding. The image selection guide helps relate each picture to the page’s information.

• Pages and formats listed.
• Subject and crop assigned to each slot.
• Card and mobile variants planned.

Prepare locations and people

Choose representative situations and inspect everything in frame: screens, labels, documents and people. Fictional example: a workshop photo shows a customer quote on a workbench; prepare an equivalent scene without confidential information before shooting. Plan lighting, availability and useful tidying without turning the venue into an unrecognizable set.

Identify recognisable people, private locations and third-party brands. Agree on intended uses with the photographer and everyone concerned before shooting. Keep a record of permissions, required credits and restrictions for each selected image.

• Screens and documents checked.
• Uses and rights clarified.
• Time reserved for real work scenes.

Select and adapt files

Choose frames for sharpness, authenticity and usefulness. Store full-quality originals away from the public site, then export web versions in appropriate sizes. A modern format and responsive variants avoid serving a large desktop image to every phone.

Name files after their actual subject, write alternative text that conveys useful information and add a caption when context matters. Google Images guidance emphasises page context, filenames and alternative text; rights metadata can complement them but cannot replace them.

Fictional example: an envelope accompanies a link already named “Contact”. If it adds no information, alt="" avoids repeating the name. If the image is instead the link’s only content and no other accessible name is provided, its alternative must express the destination, “Contact”, rather than merely describe an envelope. The diagram compares these uses. An empty alternative differs from a missing alt attribute: omission may leave the file name or destination announced unhelpfully.

The choice depends on each page’s function, not just the image file. For an informative product-detail view, describe the useful detail; for decoration without its own information, use an empty alternative. Complex images also need an equivalent in page content. W3C’s decision tree distinguishes these cases. Prepare the alternative during selection, translate it in context and test complete link and button names. A caption can supply place, date or credit without turning the alternative into a keyword list.

• Originals stored separately.
• Exports sized for devices.
• Filename, alternative and caption descriptive.

Scroll the table horizontally to read every column. With a keyboard, focus the table area and use the arrow keys.

Check the published result

Place images in their actual templates before approving the selection. Fictional example: a portrait works as a square but loses the face in a horizontal banner; choose another shot or a crop prepared for that placement. Check phones, tablets, overlaid text and small details. A technically sharp image does not necessarily suit every use.

Test loading speed, missing files and the layout without an image. Maintain an inventory linking each file to its page, rights and review date. The performance guide covers useful checks after publication.

• Crops checked at several widths.
• Weight and loading verified.
• Rights and placements recorded.