The placeholder image
that doesn’t look
like a placeholder.
Craft a URL, drop it in an img tag, and you’re done. Any size. Any color. Gradients. Text. No signup, no API key, no rate limits. Free forever.
The Problem
You've been looking at this for years.
Every developer has the same muscle memory: paste a placeholder URL, gray rectangle appears, prototype is "done."
Except it doesn't look done. It looks unfinished. Your screenshots look like wireframes. Your demos look like they need "more work." Your tutorial readers copy a URL and wonder why their images look wrong.
You know exactly what size you need. You know your brand color. You might even know what text you want on it. There's just been no easy way to get all of that in a URL.
API
Three seconds. One URL.
- 400×400 square
- 400×300 rectangle
- custom background color (hex)
- centered text
- custom color & text
- gradient background
Live Examples
Click to copy
These are real placeimg.dev URLs — not screenshots. Click any to copy.
Why placeimg
Everything you actually need from a placeholder.
SVG. Not a blurry PNG.
Infinitely scalable. Crisp on retina. Tiny file size. The same URL looks perfect at 1x and 4x — so your Figma handoffs, screenshots, and production mockups all look sharp.
Permanent URLs. Commit them like code.
Every placeimg.dev URL is cached forever. The URL you wrote six months ago still works. The URL in your tutorial still loads for your readers. No broken images. No re-uploads.
No account. No API key. No rate limit.
Copy the URL. Paste it. It works. That's the entire setup. We don't want your email. We don't want your credit card. We don't want anything except for your placeholder images to look good.
Built for
Wherever you need an image that isn't there yet.
Prototyping
Building a layout and the images don't exist yet? Pick your color, pick your size, get a URL. Your prototype looks real. Your screenshots look designed.
Tutorials & Docs
Writing a tutorial? Every placeimg.dev URL your readers copy produces the same image you see. Deterministic. Permanent. No hosting required.
Design Systems & Storybook
Need consistent placeholder content across 40 component stories? Generate a color-matched set, commit the URLs. Done.
Packages
There's also a React component.
If you'd rather import than copy-paste, react-svg-placeholder-ts is on npm. Drop-in replacement for any placeholder in your React or Next.js project.
FAQ
Questions developers actually ask
- How do I add a placeholder image to my project?
- Use a plain img tag with a placeimg.dev URL. For example: <img src="https://placeimg.dev/400x300" alt="placeholder" />. No installation or API key required.
- Is placeimg.dev free to use?
- Yes, completely free with no account, no API key, and no rate limits. Just craft a URL and use it anywhere.
- What image sizes does placeimg.dev support?
- Any size from 1×1px up to 2000×2000px. Use /WIDTHxHEIGHT for rectangles (e.g. /1200x630) or /SIZE for squares (e.g. /400).
- Can I use placeimg.dev in a React or Next.js project?
- Yes. Use a plain img tag: <img src="https://placeimg.dev/400x300/4F46E5" width={400} height={300} alt="placeholder" />. A React component is also available on npm: react-svg-placeholder-ts.
- Does placeimg.dev work without JavaScript?
- Yes. Images are served as static SVG responses directly from the URL — no JavaScript needed on the page or server.
- Is this really free? What’s the catch?
- No catch. No freemium bait. No ‘free until it gets popular.’ SVG generation is trivially cheap to serve, and placeholder images should be free. If that ever changes, we’ll give plenty of warning and the URLs will keep working regardless.
Your next placeholder image is one URL away.
No account. No setup. Just a URL that works.
Generate My First Image →Or jump straight to the URL: https://placeimg.dev/400x300/4F46E5