Placeholder Image Generator
Dummy images in any size, colour and format, made in your browser.
Preview
1200 × 630 · 40:21About the Placeholder Image Generator
Make placeholder images for mock-ups, wireframes, test pages and empty states — at exactly the size you need. Type a width and height or pick a preset (Google AdSense ad sizes, social media posts and covers, HD to 4K frames), choose a solid colour or a gradient, and the size is printed in the middle unless you write your own text.
Download PNG, JPG, WebP or SVG, copy a tiny SVG as a data URI to paste straight into HTML or CSS, or list several sizes and get them all in one ZIP. Everything is drawn in your browser. There are deliberately no hosted image links: a placeholder service that disappears breaks every page that hotlinks it, so you keep the files.
How to use it
- Enter a width and height in pixels, or choose a preset (the size fields follow it).
- Pick a solid background colour, or a gradient with two colours and an angle.
- Keep the text
{w} × {h}to print the size, write your own text, or clear the box for a plain image. Choose a font, its colour and Automatic or a fixed text size. - Choose PNG, JPG, WebP or SVG, then Download. For SVG you can also copy the data URI or a ready
<img>tag. - For several sizes at once, add them under Batch (or paste a list like
1200x630, 300x250) and press Download ZIP.
Examples
1200 × 630 · gradient #4338ca → #0e7490 at 135° · text “{w} × {h}”placeholder-1200x630.png with “1200 × 630” centred in white
Batch: 300x250, 728x90, 160x600, 320x50 · solid #e5e7eb · PNG
placeholders.zip with four PNG files named by size
400 × 300 · solid #cbd5e1 · text “Product photo”
data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300' …
An SVG placeholder is a few hundred bytes, so it can live inside your HTML or CSS.
Common uses
- Filling image slots in a website or app mock-up before the real photos exist.
- Testing layouts, CMS templates and responsive breakpoints with images of known sizes.
- Checking ad slots with images at the exact AdSense sizes.
- Making solid-colour images for backgrounds, social media tests or video slates.
Text tokens
The text box understands three tokens: {w} (width), {h} (height) and {ratio} (the reduced aspect ratio, such as 16:9). They are replaced in every image of a batch, so “{w}×{h}” gives each file its own size. The text is centred, wrapped onto several lines when needed and, with Automatic size, made as large as fits inside the image.
Which format to choose
- PNG — exact colours and sharp text; the usual choice for placeholders.
- JPG — usually the smallest file for large gradient images; no transparency.
- WebP — small and sharp; supported by every current browser. Safari cannot make WebP itself, so a WebAssembly encoder from this site is loaded the first time you need it.
- SVG — a few hundred bytes at any size, ideal for wireframes and inline data URIs. SVG text uses the fonts of whoever views it: the font you chose is named first, with common system fonts after it.
Preset sources
Ad sizes are the ones listed in Google’s AdSense guide to ad sizes. Social media sizes come from the same sourced list as the Social Media Image Sizes tool, where each platform’s source is linked. Video sizes are the standard 16:9 frames from 720p to 4K UHD.
Limitations
- PNG, JPG and WebP images can be up to 16,384 px on a side and 50 megapixels; above about 16.7 megapixels they may fail on iPhones and iPads with an older iOS version. SVG has no such limit.
- Text in an SVG is drawn with the viewer’s fonts, so it can look slightly different on devices that do not have the chosen font.
- A batch makes at most 60 images at a time, and at most 250 megapixels of PNG, JPG or WebP images in all (every preset group fits easily); split bigger lists.
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
Can I link to these images from my website?
No — on purpose. Nothing is hosted: you download the files (or copy an SVG data URI) and serve them yourself, so your pages never depend on a third-party placeholder service staying online.
How do I make a plain solid-colour image?
Clear the text box, choose Solid and a colour, set the size and download. A solid PNG of any size is only a few kilobytes.
How do I use the SVG data URI?
Paste it into an <img src="…">, a CSS background-image: url("…") or a JSON fixture. Copy <img> tag gives you complete markup with the width, height and an empty alt (placeholders are decorative).
Why does the text get smaller on small images?
With Automatic size the text is fitted to the image, down to 6 px. Long text on a small image is cut with “…” — shorten it, or choose a fixed size.
Are my images uploaded?
No. They are drawn and encoded by your browser; the ZIP is built on your device too.