Before and after on interior design websites, done honestly

An honest before and after uses real photos taken from the same camera position. Any render or retouching is labelled, and the pair shows only work the studio actually did. The caption credits the architect and the makers, and the client and the photographer have agreed in writing. A comparison made this way persuades people more than a polished gallery does.

Why does a before and after persuade a prospective client?

It shows the part of the job that a finished photo hides: the room the client had, next to the room they got.

A gallery of finished interiors tells a visitor that the studio has taste. It tells them nothing about what the studio would do with a dark 1970s kitchen or an awkward hallway. Most people who contact an interior designer are still living in the before. When you show them that state and what came after, you answer the question they actually have.

That is also why people misuse the format. The better a before and after works, the more tempting it is to make the change look bigger than it was. If a visitor spots one faked comparison, they start to doubt every other project on the site.

What makes a before and after dishonest?

It is dishonest when it makes the change look bigger than it was, or makes the studio's part in it look larger. In practice we see four habits that do this.

Showing a render as the after

A render shows what the room could look like once it is built. The most common problem we see is a render placed next to a real before photo, with the visitor left to assume the room was built that way. It is also the easiest to fix. If the project is not finished, label the image as a design proposal, or wait until you have the photos.

Making the before look worse than it was

Imagine a phone photo taken at dusk with the lights off, next to a professional shoot at midday with every lamp on. That pair compares two cameras and two times of day, and it says little about the rooms. A before photo that looks darker, messier or more distorted than the real room misleads visitors as much as a doctored after.

Retouching that changes the room

Some retouching is normal: correcting verticals, balancing white, removing a stray cable. Retouching that changes what was built crosses the line. That includes swapping the view from the window, adding daylight the room never gets, deleting radiators or sockets, or recolouring a floor to match the mood board. A rule of thumb: if the client would notice the difference standing in the room, you have gone past a correction.

Claiming work the studio did not do

Say a house was gutted, extended and re-plumbed. A before and after of that house makes the interior designer look responsible for all of it. If an architect moved the walls and a contractor built the extension, the caption has to say so. Clients talk to each other, and architects read their competitors' websites.

How should the two photos be taken?

Take both photos from the same spot with the same lens, and light the before fairly. The closer the two frames match, the more the viewer notices the design change instead of a camera change.

This is the checklist we give studios:

• Mark the tripod position on the first site visit. A strip of tape on the skirting board and a phone photo of the tripod in place are enough.
• Write down the focal length and camera height. If you use a wide lens for the before and a longer lens for the after, the room seems to change size.
• Shoot at a similar time of day, with the room's own lights on in both photos. A rule of thumb: if the tripod moved more than a hand's width, retake the photo.
• Tidy the before, but do not stage it. Clear the obvious clutter so people can see the architecture, and otherwise leave the room as it was.
• Keep the originals. If anyone ever questions an image, the untouched raw files will settle it.

Most studios think about the before photos only once the builders are in, which is too late. Put the before shoot in the project schedule, on the day of the first measured survey. The rest of the photography, from ordering a project to choosing the frames, is in how to photograph and order a project for the web.

Slider, side by side or sequence: which format works best?

The right format depends on how closely the two frames line up. A slider needs almost identical framing. Side by side can handle small differences. A sequence works when the viewpoints are different.

• Slider. The two images sit on top of each other, and a handle reveals one over the other. It makes the biggest impression, but it is also the least forgiving: if the camera moved at all, the image visibly jumps.
• Side by side. The two images sit next to each other on a computer and stack on a phone. It is simpler, it loads predictably, and it works when the frames are close but not identical.
• Sequence. The before comes first, then a few photos taken during the work, then the after, as part of the project story. It suits structural changes where the viewpoints could never match.

One project can use both: a slider for the kitchen, where the tripod mark survived, and a sequence for the extension, where the wall the camera stood against no longer exists.

How we build the slider

We avoid heavy slider plugins. A before and after needs two images, one native range input and a few lines of CSS. This is the pattern we use:

