089 Do We Still Need Lightbox Galleries? Simpler Images for the Modern Web

Photo Galleries ...sometimes less is more, simpler is a better option

Sometimes improving a website means removing something rather than adding something.

For many years, the lightbox gallery was almost standard equipment on a website. A page displayed smaller thumbnail images, and clicking one opened a larger version in an overlay. It was attractive, saved space, and gave visitors access to a larger photograph without leaving the page.

But websites — and the devices we use to view them — have changed.

Today, responsive design, larger screens, high-resolution mobile devices, and faster browsers make it worth asking a simple question:

Do smaller websites really need a lightbox gallery anymore?

In many cases, I don't think they do.

Why We Started Removing Some Lightboxes

At Zehr.net, my son Luke and I have been simplifying galleries on some of the smaller websites we maintain.

Instead of creating one smaller image for the page and another larger image for the lightbox, we're displaying a single appropriately optimized image and allowing CSS to resize it naturally.

A simple gallery rule can look like this:

.gallery {
    max-height: 350px;
    max-width: 100%;
    height: auto;
}

There isn't much code there — and that's part of the point.

max-width: 100% keeps a large image from overflowing its available space on a smaller screen. height: auto allows the browser to maintain the photograph's natural proportions as it changes size.

The max-height simply keeps unusually tall gallery images from becoming enormous on the page.

The result is a gallery that can work surprisingly well on everything from a desktop monitor to a phone without requiring JavaScript, an overlay, or a second copy of every photograph.

What About Photographs With Different Aspect Ratios?

This is important because real-world galleries rarely contain perfectly uniform photographs.

One image may be landscape at 1200 × 800. Another might be portrait at 800 × 1200. Another could be nearly square at 1000 × 900. A panoramic project photograph could be 1600 × 700.

There is nothing inherently wrong with that.

In fact, sometimes forcing all of those photographs into identical boxes makes the gallery look cleaner at the expense of the photographs themselves.

CSS techniques such as object-fit: cover can create perfectly uniform image boxes, but they accomplish that by cropping portions of images. That can be useful for cards, staff photographs, or certain highly structured designs, but it isn't always desirable for project photography.

If you're showing someone's custom home, woodworking project, landscaping, artwork, or restoration work, the edges of the photograph may contain something worth seeing.

Sometimes it is better to let the photograph be the photograph.

A vertical image can be vertical. A wide image can be wide.

Responsive design doesn't have to mean making everything identical.

One Image Instead of Two

Traditional lightbox galleries often required us to maintain two versions of every photograph:

• a smaller thumbnail for the gallery
• a larger photograph for the lightbox

There can still be performance reasons to provide multiple image sizes through modern responsive-image techniques such as srcset, particularly on image-heavy or high-traffic websites. Modern browsers can then select an appropriate file for the visitor's screen.

But that is different from maintaining two images simply because a JavaScript lightbox requires a thumbnail and a large image.

For many smaller business websites, a properly optimized source photograph can make the entire process much simpler.

One image. One file to maintain. Responsive CSS. No lightbox JavaScript. No additional click required just to see the photograph.

That simplicity has value.

The Modern Tag

CSS handles how the photograph appears, but some important image instructions belong in the HTML.

For example:

There is quite a bit happening in that simple tag.

Alt Text Is About Meaning

The alt attribute is the important accessibility component.

For informative images, alt text should communicate the essential information represented by the image. Decorative images are different and can appropriately use an empty alt="" attribute.

That means good alt text isn't necessarily a filename or a collection of SEO keywords.

Instead of:

alt="kitchen"

we might use:

alt="Custom kitchen with white cabinetry, a large center island and hardwood flooring"

We're helping someone who cannot see the photograph understand why that photograph is on the page.

That's accessibility doing exactly what it should do.

Then What Is the Title Attribute?

We also sometimes like using the title attribute:

title="Custom Home Kitchen"

On desktop browsers, this can provide a convenient tooltip when someone hovers a mouse over the photograph.

However, title should not be treated as a replacement for alt.

Accessibility testing tools may draw attention to title attributes because assistive-technology support and user access to title information have historically been inconsistent.

That doesn't mean every title attribute is automatically an accessibility error. It means we shouldn't place essential information exclusively in it.

A useful rule is: Alt text carries the meaning. Title text, when used, is supplemental.

That also means the two attributes don't need to contain identical text.

alt="Restored Victorian staircase with natural oak treads and decorative railing"
title="Victorian Staircase Restoration"

