OneTaskBy Tim King · Updated
Image Placeholder Generator
Dummy Images as SVG, PNG or Data URI
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Image Placeholder Generator works
An image placeholder generator makes a stand-in picture at the exact size a layout needs, with the
dimensions written across it. Set the width, height and colours, then copy the SVG, a data URI for
an <img> tag or CSS, or download it as a PNG.
Placeholder images hold the space for real photos while a page is being designed or built. Because they carry their size on their face, a glance at the page shows whether a slot is the 1200 by 630 social card or the 400 by 300 thumbnail, and whether the layout crops it.
What the image placeholder generator gives you
The SVG version is a few hundred bytes and scales without blurring, so it suits wireframes and
prototypes. The data URI puts the whole image inside the src attribute, which means no extra
file and no request to a third-party placeholder service that might be slow, blocked or shut down.
The CSS line uses the same data URI as a background. The PNG download is for places that do not
accept SVG, such as some content management systems, email tools and design apps.
Keeping layouts stable
The generated <img> tag includes width and height, which lets the browser reserve the right
space before anything loads. Keep those attributes when you swap in the real photo, so the page
does not jump as images arrive and Cumulative Layout Shift stays low.
FAQ
Is it better than using a placeholder image website?
Services such as placehold.co work until they go down, rate-limit you or get blocked by a corporate network. An inline data URI has no request at all, so it always loads, works offline and never sends your page's traffic to someone else's server during development.
Can I change the text on the placeholder?
Yes. Leave the text box empty to show the width and height, or type a label such as "Hero photo" or "Product shot" so the team knows what belongs there. The font size scales to fit the image, and any characters you type are escaped safely inside the SVG.
Why is my PNG file larger than the SVG?
The PNG stores every pixel, while the SVG only stores a rectangle, two lines and some text. A large PNG placeholder of a single colour still compresses well, usually to a few kilobytes, but the SVG or data URI is the smaller choice wherever it is supported.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Responsive Image Generator
Generate srcset, sizes and picture markup for responsive images.
Image To Data URI
Base64-encode an image as a data URI for CSS or HTML.
Image Size Calculator
Estimate image file size and see how oversized it is for its slot.
Aspect Ratio
Aspect-ratio CSS plus the padding-top percentage fallback.
Image Resizer
Resize to a width, height or percent with the aspect ratio locked.