Web design

Imagery and photos: images that say something

Imagery, photos, graphics and icons for your website: selection, licences, image formats and accessibility. Images that build trust.

Book an initial consultation Back to web design

Web design

Imagery: what exactly is it?

Imagery is the sum of the decisions about how a business presents itself in pictures: choice of subject, perspective, light, colour mood, editing, and the balance between photos and graphics. It is part of the brand, just like the logo, colours and typeface. You can find more on the brand as a whole under colour palette and typography.

The practical tasks include photography, selecting licensed images, illustrations, icons, and preparing everything for screen and print. Good images do a job: they show results, explain processes, make products tangible or create atmosphere. Images with no job are decoration, and they cost loading time.

On the technical side come file format, size, compression and alt text. An image that loads 4 megabytes on a phone does more harm than good. And an image without alt text stays silent for people with visual impairments and for search engines.

Background

Imagery: why it matters.

Images work faster than text. Within seconds, a visitor decides whether a page looks credible, solid or generic. Photos that people have already seen on ten other websites signal arbitrariness.

Myth: “As long as the images are big and high-resolution, they're fine.” Fact: size is not a mark of quality. What counts is the message, sharpness, light and fit with the brand. A small, honest picture of real work is worth more than a huge symbolic photo of a handshake.

Example (fictional): a floor fitter shows a stock photo of smiling people in a bright living room on his page. A series would work better: the room before, the laying, the finished floor in raking light. Each image answers one of the customer's questions: what does your work look like, how does it go, what do I get?

Overview

Imagery: building blocks and variants.

Real photos

Your work, your products, your premises. They earn the most trust in advance because nobody else has them.

Licensed images

From image libraries, with a clear licence. Good for abstract content or illustration, provided the choice is deliberate and distinctive.

Illustrations and graphics

They explain processes, relationships and data. They work particularly well when designed in a consistent style.

Icons and symbols

Small signs that help people find their way. A consistent stroke weight and size matter more than artistic ambition.

Moving images

Short videos and animations. Use them sparingly, with subtitles, and never starting automatically.

Image editing

A consistent treatment of colour and contrast, so that images from different sources fit together.

An image concept in seven steps

An image concept defines how your business presents itself in pictures before anyone picks up a camera or pulls a photo from a library. It is a short document, not a manual, and it saves many discussions later on.

Clarify the task. What should images do on your site: show your work, explain products, introduce rooms, create a mood? Write three sentences about it.
Consider your audience. What do they expect? A dental practice needs calm, bright images; a garage needs tangible, hands-on ones.
Define the mood. Three to five adjectives, such as “bright, calm, precise” or “powerful, direct, warm”. They apply to light, colour, framing and editing.
Create a mood board. Collect 15 to 20 example images (from other brands, from magazines) and mark what you like about them: perspective, light, distance, colour effect.
Set the rules. For example: people always at work, never smiling into the camera; products against a calm background; colours that match the main colour; images in natural light.
Name the no-gos. Handshakes, a laptop on the sofa, a light bulb for an idea, generic office scenes with a staged meeting.
Draw up a shot list. Which images do you need specifically? The list becomes the brief for photography or image selection.

An image concept has a second benefit: it keeps images consistent over time, even when different people choose them. That is part of what makes a brand, see also brand strategy.

The shot list: which images answer which question?

Images are not decoration but answers to questions that visitors have. Once you know the questions for each page, the shot list almost writes itself.

Visitor's question	Suitable subject	Example (fictional businesses)
What does your work look like?	Results, close-ups, before and after	Joinery: a finished kitchen run in daylight, a detail of a drawer joint
How does working together go?	Work steps, tools, rooms	Tax office: a meeting table with open documents, hands on a calculator
Where is the business?	Entrance, façade, surroundings, car park	Practice: entrance with sign, the route from the car park
Who will I be working with?	Hands at work, work clothing, equipment	Trades: hands with tools, a vehicle with signwriting
What exactly do I get?	Product, packaging, scale, use	Workshop-made goods: the product on a neutral background, and next to it in use
Is this right for me?	Mood, situations of use	Café: guests in conversation, a seating corner, the afternoon light
Is it safe and clean?	Tidiness, materials, equipment	Workshop: a tidy hall, testing equipment

