Skip to content
Design and images

Before-and-after galleries that bring in the work

A before-and-after pair only convinces when both shots share one standpoint and the caption names the object, the scope of work and the number of days on site.

15 min read ProjektfotosVorher-NachherReferenzenGalerie

In short and in plain language

This article is about before and after photos. They show well how good your work is.

Take both photos from the same spot. Take the first photo before you start.

Add a short note to each pair about what you did. Check first if people, names or house numbers may be shown.

Many photos can make a page slow. So each photo needs more than one size. It also needs a short text for people who cannot see it.

We build pages like this for trade firms at a fixed price.

Trade businesses as a rule show photographs on their website. A before-and-after pair, though, is a rare sight there. Yet the pair is the form of image that comes closest to making quality of workmanship visible: the shot taken before the first move and the same shot after handover, from the same standpoint. Quality of workmanship is the selection criterion that 86.7 percent (Appinio) of respondents rate as important or very important — and a point that website copy can hardly evidence. This article describes how a usable pair comes about, what has to sit next to it, what needs settling before publication and how the gallery avoids becoming a brake.

Key takeaways

  • A before-and-after pair only works when both shots were taken from the same standpoint, at the same height and with the same focal length. If the angle shifts, the eye compares two pictures instead of one piece of work.
  • The before shot is taken at the survey visit, not during strip-out. Once the first slab is lifted or the first cabinet moved, the starting condition is gone — it cannot be recreated, and a staged shot would be a false statement.
  • Without a caption the pair stays decoration. Object, scope and duration turn two photographs into a description of work that stands up even without naming the client.
  • People, house numbers, doorbell plates and number plates have to be settled or cropped out before publication. Consent can be withdrawn at any time under the General Data Protection Regulation.
  • A gallery of twenty pairs is forty images. Without multiple image sizes, without deferred loading from the second row down and without alt text it becomes a brake on a phone.

Why the pair proves more than any single shot

A single photograph of finished work shows a condition. It does not show how much ground lay in between — and that ground is exactly what the business is paid for. In a representative survey of 1,008 people in Germany, 86.7 percent (Appinio) rate quality of workmanship as important or very important, followed closely by keeping to deadlines at 86 percent (Appinio) and transparency on cost at 83.3 percent (Appinio). All three criteria can be asserted. One of them can be shown with two photographs, and shown without a single sentence about one's own diligence.

The second reason is more sober. Anyone looking for a trade business compares several sites in quick succession, usually in the evening and usually on a phone. Almost one in three respondents searches for tradespeople online (YouGov 2021) — and in that sequence it is not the most thorough text that decides, but whatever can be grasped in a few seconds. A pair of images is read in one second. A paragraph about diligence needs four sentences and will not be read on the third website opened. The pair is therefore less a question of design than of order: it answers first what would otherwise come last.

The third reason concerns the kind of enquiries that arrive. A business that only shows showcase projects receives enquiries about showcase projects. Show the unglamorous repair instead — the damp cellar steps, the split joint, the worn door leaf — and the enquiries match that work. With 1,038,126 (ZDH) businesses entered in the craft registers and the register of trades similar to crafts, the question is rarely whether somebody offers the service, but who makes it recognisable what kind of job they are after. How that can be presented without invented case figures is shown on our page on references.

Where this article connects

The shooting technique itself — light, format, clearing up before pressing the shutter — is covered in the article on phone photographs on site. How to show past work without naming the client is covered in the article on references without client names. And where the gallery finally points depends on whether each trade has its own page: see the article on service pages instead of one combined page.

The same standpoint: how a usable pair comes about

The most common mistake is not poor light but a shifted standpoint. The before shot is taken in passing at the survey visit, the after shot weeks later by feel. Between the two lie two metres of distance, a different camera height and a different crop. A viewer notices this immediately without being able to name it, and starts comparing what is not meant to be compared: not the work, but the two pictures. A pair that does not line up typically reads as two random shots rather than as evidence.

