All tools

Placeholder Image Generator

Make placeholder images of any size

Create placeholder images with custom size, colours and text, and download them as PNG, JPEG, WebP or SVG.

How to use Placeholder Image Generator

  1. Enter a Width and Height (1 to 8000 pixels), choose the background and text colours, and optionally type your own text. The default is the size, such as 800×600.
  2. Pick a format (PNG, JPEG, WebP or SVG) and press Download. A warning appears if the two colours have low contrast.
  3. Press Copy SVG data URI to paste the image straight into CSS or HTML, or copy the SVG source.
  4. For many sizes at once, list them under Batch to ZIP (for example 1200x630, 400x300, 150) and download one ZIP with an image for each.

How it works

The preview and the SVG output are generated as a small SVG document: a full-size rectangle in the background colour and one centred text element, with the text escaped for XML. The SVG data URI is that document URL-encoded after data:image/svg+xml,.

PNG, JPEG and WebP are drawn onto an HTML canvas of exactly the chosen size and encoded by the browser (JPEG and WebP at quality 0.92). Auto font size picks the largest size that fits within 90% of the width and 30% of the height, assuming an average glyph width of 0.58 em, with a minimum of 8 px. The ZIP is built in your browser with an uncompressed (stored) ZIP writer. Contrast is the WCAG ratio between the two colours.

Limits

  • Width and height are whole numbers from 1 to 8000. Very large canvases (above about 16 million pixels) may fail to encode in some browsers, especially Safari and mobile browsers.
  • WebP encoding is not available in every browser; if yours cannot encode it you will see an error and can choose PNG or JPEG.
  • JPEG has no transparency, which does not matter here because the background is always opaque.
  • The text is one line using your system’s default sans-serif font. Long text with a fixed font size can overflow the image, and PNG/JPEG/WebP text may look slightly different from the SVG because each uses its own font rendering.
  • A ZIP holds at most 30 sizes. Colours must be hex (#rgb or #rrggbb).

Privacy

Images are generated in your browser. Nothing is uploaded and nothing is stored. Copy share link puts the size, colours, text and format in the link’s # fragment, which browsers don’t send to servers.

Frequently asked questions

How do I use the data URI?

Paste it as an image source, for example <img src="data:image/svg+xml,…"> or background-image: url("…"). It needs no separate file or network request.

Why does the text look different in PNG and SVG?

An SVG is drawn by whoever displays it, using that device’s fonts, while PNG, JPEG and WebP are drawn once here with your browser’s font. Sizes and colours match, but glyph shapes can differ.

What contrast should I use?

WCAG asks for at least 4.5:1 for normal text. The tool warns below that. Placeholders are often decorative, so it is a hint, not a block.

Can I use a transparent background?

Not currently. The background is always an opaque colour.

More tools