How to photograph and order a project for the web

Show each project in the same fixed order: one wide shot of the finished room, then the before photo or the plan, then three to six rooms, then two close-up details. Use eight to fourteen images per project. Caption them in your own words, and order them the way you would walk a client through the house.

How many images does one project need?

Use eight to fourteen. That is a rule of thumb, and it works because people decide early. A homeowner or a hotel developer looks at the first two photos and then either keeps scrolling or leaves. Forty images don't give you forty chances to win the job. They put your weakest photo next to your strongest and leave a stranger to do the editing you should have done.

After a shoot it is tempting to publish everything, because the shoot cost money. Don't. The photographer delivered sixty usable files because that is what a day of shooting produces, and that number has nothing to do with how many belong on a page. Keep the rest for press requests, award submissions and your pitch deck. They are useful there, and nobody looking at them is deciding whether to email you.

When we put a portfolio in order, we remove any image that shows a decision already visible in an earlier photo. Two views of the same kitchen taken a metre apart count as one image plus a duplicate.

What order should the images go in?

Use the same order for every project. When your projects share one structure, the portfolio reads as one body of work. When each one is arranged by mood, it looks like a folder of uploads. The order has four parts.

The establishing shot

Start with one wide photo of the main room, taken from the doorway or wherever you would naturally walk in. Show it full width, without clever crops, with only the project name above it. Visitors judge you on this image, so shoot it most carefully and take the most care when you compress it.

The before, or the plan

Second, show the house as you found it, or the plan if you have no before photos. This is the photo that shows you are a designer and not a stylist. It shows what you moved, what was structural, and which changes were design decisions rather than purchases. A phone photo from the first site visit is fine here, and nobody expects it to be well lit.

The rooms, in walking order

Next come three to six photos, ordered as a walk through the house instead of by importance: entrance, living room, kitchen, stair, bedroom, bathroom. Clients describe the project to their friends in this order, and it makes the page easy to follow.

Two closes

End with two close-ups that show the materials, such as a joinery edge, the join between two stones, a handle or the top of a curtain. Two is enough. Six close crops in a row make the page look like a sample catalogue, and the visitor loses sight of the rooms.

What should the captions say?

A caption should say what the photo can't show. Write fifteen to forty words in your own voice about the constraint you were given, the material and where it came from, or the decision that was hard. A caption like Living room, Amsterdam tells the visitor nothing the photo hasn't already told them.

Captions are also the only place on a project page that needs any prose. You don't need a paragraph of marketing above the images, or a headline explaining that light matters. Write the brief, the state of the house, the plan and the materials as short factual lines, and let the photos do the rest.

Alt text is a separate job from the caption. Google's image guidance asks for a plain description of what is in the photo, and screen readers read it aloud. Write it for someone who can't see the photo.

How large should the files be before they go on the site?

Make the long edge about 2,400 pixels and keep each file under about 300 KB. Save them as WebP or AVIF, with a JPEG fallback. Google's WebP documentation¹ reports lossy WebP files 25 to 34 percent smaller than comparable JPEGs at the same quality, and lossless WebP files 26 percent smaller than PNG.

This matters because of Google's speed limit. Largest Contentful Paint should be 2.5 seconds or less² for 75 percent of visits. That is the time until the biggest element on the screen appears, and on an interior design site it is almost always your opening wide shot. A 4 MB opening photo on a phone connection misses that limit by itself, before a single font or script has loaded.

We do three things on every project page. The first image loads straight away with priority, because it is the one Google measures. Every image further down loads only when the visitor scrolls near it. Every image has its width and height set in the code, so nothing jumps around while a page full of large photos loads.

Does this change what I brief the photographer?

Yes, and this is where you gain the most. Write the shot list from the page template instead of going room by room. If the template needs one wide, one before, four rooms and two close-ups, ask for exactly that, plus one alternative of each.

Add two requests. First, ask for a vertical 4:5 version of every room you plan to show full width. Most visitors see your site on a phone, and a landscape photo cropped to portrait loses both the ceiling and the floor. Second, ask for a wide shot of each room from the doorway at standing eye height, even if a lower or angled shot looks prettier. A stranger understands the doorway shot in half a second.

Check what your photo licence actually covers. Photographers often license web use for a set period or region, instead of forever and for all uses. A project page that stays live for six years will outlast a one-year licence. Either way, credit the photographer on the page.

What about before photos and images you did not commission?

Publish the before photo as it is. A dim phone photo of a bad kitchen persuades people more than a rendered version of it. Shooting the after from the same viewpoint and crop helps the comparison more than any slider does. Never edit a before photo to look worse than it was, because once people notice, they stop believing the rest of the page.

Publish press quotes and testimonials exactly as they appeared, with the publication and the date, instead of rewriting them in your own words. Treat project facts the same way. Stating the year, the city and the scope makes a page easier to find and easier to check.

Where does Instagram fit?

Instagram is a good source of photos, but it shouldn't decide how your project pages are built. It pushes you towards square photos and carousels that work as small thumbnails. A website works the other way round: one very large photo has to hold attention for a few seconds. An embedded feed also loads outside scripts into a page you have just spent a week making fast.

A useful public example is Vincent Van Duysen Architects³. The site currently shows the work one project at a time, labelled with name, place and year, and the photos fill the page with almost no text around them. None of that depends on the size of the studio. It comes down to the order of the photos and the labels, and a two-person studio with one finished apartment can do the same.

Award-winning architecture sites show the same pattern: fewer projects, edited more strictly, and no copy between the visitor and the work.

What should I fix first?

1. Cut every project down to eight to fourteen images, and put the strongest wide shot first.
2. Add the before photo or the plan as the second image, even if it is a phone photo.
3. Rewrite the captions to say what the photo can't show, in fifteen to forty words.
4. Export every image again at 2,400 pixels on the long edge in WebP. Then check on a phone that your opening shot appears within 2.5 seconds.
5. Write the next shoot brief from the page template, and ask for a 4:5 vertical of every room.

Most of this is editing, and it costs very little. The sites we build for interior designers are built around this order, so each new project drops into a structure that already works and nobody has to arrange it from scratch.