In the trades, hospitality and healthcare practices, the decision to pick up the phone is often made by the picture rather than the paragraph above it. Someone planning a bathroom renovation is not looking for adjectives; they are looking for a bathroom that looks like theirs — the way it looks now, before the work. That is why project photos are the part of a business website that can do the most work and gets taken seriously the least: forty unrelated shots sit in a gallery, and the one image that would have answered the question is missing. This article shows how phone photos become references that hold up: the same framing for before and after, task and solution in two sentences, scope and duration instead of superlatives, three strong projects instead of forty arbitrary shots — and the rights that need to be settled before anything goes online.
Why the image is read before the text
A page's first impression is usually an image, and that can be measured. In 68 percent (HTTP Archive Web Almanac) of cases the largest visible element on a page is an image — precisely the element the eye lands on first and the one page-speed measurement waits for. Images dominate the payload as well: on a mobile home page, a median of around 900 kilobytes (HTTP Archive Web Almanac) goes to images alone, and the largest image on a page weighs a median of 135 kilobytes (HTTP Archive Web Almanac). So a discussion about project photos is not a discussion about decoration. It is about the largest and most visible building block on the page.
Then there is the market situation. German craft registers listed 1,038,126 (German Confederation of Skilled Crafts) businesses, together generating around 783.2 billion euros (German Confederation of Skilled Crafts) in revenue. On the demand side, the consumer advice centres recommend obtaining and comparing two to three (Verbraucherzentrale) quotes before awarding a job. In practice that means your website rarely sits alone on the screen; it sits next to two others. And since 93 percent (Federal Statistical Office) of people aged ten and over are online and around 82 percent (Statista) of people aged 16 and over use a smartphone, that comparison usually happens on a display smaller than the photo you are choosing right now.
What this article deliberately leaves out
The difference in one sentence
What separates a reference from any old photo
The most common state of affairs on business websites is the uncommented gallery: a wall of tiles collected over years. It fills quickly and still achieves little, because it leaves all of the interpretation to the visitor. The eye lands on an image that raises a question — which property, what scope, how long, what did it look like before? — and finds no answer. That is exactly where the path to an inquiry breaks off, even though the work was good and the picture shows it.
| Shot in the gallery | What the visitor is missing | Reference that holds up |
|---|---|---|
| Finished bathroom, bright and staged | What did the room look like before? | Two shots from the same vantage point, before and after |
| Close-up of a joint | What was the job actually about? | Task in one sentence, solution in one sentence |
| Team in front of the building | How large was the project? | Area, unit count or quantity, in a unit people recognise |
| “Another lovely project” | How long does something like this take? | Duration in working days, plus the number of people on site |
| Twelve photos of the same site | Which one am I meant to look at? | Three to five shots, in the order the work happened |
| Photo without place or date | Is this current and near me? | Year, town or radius, type of property |
The effort behind that difference is smaller than it looks. Five details do the work, and every business already has them, because they appear on the quote and on the invoice. They only need to be written down while photographing and placed next to the image afterwards. Set the routine up once and each project takes a few minutes.
- Task: what prompted the job and what was supposed to be different afterwards? One sentence from the customer's point of view, without jargon.
- Solution: what was done, with which material or method? One sentence that explains the decision rather than repeating a line item.
- Scope: a number with a unit anyone can place — square metres, units, linear metres, seats, treatment rooms.
- Duration: working days and headcount, with a note on drying or delivery times in between where relevant.
- Place and time: year plus town or radius. That answers the questions of proximity and currency in four words.
- Consent: who agreed to publication, when and for what? This does not appear on the page, but it belongs in your records.
Before and after: the same framing
The before-and-after pair is the most effective form of reference, and it usually fails on one small thing: the two shots are taken from different positions. The eye then compares two perspectives instead of the work, and the effect evaporates. Photograph from the same spot, at the same height and with the same orientation, and you get a pair that explains the difference without a single word.
Mark the vantage point
Before the first shot, pick a spot and mark it: masking tape on the floor, a cross on the measurement plan or a screenshot of the map view. Come back four weeks later and you will not find the spot again otherwise.
Keep the height constant
From the hip, at eye level or on a tripod — what matters is that the second visit uses the same height. A short note with the photo (“eye level, standing”) is enough.
Fix orientation and format
Landscape for rooms and facades, portrait for narrow subjects. The format stays the same across both shots, otherwise you have to crop later and the framing drifts.
Choose comparable light
An overcast sky is the most reliable condition because hard shadows are absent. Shoot at a similar time of day where possible; artificial light in the evening adds a colour cast that reads as retouching.
Tidy up with judgement
Tools, cables and coffee cups can leave the frame. Structural defects that are part of the job stay in — otherwise the before photo shows a situation that did not exist.
Take more than you need
Three variants per vantage point cost twenty seconds: one straight on, one a step back, one detail shot. On the second visit that gives you the matching counterpart.
The trick for the second visit
Two things need settling before technique matters. First: the before photo is taken before work starts, usually during the measuring appointment. Miss it and it cannot be recovered — so “take before photos” belongs on the site-visit checklist rather than in the realm of good intentions. Second: the client's consent is discussed at that same appointment, while everyone is on site anyway. Together the two cost less than five minutes.
For presentation on the page: two images side by side labelled “before” and “after”, at the same size and in the same aspect ratio. Sliders that drag one image across the other look good on large screens and get fiddly on small ones; if you use them, show both shots separately underneath as well. What makes an interaction workable on a phone is described in the article on mobile usability.
Task and solution in two sentences
Two sentences sit next to every image pair — not one, not eight. The first describes the starting point from the customer's perspective, the second the solution from the business's perspective. That split works because it mirrors how the reader searches: first she checks whether her problem is the same, and only then does the method interest her. Mix the two and you lose the first check, and with it the second.
| Wording on the page | Why it does not hold up | Verifiable version |
|---|---|---|
| High-quality full renovation of existing stock | No trigger, no property, no scope | 1970s bathroom, loose tiles, leaking shower |
| We brought all of our expertise to bear | Describes the business, not the task | Rebuilt with new waterproofing, level-access shower and new wiring |
| State-of-the-art technology deployed | No product, no method, no reason | Heat pump instead of a gas boiler, because the connection room already existed |
| Fast and tidy execution | No timeframe, no yardstick | Four working days, two people, usable from day five |
| To the fullest satisfaction of the client | No verifiable basis | Handover accepted without defect notice, on the agreed date |
A simple sentence kit helps when writing feels hard. It fits on an index card and can be filled in for any project in minutes — the details are already on the quote.
- Task: “[property] from [year or condition], [problem in three words].” Sample sentence as a template: “1970s bathroom, loose tiles, leaking shower.”
- Solution: “[method or material], because [reason].” The reason is the most valuable part, because it shows that a decision was made rather than a list worked through.
- Scope: “[number] [unit]” — six square metres, 180 square metres of facade, 42 seats, three treatment rooms.
- Duration: “[number] working days, [number] people”, extended where needed by waiting times outside the firm's control.
- Particularity: one sentence on what set this job apart from routine — narrow access, business running throughout, listed building, night work.
Linguistically the same rules apply as everywhere else on the site: short main clauses, concrete nouns, no superlatives. How promotional phrasing translates into plain statements is shown with further examples in the article on writing website copy people actually read.
Scope and duration instead of superlatives
Superlatives are the opposite of evidence: they assert a rating the business awarded itself. Numbers from your own job, by contrast, can be checked without anyone looking anything up — they are in the measurements, the timesheet and the invoice. The effect is twofold: the reference becomes more credible, and at the same time it pre-qualifies inquiries. Someone who reads 180 square metres and has 30 gets in touch with the right expectation.
- Area or quantity: square metres, linear metres, cubic metres, unit counts. State the unit and do not round upwards.
- Duration: working days instead of “fast”. Where waiting periods fall in between, state them separately — screed drying is not the firm's build time.
- Crew: how many people were on site, with what qualification? Two journeymen and a master craftsman is a statement; “our team” is not.
- Period: month and year are enough. A reference without a date ages unnoticed and, after a few years, reads as evidence of standstill.
- Conditions: business running throughout, occupied property, night work, listed building, narrow access. That is exactly how readers recognise whether the firm knows their situation.
- Outcome in factual terms: what is different now — level-access shower, second fire exit, step-free entrance? Factual outcomes travel further than adjectives.
- Own figures only: anything not from your own records does not belong in a reference. External metrics need a source and rarely have a place in a project description.
Invented outcome figures are expensive
That leaves the price. In a reference it is permitted and often helpful, provided it is given as a total price with a date attached — “order volume around 12,000 euros including VAT, as of spring 2026” is an honest statement. What matters is the note that a cost estimate is non-binding: if the price rises by more than 15 to 20 percent (Verbraucherzentrale), the firm has to say so. Which form of presentation fits your business is covered in the article on showing prices on your website.
Three strong projects instead of forty shots
Volume is the most common mistake and the easiest to fix. With an average of 66.6 images (WebAIM Million) per home page, the web already carries a considerable image load — a reference gallery with forty shots adds to it without making the decision any easier. Three fully described projects beat forty uncommented pictures, because each of them answers a question instead of raising a new one.
Selection follows a simple grid. It covers the three cases people suspect apply to them, and it translates to any trade and any practice.
- The typical job. What the business does most often. This reference reaches the most readers and belongs first.
- The demanding case. Narrow access, business running throughout, listed building, unusual technology. It answers whether the firm handles difficult situations too.
- The small job. The repair, the single measure, the half day. It lowers the barrier for everyone who believes their request is too small to bother with.
- Optionally the most recent job. If a fourth project is shown, make it the newest one — it proves the site is maintained without a date having to claim it.
For upkeep, one rule has proven itself: when a project comes in, one goes out. That keeps the selection sharp, the page short and load times reasonable. Removed projects are not deleted but archived — they remain available for quotes and conversations without lengthening the website.
The test before publishing
One page per reference instead of a PDF gallery
References that live in a PDF file are lost for most purposes. The file is rarely opened, it loads slowly, it is hard to read on a phone, it shows up in search results as a foreign body at best, and the path to an inquiry ends at the back button. The same goes for an image gallery without text — the web variant of the same problem. What works is a page per project with an address of its own.
| Presentation | Why it does not work | What works instead |
|---|---|---|
| Reference folder as a PDF | Rarely opened, unreadable on a phone, leads to no next step | One page per project with a descriptive address, image pair and two sentences |
| Image gallery without text | No task, no scope, no order; every click is guesswork | Labelled image pair, with task, solution, scope and duration underneath |
| Everything on one long page | Slow to load, no entry point from search, nothing to link to | Overview page with tiles, and a short detail page per project behind it |
| Blog posts as a substitute for references | Mixes project evidence with advice, ages in the archive | A standalone reference section, with links from the service pages |
| References only inside quotes | Works after first contact, not before it | Publicly visible, so the shortlisting happens before the inquiry |
Structurally that gives you two levels: an overview page with three to six tiles, and behind it a short page per project with its own address. Each service page carries one sentence pointing to the matching project, and each reference offers a way back to the service. How this section fits into the overall site plan is described in the article on which pages a business website needs.
- Headline with property and place: “Bathroom renovation in a terraced house, Hildesheim district” — specific enough for search, restrained enough for data protection.
- Image pair at the top: before and after side by side, same size, labelled.
- Two sentences: task and solution, directly below the image pair.
- Key facts as a short list: scope, duration, crew, period, particularity. Five lines are enough.
- Two to four further images: in the order the work happened, each with a caption that explains something.
- Link to the service: one sentence linking to the matching service page, so the path continues.
- Next step: a form link or a phone number with availability, visible without a long scroll.
- Note on editing: if images were substantially edited, a short sentence about it — more on that below.
Two side effects are worth mentioning. First, reference pages with a location and property type answer exactly the searches people run before commissioning work; how that connects to the rest of your local presence is covered in the article on local visibility for local businesses. Second, project pages can be marked up cleanly so search engines can relate image, place and service — the basics are explained in the article on structured data in search results.
A next step belongs under every reference
Consent, image rights and property access
Four questions need answering before publication: may the property be shown, may the people in the picture be shown, who owns the photographs, and was photography permitted at that location at all? Each question has its own legal basis, and none of them can be substituted by another. The effort still stays manageable once the clearance becomes part of the routine rather than the exception.
The client's consent comes first. A property photo shows someone else's property, often a family's living situation as well; without agreement it does not belong on a website. In practice a short written agreement naming purpose, media and scope does the job. Where the details relate to an identifiable person, data protection is added: processing requires a legal basis under Article 6(1) (Regulation (EU) 2016/679), in this constellation regularly consent. It can be withdrawn at any time under Article 7(3) (Regulation (EU) 2016/679), and under Article 17(1) (Regulation (EU) 2016/679) there is a right to erasure where the data are no longer necessary for the original purpose or consent has been withdrawn.
The second point concerns recognisable people in the picture — staff, customers, passers-by, guests. Here German law on the right to one's own image applies.
Portraits may be disseminated or publicly displayed only with the consent of the person depicted.
After the death of the person depicted, dissemination requires the consent of relatives for ten years (Federal Ministry of Justice, Section 22 KunstUrhG). The exceptions in Section 23 KunstUrhG (Federal Ministry of Justice) — portraits from the sphere of contemporary history, people as incidental to a landscape, assemblies and processions, and portraits in the higher interest of art — are narrower than they are commonly understood to be, and they are additionally subject to the legitimate interests of the person depicted. For a project reference they generally do not carry. Relying on them is a risk that is not merely civil: the law provides for imprisonment of up to one year (Federal Ministry of Justice, Section 33 KunstUrhG) or a fine, prosecuted upon application.
The third point is copyright in third-party photographs. Photos from a commissioned photographer, images from the client, shots from the architects' office or manufacturer images do not automatically belong to the business that wants to show them. What is needed is a granted licence with the right scope, that is, for the website and for the duration of publication. The right to be named as the author must be settled as well. Protection lasts a long time: photographic works are protected until 70 years (Federal Ministry of Justice, Section 64 UrhG) after the author's death, simple photographs without creative character for 50 years (Federal Ministry of Justice, Section 72 UrhG) after publication or first lawful communication to the public. When it gets expensive, the well-known cap rarely helps: it limits recoverable legal fees to a value in dispute of 1,000 euros (Federal Ministry of Justice, Section 97a UrhG) only for natural persons who do not use the works for their commercial or self-employed activity — which does not apply to a business.
The fourth point is the location. Interior shots touch on the occupier's right to control access, which follows from ownership and possession (Sections 903 and 1004 BGB, Federal Ministry of Justice): whoever enters rooms photographs there with the permission of the person entitled — for practices, restaurants and flats that is the owner or tenant, not the contractor carrying out the work. Exterior shots, by contrast, benefit from freedom of panorama: works permanently located on public ways, streets or squares may be photographed and distributed from publicly accessible places (Section 59 UrhG, Federal Ministry of Justice). A shot from the pavement is therefore unproblematic; a shot over the garden wall or from a drone is not.
From the client
A short written consent naming the purpose (website, quote documents), the scope (which shots) and the right to withdraw. Best placed as a paragraph in the order form so it does not get forgotten.
From people in the picture
Consent under Section 22 KunstUrhG, voluntary and documented. Where it is missing: a different framing, a rear view or a shot without people. Blurring is the weaker option because it draws attention.
For third-party photos
Obtain a licence for the website and the publication period in writing, settle attribution and file the agreement with the image. Without proof, the image does not get published.
For interior shots
Permission from whoever controls access, that is, the owner or tenant. In practices and hospitality, also clarify whether guests, patients or staff may appear in the picture.
Documentation decides the dispute
Label editing and substantiate figures
There is a line between correcting an image and altering it, and it can be described well. Cropping, straightening and moderate brightness and colour correction reproduce what the eye saw on site — that is craft and needs no note. Removing distracting objects, swapping the sky, furnishing rooms digitally, recolouring facades or placing a visualisation next to real photographs no longer shows the result but an idea of it. At that point a sentence belongs with the image.
The yardstick is the same as for outcome figures: it is unfair to mislead about material characteristics of a service (Section 5(1) UWG, Federal Ministry of Justice). An image showing a state that does not exist is a statement within the meaning of that provision. On top of that comes labelling of artificially generated content: the relevant transparency duties take effect from 2 August 2026 (Verbraucherzentrale), and the practical yardstick is that labelling is required where consumers cannot tell that content was artificially generated or altered so that it appears genuine (Verbraucherzentrale).
- Fine without a note: cropping, straightening, brightness, contrast, white balance, noise reduction.
- Note required: removed or added objects, swapped sky, digital furnishing, changed colours of building components.
- Clearly label: visualisations, renderings and generated motifs — with one word in the caption, not in the small print.
- Do not show: other firms' projects as your own, manufacturer stock images inside a reference, images without cleared rights.
- File it traceably: store the original file and the published version together so the editing status can be evidenced.
Caption wording to reuse
A related case is customer statements placed next to a reference. They are powerful, but they carry duties of their own: anyone advertising with reviews must state whether and how their authenticity is checked. What to watch for and which disclosure text holds up is covered in the article on legally safe customer reviews.
From phone photos to usable project images
The equipment is already in your pocket. Current smartphones deliver more than enough quality for references — what matters is not megapixels but vantage point, light and order in the frame. The following sequence has proven itself in daily practice and costs a few minutes per project.
- Clean the lens. The most common cause of soft, milky shots is a fingerprint. A wipe on your sleeve fixes more than any retouching.
- Choose landscape. Rooms, facades and installations read better in landscape, and the images later fit the page width without cropping.
- Switch the grid on. The camera app's guides keep edges straight. Tilted door frames can only be corrected later by cropping.
- Fix and note the vantage point. One metre left of the door, eye level, standing. The note goes into the same file as the project data.
- Do not use digital zoom. Step closer instead. Digital zoom only enlarges pixels and costs exactly the sharpness that detail shots rely on.
- Three variants per subject. One straight on, one a step back, one detail. When selecting later, that is the difference between a yield and a repeat visit.
- Tidy away what is not part of the job. Tools, packaging, cups. What structurally belongs to the starting situation stays in frame.
- People only with consent. If it is not settled, change the framing or wait until the area is clear.
- File and name immediately. Project number, property, place, date, before or after. What gets named on the day is still findable a year later.
- Select on the same day. Keep five images, archive the rest. The choice is easier while the memory is fresh.
Then comes the step that gets skipped most often: file name and alternative text. Practice on the web is sobering — 53.1 percent (WebAIM Million) of the home pages examined contain images without alternative text, it is missing for 16.2 percent (WebAIM Million) of all images, and a further 10.8 percent (WebAIM Million) of the texts present are questionable, such as file names or the word image. For references that is a particular shame, because the description already exists: the alternative text is the short version of what the picture shows. How such texts are written and which formats suit delivery is covered in the article on image formats and alternative text.
Time budget per project
Where references sit in the site structure
References work where a decision is pending, not where there happens to be space. On the home page, three tiles with an image pair and half a sentence leading to the overview page are enough. Each service page carries a single link to the matching project — not three, otherwise the service page becomes a second reference page. The overview page itself stays short and is sorted by type of work rather than by date.
- Home page: three tiles, each with a before-and-after preview, property type and scope on one line.
- Service page: one link to the project that shows exactly this service, right after the service description.
- Reference overview: three to six tiles, grouped by type of work, with one sentence per tile.
- Detail page per project: image pair, two sentences, key facts, two to four further images, one next step.
- About page: no second reference block, just a link. That page is about people and qualifications, not projects.
- Contact page: a small preview is enough, so the last page before the inquiry does not stand without evidence.
Technically one rule stays important, because reference pages are image-heavy: every image gets width and height attributes so the text does not jump while loading. That is not widespread — only 32 percent (HTTP Archive Web Almanac) of images on the web carry these attributes. On a phone, this detail decides whether the key facts stay readable or slide under an image that arrives late.
Implemented in ten steps
The route from a box of photos to a reference page is less a project than a sequence. Work through the following points and after two or three sessions you have a reference section that prepares inquiries instead of filling space.
- Review what exists. Gather all project photos and ask one question: for which of them can task, scope and duration be reconstructed from your records? Everything else is archive material.
- Pick three projects. Typical job, demanding case, small job. Nothing more is needed to start.
- Clear the rights. Per project: client consent, people in the picture, origin of the photographs, permission for interiors. Anything unresolved is set aside rather than published hopefully.
- Fill the gaps. Where a before photo is missing, note the project for later and document the next comparable job from the site visit onwards.
- Write two sentences per project. Task and solution, using the sentence kit. Fifteen minutes per project is enough.
- Add the key facts. Scope, duration, crew, period, particularity — taken from the quote and the timesheet, not estimated.
- Create the pages. One overview page, three detail pages with descriptive addresses, each with image pair, sentences, key facts and a next step.
- Prepare the images. Crop to a consistent aspect ratio, assign file names, write alternative texts, set width and height.
- Set the links. From the home page to the overview, from each service page to a project, from each project back to the service and to the form.
- Fix a maintenance rhythm. Half an hour twice a year: add a new project, archive the oldest, check consents and dates.
In XICflow, gallery and reference blocks are part of the kit: labelled image pairs, key-fact lists, project tiles and captions are ready as blocks, alternative texts are mandatory fields, and image optimisation — formats, sizes, aspect ratios — runs automatically on publishing. A new reference is therefore a filled-in block rather than a layout project. What that looks like in a finished state is shown in the example websites in our demos; which blocks sit behind it is described on the feature overview.
The short version
Sources and studies