Next to each subject, note which page it is for and in which aspect ratio (wide, tall, square). That saves cropping later that cuts off heads or details.

Your own photos: hire a photographer or do it yourself?

Real photos are the most valuable thing a business website can have, because nobody else has them. Whether you take them yourself or commission them depends on your standards and the subject.

Is the image central to your impact (home page, main service, product images)? Yes: commission a photographer. No: read on.
Does the subject have technical difficulties (glass, reflections, backlight, interiors with mixed light)? Yes: a professional. No: read on.
Do you need many images of consistent quality (shop, catalogue)? Yes: a professional, or your own photo set-up with fixed equipment and instructions. No: read on.
Do you have someone with a good eye and the time to practise and do it consistently? Yes: with a current smartphone, daylight and the shot list, good results are possible. No: a professional.

Brief for a photographer

Concept and mood board.
Shot list with purpose and desired format.
Place, time, access, contact person.
Usage rights: where and for how long may the images be used (web, print, social media)?
Delivery format: a selection of edited images in web and print size, plus the originals for an extra fee.
People in images: obtain their consent beforehand.
Schedule and a plan B for bad weather.

If you take the photos yourself

Use daylight, with the window at the side, and avoid direct midday sun.
Tidy the background and remove anything distracting.
Straight lines: align the horizon and edges.
Fill the frame with the subject rather than letting it look distant. Get close and show details.
Landscape for the wide header images at the top of the page, portrait for mobile devices; ideally shoot both.
Clean the lens, take several variants, and choose the best later.

Using stock photos wisely: selection and licence types

Stock photos have their place, for abstract topics, backgrounds, or when shooting is not possible. The problem is that they are interchangeable: whatever ranks first in the library, visitors see on many sites. If you use them, it is best to choose against the grain.

Selection rules

Avoid the commonest clichés: handshakes, people smiling at laptops, light bulbs, puzzles, arrows pointing up.
Search for scenes, not for concepts: instead of “success”, try “tradesman checks drawing on site”.
Prefer real situations in natural light over staged poses.
Check the fit with your imagery: colour, light, framing.
Never use stock images for things that promise authenticity: your team, your projects, your customers.

Licence types at a glance

Licence type	Meaning	What to watch for
Royalty-free	Pay once, then use several times within the terms	“Royalty-free” does not mean “free of charge” or “unlimited”. Read the terms: media, print run, duration
Rights-managed	Use agreed by occasion, time, place and scope	More expensive, but more exclusive. Pay attention to the exact contract terms
Creative Commons	Free to use under certain conditions, such as attribution	Depending on the variant: attribution, no editing, no commercial use. Read the licence text carefully
Public domain	No rights protected any longer, or rights waived	Check the source; trade mark rights and the rights of people shown remain unaffected
AI-generated images	The tool's terms of use decide; the legal position is evolving	Read the terms, do not fake authenticity, and check for likenesses of people and trade marks

Document the following for every image: source, licence, date of acquisition, proof. A simple spreadsheet is enough. Anyone who later has to prove that they were allowed to use an image will be glad of it.

Rights around images: the essentials in brief

The same applies here: this is not legal advice. In disputes or unclear situations, ask a specialist lawyer in copyright and media law.

Topic	Principle	In practice
Copyright	The photo belongs to the person who took it, even if you paid for it	Agree usage rights in writing: scope, duration, channels, editing, passing on
Image from the internet	An image being visible online does not make it free	Use only with permission or a suitable licence
People in the picture	Consent is regularly required for photos of identifiable people	Obtain it in writing, state the purpose, point out the right to withdraw
Employees	Consent is voluntary and can be withdrawn	Plan for departures and withdrawals in how you maintain images
Children	Particular care, consent of the parents or guardians	Avoid if possible, or do not show faces recognisably
Brands and works in the picture	Logos, artworks and buildings can touch on rights	Watch the background; if in doubt, get permission
Image credit	Some licences require attribution	Credits page or caption, as the licence text demands

