The Photo Gallery That Actually Gets Used

The archive problem

The instinct is to include everything, because each photograph represents real work and leaving one out feels like discarding it.

What that produces is a grid of ninety near-identical thumbnails. A visitor scans the first row, sees no reason to think the rest differs, and leaves.

Twelve carefully chosen photographs are looked at properly. Ninety are not looked at at all, which means the ninety-first job you added is doing less for you than a smaller set would.

Curate by variety, not by recency

The selection principle that matters.

A visitor is asking whether you have done work like theirs. That means the set should cover the range: different services, different property types, different scales, and different conditions.

Ten photographs of the same kind of job demonstrate less than six covering six situations. Duplicates of your best work are the most common thing to cut.

Where the work is genuinely repetitive, group it and show two or three examples rather than twenty.

Group it by what people are looking for

By service, and where relevant by property type, rather than as one undifferentiated set.

Someone with a flat roof does not want to scroll past pitched roofs. Filtering or clear sections turn a browse into a search, which is what the visitor was doing anyway.

Sections work better than filters on a small gallery, since filters add a control to learn and a section is just a heading. Filters earn their place past thirty or so images.

Captions do more than the photographs

The most under-used element, and the cheapest to add.

A photograph of a finished bathroom shows a bathroom. The same photograph captioned with what the problem was, what was done, how long it took, and roughly what it cost is a case study in one line.

Captions also carry information a photograph cannot: the area, the age of the property, and the constraint that made it difficult. That is what demonstrates judgement rather than only tidiness.

They are read by search engines too, which a photograph is not, so the gallery becomes findable rather than decorative.

Before and after

The strongest format in this category and it has requirements.

The two images need the same angle, similar lighting, and enough resemblance that the comparison is obvious. A before shot taken hurriedly on a phone against a carefully composed after shot reads as a trick rather than a demonstration.

Presenting them adjacent is more reliable than a slider, which requires interaction, does not always work well on a phone, and hides one of the two images from anyone who does not use it.

The technical part

• Serve thumbnails, not full images scaled down. A grid loading twenty full-resolution photographs is the heaviest page on most trades sites.
• Load below-the-fold images lazily, so the first screen appears immediately.
• Reserve the space each image will occupy, or the layout shifts as they arrive and people tap the wrong thing.
• Use a modern image format with a fallback, which typically halves the weight.
• Give every image alternative text describing what it shows, which is both an accessibility requirement and useful content.

The thumbnail point is worth emphasising. A gallery is the most common cause of a slow page on a trades site, and it is almost always because full-size images are being displayed small rather than resized properly.

The lightbox

Where clicking a thumbnail opens a larger view. Useful, and frequently implemented badly.

It needs an obvious close control, closing on the escape key, arrow keys and swipe for moving between images, and keyboard focus handled so it is not a trap for anyone not using a mouse.

It should also show the caption. A lightbox displaying only the image discards the information that made the gallery worth having.

On a phone

Where most of this is viewed, and where a desktop grid becomes a very long scroll.

Two columns rather than four, since one image per row wastes space and four are too small to assess. Swipe between images in the enlarged view, since that is the expected gesture. And a limit on how many load before a load more control, so the page does not become endless.

Where the gallery sits

Not only as a single page in the navigation.

A few relevant images on each service page do more than a comprehensive gallery elsewhere, because they appear beside the decision. The full gallery is then for the visitor who wants more, rather than the only place the work appears.

That placement logic is the same one that applies to proof generally, and the photographs themselves need the same care about what is visible in them as anywhere else, which is covered in what your photographs say that you did not intend.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.