What you can make with the placeholder image generator
A placeholder image is a plain coloured box of an exact size, usually labelled with its dimensions, that stands in for a real picture while a layout is still being built. This generator creates one in your browser and lets you download it as a PNG or SVG file, or copy it as a data URL you can paste straight into HTML or CSS. Designers use placeholders in wireframes and client mockups, front-end developers use them to test how cards, banners and grids behave before the final artwork arrives, and writers use them to reserve space for screenshots in a draft.
How to use it
- Click a Quick Preset — 150 × 150 (avatar or thumbnail), 300 × 250 and 728 × 90 (common banner slot sizes), 1200 × 630 (a typical link-preview image) or 1920 × 1080 (full HD) — or type your own Width and Height in pixels, from 1 to 4096.
- Choose PNG or SVG under Format.
- Set the Background Color and Text Color with the colour pickers, or type a six-digit hex code such as
#1e293binto the box next to each picker. - Leave Custom Text empty to print the size (for example "400 × 300"), or enter your own label such as "Hero image". Type
\nwhere you want a line break. - The preview updates as you type. Press Download to save
placeholder-WIDTHxHEIGHT.pngor.svg, or Copy Data URL to put the image on your clipboard as text.
How the images are generated
The PNG version is drawn on an HTML canvas at exactly the width and height you enter: the canvas is filled with the background colour and the label is written in bold, centred, using your system's interface font. The text size is one-eighth of the shorter side, with a 12-pixel minimum, and a line that is too wide is squeezed horizontally to fit within a 10-pixel margin. The line under the preview shows the approximate PNG file size. The SVG version is a short text file containing a rectangle and centred text in a generic sans-serif font, so it stays sharp at any zoom and is usually only a few hundred bytes. Because SVG text is rendered by whatever program opens the file, the font can look slightly different from the PNG, and a very long label is not squeezed and may run past the edges.
Nothing is uploaded or saved: the image exists only in the page until you download or copy it.
Using a data URL
A data URL puts the whole image inside a string that begins with data:image/png;base64, or data:image/svg+xml;base64,. You can paste it into an <img src="…"> attribute or a CSS background-image: url(…) without hosting a file. This is convenient for prototypes, but a large PNG turns into a very long string — a 1920 × 1080 image produces many kilobytes of text — so for anything beyond a quick test, download the file instead.
Frequently asked questions
Should I choose PNG or SVG?
SVG files are tiny and scale cleanly, which suits responsive layouts and design tools that accept vector images. PNG is safer when a system only accepts bitmap uploads, such as some content management systems, or when you need the file to have exact pixel dimensions.
Why is the maximum 4096 pixels?
Very large canvases use a lot of memory, and some mobile browsers refuse to create them. Values above 4096 are capped, and empty or zero values fall back to a default size.
What happens if I type an invalid colour?
The text box is passed to the image as typed, and it is copied to the colour picker only when it holds a full six-digit code like #ff8800. Shorthand codes such as #f80 or names such as navy usually work too, but a value the browser cannot read makes the PNG fall back to black, so the six-digit form is the safe choice.
Can I use these images in client work?
Yes. The images contain only the colours and text you choose, so there is nothing to license or attribute.