Placeholder image generator
Create a plain placeholder picture at the exact size you need, with the size written on it, for mock-ups, layouts and tests.
Runs entirely in your browser
Leave blank to show the size.
Width and height from 1 to 8000 pixels, up to 100 megapixels in total. Text is one line, sized to fit.
How to make a placeholder image
- Type a width and height, or press a preset such as 1200 × 630 for a social card or 300 × 250 for an advert.
- Choose the background and text colours. Leave the text blank to show the size, or write your own label.
- Pick PNG, JPEG, WebP or SVG and press Download, or copy the image as a data URI.
Choosing a placeholder size
A placeholder stands in for a real picture while you build a page, so the useful thing is that it has the right shape. Layouts break on aspect ratio more than on resolution: a 16:9 hero image behaves differently from a square avatar even if both are small. Writing the size on the picture means anyone looking at the mock-up can see which slot needs which dimensions.
The presets cover sizes that come up repeatedly: 1200 × 630 is the shape most social networks use for link previews, 1080 × 1080 a square post, 1920 × 1080 and 1280 × 720 the common video frames, 300 × 250 and 728 × 90 two standard advert slots, and 150 × 150 a typical avatar.
For real use, remember that a placeholder is flat colour. PNG and SVG store that almost for free, while JPEG at a large size adds blur around the text. If you paste the picture into code as a data URI, keep it small: every byte of the image is repeated in your page.
Tips
- Need the real picture at that size? Resize image and Crop image get a photo to the exact slot.
- To embed a finished image as text, use Image to Base64.
- Pick matching colours with the Color converter.
Questions
Does anything leave my device?
No. Nothing you type is sent anywhere. The picture is drawn by your browser, and the download is created on your device.
Which format should I choose?
SVG is a few hundred bytes and sharp at any size, so it suits web layouts. PNG is exact and lossless for flat colours. JPEG and WebP make smaller files for large sizes, and JPEG shows slight softness around text. Some places that accept uploads, such as many CMS fields, only take raster images, so use PNG there.
How is the text size chosen?
Automatically. The text is made as large as fits on one line within about 80 per cent of the width and 40 per cent of the height, so a wide banner such as 728 × 90 and a tall one such as 160 × 600 both look right.
What is the data URI for?
A data URI is the image written out as text, so you can paste it straight into an HTML img tag or a CSS background without a separate file. It works well for small images. A large PNG becomes a long string that bloats your page, so the tool warns you when the result is bigger than is practical, and refuses to copy anything over 1 MB.
Does the SVG need special fonts?
No. It uses the system sans-serif font, so it looks a little different on different devices but always fits, and the text is escaped so characters like & and < are safe.
What are the size limits?
Each side can be 1 to 8000 pixels and the total can be up to 100 megapixels. Larger images take longer to draw and may not open in some programs.