Placeholder Image Generator
Generate placeholder images in SVG format with the dimensions, background colors and text you choose. Download them or copy the URL/data URI directly.
Settings
Preview
<img src="data:image/svg+xml;base64,…" width="1280" height="720" alt="placeholder">
const img = new URL("/placeholder.png", import.meta.url);
How to use: Placeholder
- 1Pick a preset or enter the width and height in pixels.
- 2Customize the text, colors and format.
- 3Download the image or copy the embed code.
What is it for?
- Fill mockups with images of the exact size.
- Test responsive layouts before the final photos are ready.
- Create sample images for templates and documentation.
Placeholder images for layout work
What for
They reserve space for an image while the final asset does not exist, so layout and proportions can be validated.
Avoid layout shifts
Always set real width and height in the HTML: the browser then reserves the space and avoids cumulative layout shift (CLS), a Core Web Vitals metric.
Formats
Images generated here are lightweight and download instantly. Replace them with optimized real images before publishing.
Related tools
Frequently asked questions
Which formats does it generate?+
It generates scalable SVG and its data-URI representation to use in <img> without files.