Placeholder image generator: a dummy image of any size, free and private
A placeholder image generator makes a plain stand-in picture of an exact size, so a layout can be built before the real photos exist. To make one here, enter a width and height in pixels (1 to 4000), choose a background and a text colour, optionally type a label, pick PNG, JPG or SVG and click Download. The label defaults to the size, such as 400 × 300, so every placeholder shows which asset it stands in for.
It runs in your browser; nothing is uploaded (you can check the Network tab in DevTools). There is no sign-up and no watermark on the result. If you would rather not download a file at all, the Code panel gives the same image as a data URL, an HTML img tag or a CSS background-image rule that you can paste straight into a page.
Need a real photograph instead of a flat colour? The Lorem Picsum generator builds random photo URLs, and the Lorem Ipsum generator fills in the text next to them.
Table of Use: which settings for which job
| Job | Settings | You get |
|---|---|---|
| Link-preview (social share) image slot | Preset 1200×630 | placeholder-1200x630.png, the common link-preview size; the Open Graph generator writes the tags that point to it |
| Hero banner mockup | Preset 1920×1080, your own label | A Full HD, 16:9 image with the label centred |
| Video thumbnail slot | Preset 1280×720 | A 16:9 image, the usual thumbnail shape |
| Avatar or icon slot | Preset 200×200, label "Avatar" | A square image; shrink it later with the image resizer |
| Product card on Retina screens | 400×300 with @2x ticked | placeholder-400x300@2x.png, which is 800 × 600 pixels |
| Image in an HTML prototype with no file hosting | Any size, copy HTML <img> tag | A tag with width, height and the image embedded as a data URL |
| Card background in a CSS demo | Any size, copy CSS background | A background-image rule with the image embedded |
| Tiny file that stays sharp when zoomed | SVG format | A vector file; the @2x option is not needed and is hidden |
| See-through placeholder over a coloured page | Background "transparent", PNG or SVG | A transparent image with only the label drawn (JPG saves it as white) |
Features
- Any size from 1 to 4000 pixels on each side. A field that is empty or out of range shows a message, and the preview keeps the last valid size.
- Eight size presets: 100×100, 200×200, 300×200, 400×300, 800×600, 1200×630, 1280×720 and 1920×1080.
- Any CSS colour for the background and the text, from a colour picker or a text box: hex, rgb(), hsl(), colour names, or "transparent".
- Your own label of up to 200 characters, or the size by default. It is drawn in Arial, Helvetica or your device's sans-serif font and auto-fitted to the image.
- PNG, JPG or SVG. JPG is saved at quality 0.92 with a white base, because JPG cannot be transparent.
- @2x Retina option for PNG and JPG, which doubles the pixel size of the saved file.
- Preview as you type, with the output size in pixels and the approximate file size in KB beside it.
- Code panel with the data URL, an HTML img tag (with width and height) and a CSS background rule, each copied in full by its Copy button.
- Clear file names such as placeholder-800x600.svg or placeholder-400x300@2x.png.
- A plain error if your browser cannot create a very large canvas, with advice to use a smaller size or SVG.
To embed an existing picture the same way, convert it with Image to Base64 or the data URL converter. To shrink a finished PNG or JPG, use the image compressor.
How to make a placeholder image, step by step
- Under Dimensions, type a Width (px) and Height (px), or click a preset such as 800×600.
- Under Colours, set the Background colour and Text colour with the pickers, or type any CSS colour.
- Under Text & Format, type a label, or leave it empty to show the size.
- Click PNG, JPG or SVG. For PNG or JPG, tick @2x Retina if the image is for a high-density screen.
- Check the Preview, then click Download, or use Copy beside Data URL, HTML <img> tag or CSS background in the Code panel.
Want a different design, such as a gradient? Build it in the CSS gradient generator, or pick exact colours in the colour picker and paste the hex code here.
Who can use it
- Front-end developers building cards, galleries and hero sections before the photography arrives.
- Designers labelling every image slot in a wireframe, then sending the final art through the thumbnail generator.
- Testers who need an image of a known pixel size to try an upload form or a size limit.
- Documentation and tutorial writers who need neutral pictures that cannot be mistaken for real content.
- Site owners preparing a favicon or icon set, starting from the favicon generator.
FAQs
How do I make a placeholder image of an exact size?
Type a width and height in pixels, or click a preset such as 1200×630. Choose a background and text colour, optionally type your own label, pick PNG, JPG or SVG and click the Download button. The preview updates as you type, and the label defaults to the size, for example "400 × 300".
What is a placeholder image used for?
A placeholder image is a temporary stand-in for a picture that does not exist yet. Designers and developers use one to reserve the right amount of space in a layout, make wireframes readable, and test how cards, banners and responsive images behave before the real photos arrive. Printing the size on it shows exactly which asset is still missing.
What sizes and formats can I create?
Any whole-number width and height from 1 to 4000 pixels, saved as PNG, JPG or SVG. PNG and JPG can also be exported at @2x for high-density screens, which doubles each side, so the largest raster file is 8000 × 8000. SVG is a vector file, so it stays sharp at any size and is usually the smallest download.
Which colour formats can I type?
Anything a browser understands as a CSS colour: hex codes such as #ccc or #cccccc, rgb() and hsl() values, and names such as tomato or slategray. Type "transparent" as the background for a see-through PNG or SVG. JPG has no transparency, so a transparent background is saved as white. A field that is not a colour turns red.
How do I use a placeholder image without hosting a file?
Use the Code panel under the preview. It gives the image as a data URL, as an HTML img tag and as a CSS background-image rule, each with a Copy button that copies the full text. Paste it into your HTML or stylesheet and the image is embedded, so there is no file to upload. The preview shows the approximate size in KB.
What is the difference between PNG, JPG and SVG placeholders?
PNG is lossless and supports transparency, so text edges stay crisp. JPG is accepted everywhere but has no transparency and softens text slightly. SVG is a small text file that scales to any size without blurring, which suits responsive layouts, but it is not accepted by every upload form, and fonts can differ between viewers.
Is it safe to use, and are my images uploaded?
Nothing is uploaded. The image is drawn by your browser on your own device, or written as SVG text, and the label you type is never sent to a server. You can confirm it in the Network tab of your browser DevTools while you generate an image. There is no sign-up and no watermark.
Why does a long label get smaller?
The label is sized to fill about 85% of the image width and at most a fifth of its height, so it never runs off the edge. A long label therefore shrinks, and a very small image gives a small label. Use a shorter label or a wider image if you need larger text. Labels can be up to 200 characters.