Lining up does not mean millimetre precision. It means the same standpoint on the ground, the same camera height, the same focal length, comparable light. Camera height slips most often, because the first visit is shot standing and the second from a crouch. A chalk cross on the screed, a strip of masking tape on the tile or a fixed reference point outdoors — the third slab from the gully, the corner of the driveway, the lamp post — costs ten seconds and saves the pair. Focal length is held on a phone by choosing the fixed wide setting and leaving the digital zoom alone; every zoom step changes the crop and the magnification and makes the later comparison considerably harder.

  • Mark the standpoint: chalk cross, masking tape or a fixed reference point outdoors, plus a short note on camera height.
  • Choose a fixed focal length and leave the digital zoom alone, otherwise the crop changes between the two shots.
  • Take every subject once landscape and once portrait from the same standpoint, so gallery and header can carry the same pair.
  • Comparable light: both shots at a similar time of day where possible, no harsh midday sun against soft afternoon light.
  • Before the second shot, open the before image on the phone and line the crop up against it.
  • Name both files immediately with object, date and standpoint — six weeks later nobody remembers.

The timing of the first shot matters more than anything else. The before image is taken at the survey visit, that is, before it is even settled whether the job will happen. Once the first slab is lifted, the first component removed or the first cabinet moved, the starting condition no longer exists; it can be neither recreated nor reconstructed from memory. In practice that means: whoever drives out to survey takes three shots before pulling out the tape. Of twenty such visits perhaps eight become jobs — and eight pairs already make a workable gallery. Our page on photos for a trade website describes the shooting side in detail.

Three shots at the survey, three at handover

Overview landscape, overview portrait, one detail from close range — at the first visit and at the last, each time from the same standpoint. These six images carry the gallery, the service page and the directory entry. Anything beyond them is welcome, but these six decide whether an object can be shown at all later on.

Order and presentation: what the visitor sees first

There are three common presentations, and they differ not in taste but in what they achieve. Placed side by side, both conditions are visible at once, but on a phone they shrink to half width. Stacked one above the other, each image stays large, but the two conditions are not in view at once. A slider shows both conditions perfectly aligned, but calls for an interaction not everyone expects and needs a script. Which form is right depends on the trade and on whether the difference lies in a detail or in the overall view.

PresentationWhat it achievesWhere it runs into limits
Side by side in two columnsBoth conditions in view at once, no script needed, works in print and without JavaScriptOn a phone the image width halves; fine details are hard to make out in the narrow column
Stacked one above the otherFull image width even on a phone, a clear order with the starting condition first, robust at any screen sizeThe direct comparison is lost; the viewer has to scroll and compare from memory
Slider across both imagesAligned comparison point by point, strong for facades, floor coverings and paint finishesStrictly requires aligned shots, needs a script and keyboard operation

The order is the same in all three forms: the starting condition on the left or on top, the result on the right or below. That matches reading direction and expectation. Reversing it to open with the attractive picture creates a brief moment of confusion at the second image, and that moment costs more than the first impression it wins. A slider additionally needs operation without a mouse: the handle must be reachable with the tab key and movable with the arrow keys, otherwise the comparison stays closed to a share of visitors. Where the script does not run, both images should sit one above the other rather than not appear at all.

The caption that names the scope

Two photographs without text are decoration. The visitor sees that something has changed, but not what the business did for it or how long it took. Those two pieces of information as a rule decide whether the enquiry arrives, because the prospect is checking whether their own case falls into the same order of magnitude. A caption with three fields does that: object, scope, duration. It sits visibly under the pair — not in the alt text, not in a collapsible nobody opens, and not burnt into the image, where it is neither searchable nor translatable.

  • Object: what kind of component or object it was — flat roof, period window, cloakroom WC, workshop door. Without manufacturer or brand names.
  • Scope: which works were carried out, in the language of the trade. Not "refurbishment" but "membrane renewed, parapet re-flashed, two outlets replaced".
  • Duration: working days on site, not calendar weeks. Quote calendar time and you will be measured against delivery times you do not control.
  • Place at municipality level: town or district, no street and no house number.
  • Year of completion: so that older objects are not read as the current state of play.
  • Starting point in one sentence: what triggered the job — water ingress after heavy rain, a draught at the window, a broken lock.
  • No price without a reference size: a figure without object size and specification becomes an expectation. Anyone showing prices names the reference size next to them.

Technically these fields belong in a data record, not in a run of text under the picture. There is a practical reason: anyone wanting to filter the gallery later by trade or by place needs the details kept apart. And anyone maintaining a separate service page per trade wants exactly those objects shown there, without writing the same text twice. In our projects every object therefore exists as a small data record that gallery, service page and home page all draw on.