<figure class='ba' style='--pos: 50%'>
 <img src='kitchen-after.webp' width='1600' height='1067'
 alt='Kitchen after renovation: oak cabinets, pale stone worktop, window left'>
 <img class='ba-before' src='kitchen-before.webp' width='1600' height='1067'
 alt='Same kitchen before: white laminate units, tiled splashback, same window'>
 <input type='range' min='0' max='100' value='50'
 aria-label='Drag to compare before and after'>
 <figcaption>Kitchen, Amsterdam Oud-Zuid. Before 2024, after 2025.</figcaption>
</figure>

The before image sits on top of the after and is cropped with clip-path: inset(0 calc(100% - var(--pos)) 0 0). A single input listener updates --pos. We build it this way for three reasons.

1. Keyboard and screen readers work without extra code. A native range input responds to the arrow keys and reads out its value. A custom div with drag handlers does neither, unless someone writes all of that by hand.
2. Nothing jumps while the page loads. Both images have a width and height, so the browser saves the space before either file arrives. Speed on photo-heavy pages is covered in Core Web Vitals for image-heavy portfolio sites.
3. It still works without the script. If the script fails, the page shows the two captioned photos one after the other, which is still an honest comparison.

Each image gets its own alt text that describes what is actually in the frame. A single alt text that just says before and after tells a screen reader user nothing. Google's own image SEO guidance¹ asks for descriptive alt text for the same reason.

What permissions does a studio need before publishing?

You need written permission from the client and from whoever took the photos. If you use a render, get permission from the person who made it too. What follows is a checklist, not legal advice.

The client

A before photo shows how someone used to live, often with their belongings still in shot. Many clients are happy to see the after published and much less happy about the before. Ask for permission for each one separately, ideally in the contract at the start of the project, and give the client the right to withdraw it.

In Europe, photos of a private home can also count as personal data when someone can identify the household. A family photo on a shelf, a recognisable view or a street name in the caption is enough. Crop or retouch out anything that identifies them, and never publish an address. The caption can name the neighbourhood instead.

The photographer

In most of Europe the photographer owns the copyright in the photos, unless a contract says otherwise or they took them as an employee. A licence for the studio's portfolio does not always cover advertising, press or other platforms. Before a professional shoot goes online, check that the licence covers your website and social media. If the client took the before photos themselves, they own that copyright and need to agree too.

The law on misleading advertising

In law, a studio's website counts as commercial communication. In the EU, the Unfair Commercial Practices Directive² bans practices that deceive the average consumer or are likely to. That includes the overall presentation, even when each separate element is technically accurate. A render shown as a finished room, or a before shot in deliberately worse conditions, is that kind of presentation. Honest labels cost nothing and remove the risk.

What should the caption under a before and after say?

The caption should give visitors what they need to judge the comparison fairly. That means where and when, what the studio did, who else worked on it, and what was changed in the image.

We set up this caption structure as fields in the CMS, so a missing line shows up before publishing instead of after:

• Room and area: kitchen, Amsterdam Oud-Zuid. Never a street address.
• Dates: before photographed 2024, after photographed 2025.
• Studio scope: interior design, kitchen joinery design, lighting plan.
• Collaborators: architect, contractor, joiner, each named with their permission.
• Photography: before by the studio, after by the named photographer.
• Image notes: perspective corrected, no other retouching. Or: after image is a design visualisation, project under construction.

Studios skip that last field most often, and it matters most. One line saying the after is a render turns a misleading image into an honest proposal. Naming the collaborators also helps with search. It connects the project to the architect's and makers' own sites, and they often link back.

Where does before and after belong on the site?

It belongs inside the project page, near the top, and on the page where a visitor decides whether to get in touch. We would not put it in a separate gallery of transformations with no project around it.

On its own, a before and after only shows that a room changed. Inside a project, next to the brief, the constraints and the finished photos, it also shows how the studio thinks. We put the strongest comparison directly after the project introduction. A visitor who has scrolled that far is asking whether the studio could do the same for their own room.

The second place is the consultation or enquiry page. One comparison with a good caption, next to the enquiry form, answers the doubt a hesitant visitor has at that moment. How to structure that page is in the interior designer website that books consultations.

The before and after is a small part of a studio site, but it is where visitors most easily judge whether the studio is honest with them. For how project pages, photos and enquiries fit together, see our page on web design for interior designers.