The alt text describes the meaningful content of the image. The title provides a short identifying label for visitors who encounter it.

Lazy Loading Is HTML, Not CSS

Another useful optimization is:

loading="lazy"

This tells the browser that it can defer loading an off-screen image until the visitor gets closer to it. This can reduce unnecessary initial image downloads and help a page become usable more quickly.

Likewise:

decoding="async"

can tell the browser that decoding the image does not need to block other content from being presented.

These are HTML attributes, not CSS properties, so they belong inside the element rather than the .gallery style.

One important exception is an important above-the-fold image, particularly a hero image. We generally don't want to lazy-load something the visitor should see immediately.

Lazy loading makes much more sense for gallery photographs farther down a page.

Width and Height Still Matter — Even With Responsive CSS

This one may seem counterintuitive.

If CSS is resizing the photograph automatically, why would we write this?

width="1200"
height="800"

Because those numbers give the browser something extremely useful before the image has even finished downloading: its aspect ratio.

Modern browsers can use an image's width and height attributes to reserve the appropriate amount of page space before the image arrives. This can reduce layout movement as images load and help prevent Cumulative Layout Shift, or CLS.

And this is where differently shaped gallery photographs become especially interesting.

A portrait photograph might use:

width="800"
height="1200"

while the next landscape photograph might use:

width="1200"
height="800"

Those attributes don't mean both images have to display at those sizes.

Our responsive CSS still controls their displayed size:

.gallery {
    max-height: 350px;
    max-width: 100%;
    height: auto;
}

The dimensions give the browser the photograph's intrinsic size and proportion so it can prepare the layout correctly.

That means we should use the actual width and height appropriate to each image rather than trying to give the entire gallery one artificial aspect ratio.

A Collage Can Sometimes Replace the Gallery

There is another change in the way we have been approaching images on modern websites: sometimes we don't need a traditional photo gallery at all.

A thoughtfully designed image collage can combine several photographs into one strong visual presentation. Instead of asking a visitor to scroll through ten or fifteen similar project photographs — or click through them one at a time in a lightbox — a collage can tell much of the story at a glance.

This can be especially effective for custom homes, construction projects, woodworking, landscaping, renovations, events, and other work where several photographs together communicate more than any single image.

The collage itself becomes part of the page design rather than simply being a container for photographs.

It can also help us be more selective. Perhaps a project doesn't need fifteen individual gallery images. A strong collage followed by three or four carefully chosen photographs may communicate the work better than displaying every photograph we have.

The goal isn't to show the greatest number of images. The goal is to use the right images to tell the story.

There is still an important accessibility consideration. Because several photographs have been combined into one image, the collage needs meaningful alt text describing the overall information or story the collage communicates. If individual photographs contain important information that cannot reasonably be conveyed by the collage's alt text, those photographs may still deserve to appear separately with their own text alternatives.

This gives us another option when designing a modern image-heavy page:

One strong collage for visual impact, a handful of individual photographs for detail, and a full gallery only when the visitor truly benefits from having one.

That can make a page shorter, cleaner, easier to navigate, and often more visually interesting.

Do We Ever Still Want a Lightbox?

Absolutely.

This isn't an argument that lightboxes are obsolete.

A lightbox can still be valuable when photographs contain fine details visitors genuinely want to inspect, when the gallery itself is a major part of the website experience, or when users need to move through a large collection without scrolling through a very long page.

Photography portfolios, artwork, historical documents, detailed craftsmanship, and before-and-after comparisons can all justify a larger interactive viewing experience.

The better question isn't:

"Are lightboxes good or bad?"

It is:

"Does this website actually benefit from one?"

If the answer is no, removing it may make the site simpler without taking anything useful away from the visitor.

Simpler Doesn't Mean Less Advanced

This is one of the interesting lessons of modern web development.

Years ago, making a website feel more advanced often meant adding features.

Today, experience sometimes teaches us to do the opposite.

• Remove unnecessary JavaScript.
• Remove duplicate images when they aren't needed.
• Let CSS handle responsive sizing.
• Let HTML communicate the image's meaning.
• Give the browser the information it needs to load efficiently.
• Let different photographs retain their natural proportions when the design allows it.
• Don't make a visitor click something simply because we've always made visitors click it.

A modern website doesn't need to demonstrate how much technology we can put into a page.

It needs to use the right amount of technology to serve the person using it.

Sometimes the best upgrade is the feature we realize we no longer need.