Deleting and replacing: if a person or rights holder asks you to remove an image, respond promptly. A list showing which image is on which page makes this easy.

Graphics, illustrations, icons: what helps when

Medium	Strength	Weakness	When to use
Photo	Authenticity, emotion, proof	Not suited to abstract subjects; takes effort	Work, results, rooms, people
Illustration	Explains processes, has its own character	Needs its own style; upkeep effort	Complex topics, processes, brand world
Icon	Orientation in a small space	Ambiguous without text	Menus, lists, controls, always with a label
Chart	Makes numbers and relationships clear	Only as good as the data	Comparisons, developments, processes
Video/animation	Shows movement and processes	Data volume, effort, barriers	Processes that text does not explain, started by a click

Rules for icons and graphics

A consistent style: the same stroke weight, the same corner shape, the same colours.
Icons do not replace text but complement it. Anyone who cannot interpret an icon needs the label.
Sufficient contrast and size, so that they are recognisable on a phone too.
Vector format (SVG) for sharp display at any size and small file sizes.
Charts with legible labels, a source and one sentence explaining what they show.

Colours, typography and imagery belong together: colour palette and typography set the frame within which graphics are created.

File formats and technology: the right one for each purpose

Format	Suitability	Advantages	Limits
JPEG	Photos	Widely supported, good compression for photos	Lossy, no transparency
PNG	Graphics with transparency, screenshots	Lossless, transparency	Large files for photos
WebP	Photos and graphics	Smaller than JPEG and PNG at the same quality, transparency possible	Fallback needed for very old browsers
AVIF	Photos	Very small files at good quality	More complex to produce, check support
SVG	Logos, icons, simple graphics	Infinitely scalable, tiny, adjustable via code	Not for photos
PDF	Documents, print-ready files	Layout is preserved	Awkward on a phone, not for main content

Technical rules for images on the page

Prepare suitable sizes for each use; do not embed the original file.
Give files descriptive names without umlauts: dachfenster-einbau-reihenhaus.jpg instead of IMG_3048.jpg.
Specify width and height in the code so that the space is reserved.
Load images lazily after the first visible area.
Check the metadata: photos sometimes contain location details and device information. Remove it before publication if it is not wanted.
Alt text for all images with content, empty for decorative ones.

How these steps affect loading time is shown under loading time. A step-by-step guide is provided by the article Optimising images for your website.

Consistency in editing

Images from different sources should look as if they came from one mould. You achieve this not through filters but through a few fixed decisions.

Colour mood: a consistent colour temperature and saturation. A mixture of cool and warm images looks restless.
Contrast and brightness: the same brightness for images that sit side by side.
Cropping: fixed aspect ratios (for example 3:2 for photos, 1:1 for portraits, 16:9 for header images).
Focal point: keep the important parts of the subject in the centre or in a fixed area, so that cropped variants lose nothing essential.
Backgrounds: for product images, a uniform background or at least a similar kind.
Sharpness: sharpen moderately, do not overdo it.
File management: store originals separately from web versions, with clear naming.

A small test: lay ten images from your site side by side, reduced to the size of a postage stamp. Do they look like a family or like a jumble?

Accessibility for images

Images must be usable by everyone, including people who cannot see them. This concerns alt text, but also text in images, contrast and movement.

Every image with content needs alt text that briefly describes its purpose and content.
Avoid text in images. Where it is necessary, the same text also appears as real text on the page.
For text over a photo, ensure sufficient contrast, for example with a semi-transparent panel behind the text.
Lettering on images is often too small on a phone: check how it displays there.
Offer videos with subtitles and a text version.
Limit animations to what is necessary.

More on the requirements on the page accessibility.

Scenario: a joinery gets its own imagery (fictional example)

A small joinery (made up) has a page with stock photos of wooden planks, a hammer on a white background and smiling people in suits. Customers say on the phone: “On the website it looks like everyone else's.”

Approach

