Placeholder Image Generator
Placeholder images at any size, drawn locally.
Placeholder Image Generator draws a placeholder at any size on a canvas: your own colours, a custom or automatic label, an optional grid or diagonal pattern, and export as PNG, JPEG or WebP. Copy it as a data URI. The image is made in your browser, never fetched.
Loading Placeholder Image Generator…
Runs entirely on your device. No file or text you enter here is uploaded. How to verify it.
How to use Placeholder Image Generator
- Set the width and height, or pick a common size.
- Choose colours, a label and a pattern.
- Download as PNG, JPEG or WebP, or copy the data URI.
Questions about Placeholder Image Generator
Which format should I pick?
PNG for a flat placeholder with a label, because it stores hard edges exactly and is usually smaller than JPEG for this kind of picture. JPEG works in blocks of eight pixels and leaves a visible haze around lettering. WebP is smaller again but is missing from older Safari, so the tool reads the type back off the encoded file and tells you if the browser substituted something else.
How large an image can it make?
Up to 8000 pixels a side here. The real limit is the browser: mobile Safari starts refusing canvases above roughly 16.7 million pixels and hands back a blank image rather than an error, so the tool warns you when you cross that line. Desktop browsers cope with a good deal more.
Should I paste the data URI into my CSS?
Only for small images. Base64 turns every three bytes into four, so the string runs about a third larger than the file, and because it lives inside the stylesheet it is downloaded again with every page instead of being cached separately. Under a few kilobytes the saved request is worth it; above about ten it is not.
Why not use one of the placeholder websites?
They work, but every image is a network request to a third party, which means your layout depends on a free service staying up and on your visitors' connections reaching it. Several well-known ones have gone dark. This draws the same picture on a canvas in your tab, so it also works with the network off.
Will a placeholder stop my layout jumping about?
Only if it is the right shape. Give the placeholder the same aspect ratio as the real image and set the width and height attributes on the tag, so the browser reserves the correct space. A placeholder of the wrong proportions hides the layout shift until the real picture arrives, which is the problem it was meant to solve.
Is Placeholder Image Generator really free, with no limits?
Yes. There is no account, no daily cap, no file-size tier and no watermark, because there is no server cost to recover. The site is funded by clearly disclosed partner recommendations on the Partners page, never by metering the tools.
Are my files or text uploaded when I use Placeholder Image Generator?
No. Everything is processed by JavaScript running in your browser, on your device. You can verify it: open your browser's developer tools, switch to the Network tab, and use the tool. You will see no request carrying your data — because there is nowhere for it to go.