How is this different from placeholder.com or dummyimage?

Those services return images from a URL on demand, so every placeholder breaks if the service goes down. Here you get real files or data URIs that live in your project and work offline.

Which format should I use for a data URI?

SVG. It describes an image of any size in a few hundred bytes, so it stays tiny inside CSS or HTML. PNG and JPG data URIs are Base64-encoded bitmaps and can reach tens of kilobytes for large sizes.

How do I write the batch list?

Put one size per line, such as 300x250 (× or * also work). Add a space and some text after the size to label that image, e.g. “728x90 Header banner”. Every image uses the colors, font and format set above and is bundled into one ZIP.

Why does the font look slightly different in SVG and PNG?

Text in an SVG is rendered by whatever device displays it, using its system fonts, while a PNG is rasterized once in your browser. The layout is the same, but the typeface can vary slightly between devices.

⬜

⬜Placeholder Image Generator - Any Size PNG, SVG or Data URI

Wireframes, design mockups, upload tests and reserved ad slots all need an image that simply says “300×250”. Enter a width and height (up to 8000 px), pick background and text colors, and the label shows “W×H” by default — or type any text you like, in any language, with an optional size subtitle and border. The font size fits the image automatically, or you can set it yourself. Presets cover banner ads (728×90, 300×250, 160×600 and more), social media (Open Graph 1200×630, Instagram 1080×1080, Stories 1080×1920, YouTube thumbnails), avatars and icons, and common screen sizes. Download PNG, JPG, WebP or SVG, copy the SVG markup, or generate a data URI to paste straight into HTML, CSS or Markdown — an SVG data URI is only a few hundred bytes. Need a whole set? List one size per line in the batch box (optionally followed by text) and download them all as a ZIP. Everything is generated locally, with no dependency on an online placeholder service.

Free · No sign-up · Runs in your browserLast updated: 2026-10-26

Loading tool...

How to use Placeholder Image Generator

1Enter a size or pick a preset, then set colors and text
2Choose PNG, JPG, WebP or SVG
3Download the image, copy the SVG code or data URI, or list several sizes and download a ZIP

FAQ

How is this different from placeholder.com or dummyimage?: Those services return images from a URL on demand, so every placeholder breaks if the service goes down. Here you get real files or data URIs that live in your project and work offline.
Which format should I use for a data URI?: SVG. It describes an image of any size in a few hundred bytes, so it stays tiny inside CSS or HTML. PNG and JPG data URIs are Base64-encoded bitmaps and can reach tens of kilobytes for large sizes.
How do I write the batch list?: Put one size per line, such as 300x250 (× or * also work). Add a space and some text after the size to label that image, e.g. “728x90 Header banner”. Every image uses the colors, font and format set above and is bundled into one ZIP.
Why does the font look slightly different in SVG and PNG?: Text in an SVG is rendered by whatever device displays it, using its system fonts, while a PNG is rasterized once in your browser. The layout is the same, but the typeface can vary slightly between devices.