project.json
{
  "object": "Flat roof, workshop extension",
  "trade": "roofing",
  "place": "Hildesheim",
  "year": 2026,
  "starting_point": "Water ingress at the parapet after heavy rain",
  "scope": "Membrane renewed, parapet re-flashed, two outlets replaced",
  "area_sqm": 180,
  "working_days": 9,
  "images": {
    "before": "flat-roof-workshop-before.jpg",
    "after": "flat-roof-workshop-after.jpg",
    "alt_before": "Flat roof with standing water at the parapet before the works",
    "alt_after": "The same flat roof after the new membrane, parapet re-flashed"
  }
}

From such a record the caption is generated automatically, in both language versions and identically in every view. Change one detail and it changes everywhere at once. That sounds like effort for a handful of objects, but it pays off from the day the gallery grows past thirty entries and somebody wants to filter by a single trade in their own town. What such a structure looks like on the pages is shown in our design examples.

What has to be settled before publication

A site photograph rarely shows only your own trade. It regularly includes somebody else's house, a car in front of it, a person in the frame, a doorbell plate at the entrance. Each of these points has its own basis, and none of them is disposed of with "but that is our work". The effort stays manageable as long as it is settled before the shot, and becomes tiresome when it surfaces two years later. The following section sorts the points; it does not replace legal advice in an individual case.

For buildings in public space, German law provides what is known as freedom of panorama. Section 59 paragraph 1 of the Copyright Act permits works permanently located on public ways, streets or squares to be reproduced, distributed and communicated to the public by photograph; for buildings, however, these powers extend only to the external appearance (UrhG). The shot has to be taken from a publicly accessible place — taken from scaffolding, from a neighbouring garden or from the air, the rule does not carry. It does not apply to interiors at all; there the owner's consent decides, and that belongs in writing with the job file.

Zulässig ist, Werke, die sich bleibend an öffentlichen Wegen, Straßen oder Plätzen befinden, mit Mitteln der Malerei oder Graphik, durch Lichtbild oder durch Film zu vervielfältigen, zu verbreiten und öffentlich wiederzugeben. Bei Bauwerken erstrecken sich diese Befugnisse nur auf die äußere Ansicht.

Section 59 paragraph 1, German Copyright Act (UrhG), German original wording

External view from the public way

Section 59 of the Copyright Act covers photographing a building from the public way, limited for buildings to the external appearance (UrhG). From scaffolding, from a neighbouring garden or from the air the rule does not apply; there the owner's consent is the safe route.

People in the frame

Portraits may only be distributed or publicly displayed with the consent of the person depicted (KunstUrhG). That covers your own staff as much as the client who happens to be standing in shot. In case of doubt the person belongs outside the crop.

Consent and withdrawal

Under Article 7 paragraph 3 of the General Data Protection Regulation, consent may be withdrawn at any time, and withdrawal must be as easy as giving it (DSGVO). The form belongs with the job: with a date, the extent of use and a note on withdrawal.

Address and number plates

House number, doorbell plate, letterbox and vehicle number plates make a client identifiable. Shift the crop or cover them opaquely — and name the place in the caption only at municipality level, without a street.

For people in the frame, Section 22 of the Act on Copyright in Works of Fine Art and Photography applies: portraits may only be distributed or publicly displayed with the consent of the person depicted (KunstUrhG). Section 23 names exceptions, for instance people appearing incidentally beside a landscape, but withdraws them again where a legitimate interest of the person depicted is infringed (KunstUrhG). For day-to-day operations that means: staff sign a consent form once, which belongs in the personnel file; everybody else comes out of the crop. And consent may be withdrawn at any time under Article 7 paragraph 3 of the General Data Protection Regulation, with withdrawal having to be as easy as giving it (DSGVO) — so anyone pulling their picture need do no more than send a short message.

A nod on site is not documented consent

Verbal agreement is hard to evidence two years later. Record who consented, for which images, for what use and from when — and point to withdrawal in the same document. If the gallery additionally loads a slider or a map view from outside, the consent question arises on the website too: see the article on the cookie banner in a trade business.

Technical side: load time, alt text, operability

A gallery of twenty pairs is forty images. That is a multiple of what an ordinary page carries: the median mobile page contains 13 image elements (Web Almanac 2024). Embed forty unprocessed phone shots and you quickly load several dozen megabytes, which makes the page unusable on the way to a job. The route out is known and needs no magic: several sizes per image, a modern format with a fallback, deferred loading for everything below the first screen. The article on load time on a phone covers it in detail.

