Placeholder Images
Generate sized placeholder images and inline data URIs.
What it does
Generates a sized placeholder image as clean SVG markup, with no server round trip. Pick a width, height, background color, and text color, and it renders a centered label (by default the pixel dimensions) as valid SVG, a data URI, an <img> tag, and a CSS background-image declaration.
How to use it
Set width and height (1-4000px), pick hex colors for the background and label text, and optionally type a custom label. Copy whichever output you need: the raw SVG markup to drop in a file, the data URI to embed inline, the ready-made <img> tag, or the CSS declaration for a background-image.
Why this one
Services like placeholder.com or picsum.photos require a live network request every time the image loads, track referrers, and can go down. This generates the SVG locally as text: no image ever leaves your device, no requests, no rate limits, no attribution needed.
FAQ
- Why SVG instead of a PNG or JPG?
- SVG is text, so it can be generated instantly in the browser without an image-encoding library, scales to any size with no blur, and produces a tiny data URI.
- What if I leave the label blank?
- The label defaults to the image dimensions, like "600×400", which is the standard placeholder convention.
- Can I use the output directly as an <img> src?
- Yes, copy the "Data URI" or "HTML img tag" output. Both work immediately with no hosting required.