Image gallery

Image-heavy layouts are the worst-case for naive loading. A grid of six photos at 250 KB each is a megabyte and a half on the wire — and the eye notices every tile that is missing. A user who sees six gray boxes backfilling in arbitrary order experiences six separate waits, one per tile, each registering as absence. The same six images backed by LQIP placeholders register as a single resolution event — the layout was already there, the detail is what is arriving.

This scenario sits in the 1 – 10 S band Miller 1968 Miller 1968 describes. The Card-Moran-Newell Card, Moran & Newell 1983 ~100 ms perceptual frame is what the LQIP placeholder honours — the dominant colour is in place before the user can register the layout as empty. Nielsen 1993 Nielsen 1993 sets the 1-second floor the unaugmented gallery breaks; the placeholder collapses the wait by replacing it with content.

What is happening in the demo

Six tiles, each "loaded" with an independent gamma-jittered timeout around a 2.2 s median. Click Replay on either side to start a fresh run.

The naive side renders a 3×3 grid of empty muted-gray boxes. As each tile's timer fires, the gradient snaps in. The user watches the layout backfill in random order — there is no visual continuity between the empty state and the loaded state.

The tuned side shows the same six gradients from frame zero, but heavily blurred (filter: blur(20px) saturate(0.6)). The dominant colour and rough composition are immediately legible — the user reads the gallery as already there, just out of focus. As each tile resolves, the blur transitions to zero over 350 ms. The eye reads the change as the photo coming into focus rather than as content arriving.

The trick is that the LQIP itself does not need to be a real low-resolution version of the high-res image. A 16×16 thumbnail Base64-encoded in the HTML response, blurred up to fill the layout slot, achieves the same perceptual effect — the dominant colour is the perceptual signal, not the detail. Production implementations of this pattern (Medium, Pinterest, Unsplash, Next.js's built-in next/image with placeholder="blur") all rely on this property.

What to tune

1. First paint — LQIP placeholder inline in the HTML. Dominant colour and rough composition land in the first frame; the layout reads as already there.
2. First 1 s — full-resolution tiles begin resolving. Each tile transitions from blurred LQIP to sharp over ~350 ms.
3. 1 – 10 s — no spinner per tile. The LQIP carries the wait; a spinner would be worse than the placeholder.
4. Hover — for interactive galleries, predictive preloading of the full-res detail view on hover.
5. Adaptive — under Save-Data or slow-network signals, ship a smaller variant or skip the high-res step entirely.

When perceived performance hurts you here

The placeholder must reflect the dominant colour of the actual image. A generic gray skeleton at this scale is fine; an LQIP that resolves to a wildly different image is jarring — the user sees green resolve to red, and the trust budget the pattern paid into gets withdrawn. The image processor that generates the LQIPs at upload time is what guarantees this, and it is the part most teams skip.

The other failure mode is trying to LQIP everything. Icons, logos, UI chrome — non-photographic content that is already small — does not benefit from blur-up. The placeholder adds cost without clarity. Reserve LQIP for content where the dominant colour is the perceptual signal: photos, illustrations, hero images. For UI chrome, use skeleton screens shaped to match.

Accessibility

1. alt text is the layout invariant. Whether the image is in placeholder state or fully loaded, the alt text is unchanged — screen readers should not perceive a difference between "loading" and "loaded" for content they do not see.
2. aria-busy on the tile while the high-res file is in flight, removed when it lands. The demo's tiles set this on the wrapper.
3. prefers-reduced-motion — the blur-to-sharp transition is decorative. Strip the transition to an instant swap; the LQIP-to-final state-change is the signal.
4. Focus order must not depend on load order. If the gallery is keyboard-navigable, tab order is set by the layout, not by which image happens to load first.
5. Lazy-load only off-screen images. loading="lazy" (or its IntersectionObserver equivalent) prevents work for images the user has not scrolled to — but never apply it to above-the-fold tiles, where the LQIP needs to be in the first paint.

References