Images don't always load

It happens more often than you'd think: an image doesn't load — and instead of the picture, the ugly broken-image icon appears. The reasons are varied and often outside your control:

  • a wrong, renamed, or deleted path
  • a third-party server (hotlink) that removed or blocked the image
  • a slow or dropped connection
  • a typo in the URL

Especially with third-party images, there's no guarantee they stay available permanently. So it's worth designing the failure case deliberately rather than leaving it to chance.

Level 1: alt text as baseline protection

The simplest and most important fallback costs nothing: good alt text. If the image doesn't load, the browser shows the alternative text instead of the broken icon — describing what should have been visible:

<img src="/product.jpg" alt="Blue coffee mug with handle">

That already wins a lot: the user learns what it was about instead of staring at an empty box. And the same alt text serves blind users and image search — all in one.

Level 2: a replacement image via onerror

When a real replacement image should appear instead of text (a neutral placeholder, a default product image), use the onerror event of the img element: it fires when loading fails and then switches to a replacement. Crucially, this fallback must load reliably itself (ideally a small, local image) — otherwise a loop can form in which the replacement fails too. So set the handler to trigger only once.

Level 3: placeholders while loading

A related topic is the moment during loading. Instead of an empty gap, show a light preview until the real image arrives:

  • A solid color in the image's average color.
  • A blurred thumbnail (a tiny, blurred preview) that loads sharp afterward.
  • An outline / skeleton as a gray placeholder.

So nothing jumps, set width and height on the element — as always with images — so the space is reserved (see Avoiding layout shift). The placeholder fills exactly this reserved space until the image replaces it.

Why this is more than cosmetic

Handling non-loading images cleanly is not purely a beauty factor:

  • Accessibility: alt text keeps the page understandable even when images are missing.
  • Trust: broken images make a site look neglected.
  • Robustness: especially with third-party content, an image failing is a question of when, not if.

The order to remember: always alt text (baseline), a replacement image (onerror) if needed, and a placeholder with reserved space for the loading phase. Three small steps, and the broken-image icon never appears on your page again.

In short

  • Always alt text — it shows when the image fails.
  • onerror swaps in a reliable replacement image (once).
  • Placeholders fill the reserved space while loading.
  • It's robustness, not cosmetics — especially for third-party images.