Deferred loading has exactly one trap, and it is a common one. The largest image in the first visible area must not be loaded lazily, otherwise the visible page build is measurably delayed. Even so, 9.5 percent (Web Almanac 2024) of the images that form the largest visible element on mobile pages carry the native lazy attribute. In practice that means: the first pair of the gallery loads immediately, everything below it lazily. Supplying width and height in the markup additionally stops the text from jumping as images arrive. 42 percent (Web Almanac 2024) of mobile pages now carry the attribute that offers several image sizes — a rise of eight percentage points (Web Almanac 2024) within two years. Widespread, then, but not yet a matter of course.

  • Serve several image sizes per shot, so the phone does not download the resolution meant for a large screen.
  • A modern image format with a fallback, so older browsers are not left empty-handed.
  • Deferred loading for everything below the first screen, with the first pair excepted.
  • State width and height in the markup so the page does not jump as images arrive.
  • Two different alt texts per pair that name the difference instead of repeating "before" and "after".
  • Make the slider keyboard-operable: reachable with the tab key, movable with the arrow keys.

Alt text is where galleries come apart in practice, and not out of carelessness but because nobody sees it day to day. Across all pages examined, 45 percent (Web Almanac 2024) of image elements have no alt text at all. Success criterion 1.1.1 of the Web Content Accessibility Guidelines requires, already at the lowest level A, that all non-text content has a text alternative serving the equivalent purpose (WCAG 2.2). For a before-and-after pair that means two different texts naming the difference: "flat roof with standing water at the parapet before the works" and "the same flat roof after the new membrane, parapet re-flashed". What the German Accessibility Strengthening Act requires of whom is covered in the article on accessibility in a trade business.

A gallery is not an end in itself. It sits at the end of a short chain: the visitor arrives from a search on a service page, sees two or three pairs for exactly that service, recognises their own case and writes. If the gallery instead exists as a separate page with sixty mixed images, it gets looked at and left again. The difference lies not in image quality but in placement: every pair belongs to a service, and every service needs a page it can sit on. Our services are divided up exactly that way.

Three images at the survey, three at handover from the same standpoint. Immediately afterwards note object, scope in the language of the trade, working days and place at municipality level — those are precisely the details that go missing later.

Who owns the images and where the original files sit is the question that only surfaces when staff change or the site is relaunched. The shots are then on a phone that has left the business, or in an account whose password nobody knows. The same question arises for domain and hosting; the article on domain, hosting and access works through it. For the images the simplest principle applies: the full-resolution originals sit with the business and not only with the service provider, and the signed releases sit next to them.

What stays with the business and what we take on

The photography stays with the business — nobody knows the standpoint like the colleagues who worked there. We take on the preparation: several image sizes per shot, a modern format with a fallback, deferred loading from the second row down, two alt texts per pair and the caption generated from the data record. What that looks like is shown in the design examples; the shooting side is described on the page on photos for a trade website.
This article is based on data from: Appinio on behalf of Bosch Power Tools (representative survey of 1,008 participants in Germany, autumn 2024); YouGov on behalf of Jungheinrich PROFISHOP (2,002 participants in Germany, June 2021); German Confederation of Skilled Crafts (ZDH), key figures of the skilled crafts sector (as of 2025); HTTP Archive Web Almanac 2024, Media chapter; German Copyright Act, Section 59; Act on Copyright in Works of Fine Art and Photography, Sections 22 and 23; General Data Protection Regulation, Article 7; W3C Web Content Accessibility Guidelines 2.2; Google Business Profile Help.

Related Articles

Trades in practice

Websites for joineries: the picture sells

How a joinery gallery shows bespoke work rather than catalogue goods: material and finish in the caption, price ranges for fitted furniture, measure as sale.

15 min read
Law and obligations

Showing past work without naming clients

The best work sits inside private homes. How a trade business shows projects anonymously, what stays possible without a written release and what does not.

15 min read
Law and obligations

Refrigerants from 2027: update your heat pump page in time

New refrigerant deadlines apply to heat pumps up to 12 kW from 1 January 2027. What heating firms should change on service pages, FAQs and funding notes.

20 min read