Concept: the mood “hands-on, precise, warm”. Rules: hands at work, natural light, close-ups of wood, no poses.
Shot list: ten subjects, including three finished pieces of furniture in use at the customer's home, four work steps (measuring up, cutting, joining, finishing), the workshop from outside and inside, and a detail of the grain.
Execution: half a day with a photographer in the workshop and at a customer's home (with consent), then a selection of about twenty images.
Preparation: three sizes each, WebP with a JPEG fallback, descriptive file names, alt text, image credits for the few stock photos.
Use: the home page with a close-up of a joint, service pages with three images each, a references page with four projects.

The result cannot be promised in numbers, but it can be observed: the questions on the phone change (“I've seen your work”), and the site looks unmistakable. That is exactly the purpose of imagery.

Myth versus fact: misconceptions about images

Myth	Fact
The more images, the better	Every image costs loading time and attention. A few good images with a purpose beat many arbitrary ones
You can use images from a Google search	Image search also shows protected images. Using them without permission can be expensive
A higher resolution is always better	Files that are too large slow the page down. The right size is what counts
A smartphone is not enough for good photos	For many subjects it is enough, if the light, framing and background are right
Filters make images look professional	Consistent, restrained editing looks professional; conspicuous filters rarely do
Alt text is only for search engines	It is first of all for people with visual impairments and for anyone whose images do not load

A 20-minute self-check

Lay the ten most important images from your site side by side. Is there a recognisable thread in light, colour and subject?
Check each image: which visitor question does it answer? If none, it is decoration.
Look for stock photos on your site using a reverse image search. Do you find the same image on many other sites?
Check whether the source, licence and, where applicable, consent are documented for each image.
Measure the file sizes of the largest images (right-click, properties, or a browser tool).
Open the page without images loaded, or with alt text displayed. Is the information still understandable?
Check on a phone whether the important parts of the images are preserved.

If you find more than two weaknesses, a targeted overhaul is worthwhile before a new design. The page layout is described in structure of a company website, and the texts for it in website copy.

Photographing products and rooms yourself: a simple set-up

Not every photo needs a studio. For products, details and rooms, simple means are enough to build a clean, recognisable series of images. What matters is a fixed set-up that can be repeated.

Location and light. A table near a large window, ideally with north light or an overcast sky, gives soft light. Direct sun creates harsh shadows. A white sheet of paper or a polystyrene board on the opposite side brightens the shadows.

Background. A plain card, a large tile or a calm piece of fabric. Use the same material for a series.

Camera and tripod. A smartphone on a tripod or a firm support avoids camera shake and keeps distances the same. Wipe the lens beforehand.

Perspective. Always work from the same angle: head-on, slightly from above or at an angle. Repeatability makes series look calm.

Framing. The product fills the picture, with a little air at the edge so that crops for other formats also work.

Details and scale. A shot with a hand, a tape measure or a familiar object shows the size. Close-ups of material, workmanship and special features build trust.

Editing. Match brightness and white balance, sharpen lightly, crop to fixed dimensions. Nothing more.

Rooms are best photographed in daylight, tidied, and with the lights on that suit the daylight. Straight lines, a shot from hip to eye height, and keeping the window out of the picture or including it deliberately. Several perspectives per room give a better impression than one wide-angle photo.

Setting up an image archive: order for files, rights and texts

Over time many images accumulate. Without order, nobody knows which version is the current one, where it came from and whether it may be used. A simple image archive solves this.

Component	Implementation	Benefit
Folder structure	By topic or service, with “Original”, “Web” and “Print” beneath	Quick finding, no mix-ups between versions
File names	Descriptive, without umlauts, with a date or version if needed	Less searching, better findability on the web
Rights list	Spreadsheet with image, source, licence, photographer, consents, expiry date	Proof when questions arise, deadline for deletion
Alt text list	Spreadsheet with image and description	Reuse, consistency
Usage list	Which image is on which page?	Quick replacement when something changes
Backup	Originals additionally stored in another location	Protection against loss

The archive does not have to live in specialist software. A well-named folder in your file storage plus a spreadsheet is enough for most businesses. What matters is that one person is responsible and that the archive is updated with every new image file. For design and brand, see brand strategy.

Image terms on the web

Imagery: The consistent style of all of a brand's images, graphics and icons.
Mood board: A collage of example images that captures the mood and style of a design.
Alt text: A description of an image for assistive software and search engines.
Vector graphic: A graphic made of mathematical shapes, infinitely scalable (SVG).
Raster graphic: A graphic made of pixels (JPEG, PNG, WebP).
Licence: Contractual permission to use a work under certain conditions.
Aspect ratio: The ratio of width to height of an image, for example 3:2.
EXIF data: Additional information stored in photos, such as camera, date and sometimes location.

Our work

Imagery: what we do for you.

Developing an image concept

Which subjects, which mood, which framing and which colour effect suit your brand?

Planning and selecting photos

We draw up a list of the subjects needed and advise on photographers, shoots and selection.

Graphics and icons

Consistent symbols, charts and illustrations that explain content rather than decorate it.

Preparation for the web

Suitable sizes, modern formats and alt text, so that images load quickly and are accessible.

Clarifying rights

Usage rights, licence sources and rights of people shown are documented before an image goes online.

Quality

Imagery: how to recognise good work.

There is a clear thread in subjects, light and colour effect
The most important images show your real work, not just symbolic photos
Every image has a recognisable job
All images have alt text, and decorative ones are marked as such
File sizes are appropriate for phones and connections
Licences and image credits are documented
People in images have given their consent
There is no text in an image that is not also available as text

Costs

Imagery: what it costs.

The main cost is sourcing. Your own photos require a photographer's fee, preparation and time; licensed images cost fees per image or by subscription. Preparing images for the web, by contrast, is relatively inexpensive and pays off in loading time and findability.

The calculation behind it: How we calculate.

What determines the price

Number of subjects needed
Your own photography or licensed images
Illustration and graphics in a style of their own
Preparation and alt text
Usage rights and licence duration

What you can prepare

A list of all places, products and work steps that can be shown
Existing photos in original quality
Examples of image worlds that you like, and ones that you do not
Consent forms for people shown
Access to rooms or building sites for shoots

Pitfalls

Imagery: common mistakes.

Stock photos with staged handshake and smiling scenes
Mixed styles: photo, clip art and illustration on one page
Images without alt text, or with text in the image
Unclear licences and missing image credits
Files straight from the camera, several megabytes in size

Frequently asked questions

Questions about imagery.

Are stock photos bad in principle?

No, they can fill gaps, for example with abstract topics. Choose deliberately, avoid the commonest subjects, and label licences properly.

Do I need a photographer?

For the most important subjects (your work, your product, your premises) it is almost always worth it. We give you a shot list and tips for preparation.

May I use images from the internet?

Only with express permission or under a licence that allows the use. An image that can be found on the internet is therefore not free.

What is alt text?

A short description of an image's content for screen readers and search engines. It describes what can be seen and why it is relevant. A guide is in the article Alt text for images.

How large should images be?

As large as necessary, as small as possible: matched to the display size and in a modern, compressed format. Details are in the article Optimising images.

May we use AI-generated images?

Legally and in terms of design, this is a shifting field. Check the licence terms of the tool, label images where necessary, and do not use them for things that promise authenticity, such as references or customer testimonials.

How many images does a page need?

As many as are needed to answer questions. A service page often manages with three to five well-chosen ones. Better a few that show something than many that merely fill space.

May I show photos of customer projects?

Only with the customer's consent, and with regard to the rights of third parties, such as in buildings or people in the picture. Clarify this in writing before publication.

How do I show my work if customers do not want to be pictured?

Show the result without recognisable people and without details that point to the customer, for example just the room, the product or the façade, once the customer agrees. Describe the starting situation and the approach in the text, so that the image does not have to carry everything alone.

What image size makes sense for a header image?

That depends on the layout. As a guide, two to three times the display width is usually enough (for high-resolution screens), and no more. It is worth providing several sizes and letting the browser choose. Files in a modern format stay much smaller than classic JPEG files.

Do I need image credits on the page?

That depends on the licence. Some licences require attribution, others do not. In any case, note internally where an image comes from, and check the licence text before you decide.

Guides

Want to clarify imagery for your business?

Send us your website address and your most important question about imagery. You will receive a personal assessment.

Book an initial consultation