Why do placeholders cause layout shift?

If the placeholder’s aspect ratio or dimensions differ from the final image, the browser reflows when the real asset loads. Match size and reserve space with width/height or aspect-ratio.

Are random Lorem Flickr images OK in production?

No. Hotlinking random photo CDNs is fragile, potentially NSFW, and wrong for privacy. Use local placeholders in dev; real optimized assets in prod.

What size should a dummy hero be?

Use the same display dimensions you will ship — e.g. 1920×1080 for a 16:9 hero — even if the file is a flat color PNG.

Should placeholder alt text be empty?

Empty alt is correct for decorative stubs. If the dummy stands in for meaningful content, use short alt that matches the eventual intent.

Placeholder Images — Right Size

Design drops gray boxes into Figma. Engineering ships an 800×200 placeholder that becomes a 4:5 photo. The page jumps. Core Web Vitals notice. Placeholder images are scaffolding — they still need the final footprint. The art can arrive later; the geometry cannot be a guess.

Match the contract, not the art

Lock aspect ratio, intrinsic width and height, max display size, and format early. Aspect prevents crop surprises. Intrinsic dimensions reserve layout boxes. Max display size stops someone from shipping a 6000px temporary file. Format matters because JPG, WebP, and SVG occupy space differently during load.

Generate sized stubs with a dummy image generator so src dimensions match what CMS or CDN will eventually serve. Labeled dummies that print “1920×1080” on the image make broken crops obvious in QA screenshots — far more useful than a plain gray rectangle when a designer asks why the hero looks squashed.

<img
  src="/placeholders/hero-1920x1080.png"
  width="1920"
  height="1080"
  alt=""
  class="hero-media"
/>

.hero-media {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #e5e7eb;
}

width/height attributes plus CSS aspect-ratio keep CLS near zero even before paint finishes. Belt and suspenders is appropriate here: attributes help the browser before CSS arrives; aspect-ratio protects fluid layouts.

Dev versus prod policy

Local and Storybook should use solid-color or labeled dummies hosted with the repo. Staging may use soft production-like compressions. Production should use optimized real assets only. Hotlinked random Flickr, placekitten, or picsum as runtime dependencies are fragile, sometimes NSFW, and hostile to privacy reviews. External placeholder CDNs also rotate photos and break visual regression tests.

Storybook and Chromatic stories should pin fixed local dummy URLs with locked dimensions. Cute remote services are entertainment; CI needs boring files that never change pixels unless you change them on purpose.

Responsive placeholders and CMS handoff

If production uses srcset, approximate it during build-out with honest widths. A single tiny 40×40 stretched with CSS will “work” until object-fit and focal points arrive — then everything looks wrong. Prefer stubs that match the display slot.

Editors upload 3000×3000 avatars into a 64×64 slot unless you document the contract. Write display slots into the ticket: avatar at 128×128 display with uploads at least 256×256 and center crop; card image at 3:2 with minimum width 1200; hero at 16:9 with a production weight budget. Capture focal-point notes early (object-position: center top for faces) so the real photo does not force a second layout pass.

Low-quality image placeholders and blur-up techniques still need the final aspect box. A tiny blur stretched into a 16:9 slot is fine only if the slot is already reserved. The failure mode is swapping in a 4:5 photo later while the blur-up wrapper stays 16:9. Whatever strategy you use — solid dummy, LQIP, or dominant color — lock geometry first.

Accessibility, weight, and broken states

Empty alt="" is correct for decorative stubs. If the dummy stands in for a product photo, use short alt that matches eventual intent so accessibility review does not regress when assets swap. Do not bake section titles only into placeholder PNG text — screen readers will not read those pixels.

A 2MB gray JPEG is still a 2MB JPEG. Keep placeholders tiny: solid PNG, SVG, or heavily compressed JPEG. The goal is layout fidelity, not photographic realism.

While dummies exist, style broken-image states so a 404 on the temporary path does not collapse the card. When swapping to CDN URLs, keep the same width/height attributes so the layout contract survives the handoff.

Launch checklist

Agree the final aspect. Match the placeholder to that aspect. Reserve space in CSS and HTML. Note the focal point. Set a weight budget for production derivatives. Replace dummies with production URLs before go-live. Confirm CI stories do not depend on third-party placeholder hosts.

Placeholders that lie about size teach the layout to jump. Placeholders that tell the truth about dimensions make media swaps boring — which is exactly what you want on launch day. Wire the box first; drop in beauty later.

CLS and reserved space

Placeholders must match final aspect ratio or layout shift will punish Core Web Vitals. Prefer width/height attributes or CSS aspect-ratio on the image box before the real asset loads.

Content policy

Random external placeholder CDNs can fail offline demos and leak referrers. Generate local placeholders or use your own static bucket for mockups that ship in demos.

Tools

Placeholder Images — Right Size Before Real Assets