Integration recipes

Plain HTML

<img src="https://placeholdr.dev/600x400/minimalist%20modern%20office?seed=3" width="600" height="400"
     alt="Minimalist modern office" />

Set width and height to reserve layout space. Add loading="lazy" for images below the first screen. Use meaningful alt text for content images and empty alt text for decoration.

CSS background

.hero {
  background: #111827 url("https://placeholdr.dev/600x400/minimalist%20modern%20office?seed=3") center / cover;
  min-height: 20rem;
}

Use backgrounds for decoration. Keep headings and essential content as real text. Generate and verify your chosen URL before a demo.

React and Next.js

const imageUrl = "https://placeholdr.dev/600x400/minimalist%20modern%20office?seed=3";

export function OfficeCard() {
  return (
    <img src={imageUrl} width={600} height={400}
         alt="Minimalist modern office"
         style={{ width: "100%", height: "auto" }} />
  );
}

This component uses a native img, so the browser requests the image directly. It also works as a Next.js component without image-optimizer configuration. A new request can return a temporary SVG with status 202; an optimizer that requires a completed image may reject that response.

To use an optimizer, generate and verify the image first, then configure your framework for the external host. A native image tag is the simplest way to preserve first-request behavior.

Build a URL from user input

const prompt = "quiet Japanese garden";
const url = `https://placeholdr.dev/800x450/${encodeURIComponent(prompt)}?style=artistic&seed=2`;

Use a fixed set of prompts in public demos. An unbounded stream of new URLs can hit the shared fair-use budget.

A small starter you can keep

The standalone HTML starter includes an article card, a product card, and an illustrated profile. Download it, open it locally, and edit the copy and styles.

Preview the examples · Read the full API reference