Placeholder Image Generator
What a placeholder image is for
Placeholder images fill a layout before the real artwork exists. This generator builds them in your browser rather than calling a third-party service, so they work offline, never break when a service disappears, and add no external request to your prototype.
Syntax
<img src="data:image/svg+xml,..." width="600" height="400" alt="">| Part | What it controls |
|---|---|
| dimensions | Any width and height. The label on the image updates to show them, which makes it obvious at a glance what size a box is. |
| SVG | The default output. It stays sharp at any scale and is tiny — usually a few hundred bytes. |
| data URI | The whole image encoded into the src, so there is no second request and no file to manage. |
| CSS background | The same data URI as a background-image, with the aspect ratio set for you. |
| PNG | Rendered in the browser via canvas for the cases where an SVG will not do, such as pasting into a design tool. |
| alt text | Still required. A decorative placeholder takes alt=""; a placeholder standing in for meaningful content should describe what will go there. |
Notes from practice
Local beats a placeholder service
Services go down, get blocked by corporate networks, and add a request per image. A data URI keeps a prototype working on a plane.
Keep the real dimensions
Using placeholders at the final width and height means the layout you are testing is the layout you will ship, and it exposes aspect-ratio problems early.
Do not ship them
A data URI is inlined into your HTML or CSS, so a forgotten placeholder adds weight to every page load. Search for them before launch.
Placeholder Image Generator FAQ
How do I create a placeholder image without a service?
Generate an SVG and inline it as a data URI in the img src. It needs no network request, stays sharp at any size, and keeps working offline or behind a firewall that blocks third-party placeholder services.
What size should placeholder images be?
The size the real image will be. Using final dimensions means you are testing the layout you will actually ship, and aspect-ratio or cropping problems surface while they are still cheap to fix.
Should I use SVG or PNG for placeholders?
SVG for almost everything: a few hundred bytes, sharp at any zoom, and editable as text. Choose PNG when the target cannot accept SVG — some design tools, email clients and older CMS uploaders among them.
Do placeholder images need alt text?
Yes. Give a purely decorative placeholder an empty alt="" so assistive technology skips it. If it stands in for meaningful content, describe what will eventually be there, and remember to update it with the real image.
Can I use a data URI placeholder in production?
You can, but you should not leave one in by accident — a data URI is embedded in the HTML or CSS and adds its weight to every page load. Search the codebase for data:image before launch.
Related generators
- Aspect Ratio & Object Fit — Hold a box to a ratio, then choose how the image fills it. The dashed frame marks the original edges.
- CSS Patterns — Tile dots, grids, stripes, checkers and zigzags from gradients alone, with no image files.
- Gradients — Linear, radial and conic gradients, repeating patterns and modern colour-space interpolation.
- Border Radius — Round each corner on its own, or switch to elliptical radii for organic blob shapes.
Part of CSSGen.dev — 30 free visual CSS generators with browser support built in.