The Best Image Placeholder Services for Web Developers

Placeholder images are useful while a layout is still waiting for final photography or illustration. The best choice depends on whether you need realistic photos, exact dimensions and colors, or a dependency-free asset that works offline.

This list intentionally stays short: the previous version linked to more than 20 services, many of which disappeared, changed ownership, or stopped serving images.

Quick comparison

Quick comparison

Option	Best for	Stable output	External dependency
Lorem Picsum	Realistic layout photography	Yes, with a seed or image ID	Yes
Placehold	Exact dimensions, formats, colors, and labels	Yes	Yes
DummyImage	Simple generated labels and standard sizes	Yes	Yes
Local SVG	Offline development and deterministic tests	Yes	No
CSS placeholder	Skeletons and empty media regions	Yes	No

Lorem Picsum

Lorem Picsum returns photographs at the dimensions in the URL. Use a seed when you want the same image on every load:

<img
  src="https://picsum.photos/seed/article-card/800/500"
  width="800"
  height="500"
  alt=""
/>

Use an empty alt attribute when the placeholder is decorative. If the image represents meaningful content in a prototype, write alternative text that describes the intended content, not “placeholder image.”

Unseeded URLs are useful for visual stress testing but make screenshots and regression tests unpredictable.

Placehold

Placehold creates a graphic with exact dimensions, colors, text, and an optional image format:

<img
  src="https://placehold.co/800x500/10100e/f8f6ef/png?text=Article+image"
  width="800"
  height="500"
  alt=""
/>

This is useful when the aspect ratio and text label matter more than photographic content. The service supports common raster formats and SVG; check its documentation for current syntax and maximum dimensions.

DummyImage

DummyImage is another simple generated-image service with dimensions, background color, foreground color, format, and text encoded in the URL:

<img
  src="https://dummyimage.com/800x500/10100e/f8f6ef.png&text=Article+image"
  width="800"
  height="500"
  alt=""
/>

Its predefined size references can be convenient when testing common display or advertising dimensions.

A local SVG placeholder

For automated tests, offline work, or long-lived documentation, a local asset is more reliable than a third-party endpoint. Save this as placeholder.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" role="img" aria-labelledby="title description">
  <title id="title">Article image placeholder</title>
  <desc id="description">A simple frame marking where an article image will go.</desc>
  <rect width="800" height="500" fill="#e4e1d7"/>
  <path d="M1 1l798 498M799 1L1 499" stroke="#66655e" stroke-width="2"/>
  <rect x="1" y="1" width="798" height="498" fill="none" stroke="#10100e" stroke-width="2"/>
  <text x="400" y="265" text-anchor="middle" fill="#10100e" font-family="sans-serif" font-size="32">
    Article image
  </text>
</svg>

Because the SVG has a viewBox, it scales without becoming blurry. If the placeholder is decorative in the page, embed it with alt=""; the title and description are useful when opening the SVG itself.

A CSS-only placeholder

When you only need to reserve layout space, avoid an image request entirely:

<div class="media-placeholder" aria-hidden="true"></div>

.media-placeholder {
  aspect-ratio: 8 / 5;
  border: 1px solid #66655e;
  background:
    linear-gradient(to top right, transparent 49.8%, #66655e 50%, transparent 50.2%),
    linear-gradient(to bottom right, transparent 49.8%, #66655e 50%, transparent 50.2%),
    #e4e1d7;
}

The empty element is hidden from assistive technology because it has no content. If the eventual image is meaningful, make sure the real implementation restores an img element with useful alternative text.

Production cautions

• Do not ship a third-party placeholder as important production content.
• Remote services can add tracking, availability, privacy, and content-moderation risks.
• Random photos may not be licensed for your final use merely because an endpoint returns them.
• Always provide intrinsic width and height or an aspect-ratio to avoid layout shift.
• Keep deterministic assets inside the repository for visual tests and documentation.

External services are convenient for exploratory layout work. Local SVG or CSS is the safer default when reliability and repeatability matter.