Placeholder Image Generator

Placeholder images stand in for real pictures while you build a web page, a slide or an ad layout, and blank images fill slots that need a file of an exact size. This generator draws an image of any size with a background colour (or none), an optional size label, a wireframe cross or a border, as PNG, JPG, WebP or vector SVG. You also get the SVG markup and a data URI to paste straight into HTML or CSS, and you can make a whole set of sizes in one go.

How to use this tool

1. Enter the width and height, and optionally more sizes such as 300x250 and 728x90.
2. Pick a background colour or tick transparent.
3. Choose plain, cross lines or a border, and keep the size label or type your own.
4. Pick the format and download the files, or copy the SVG markup or data URI.

Formula

auto font size = min(0.22 × height, 0.16 × width), reduced so the label is at most 85% of the width

The font size is rounded to whole pixels; a label that would be smaller than 6 px, or taller than the image, is left out. Lines are max(1, round(shorter side ÷ 200)) px wide. The SVG data URI is the markup run through encodeURIComponent; raster data URIs are base64, which is about 4/3 the size of the file, so they are shown only for files up to 150 KB.

Example

The default 1200 × 630 (the usual social-share image size) gets the label "1200 × 630" at min(0.22 × 630, 0.16 × 1200) = 138.6, rounded to 139 px bold, centred on #cccccc. A plain grey PNG of that size is only a few kilobytes, and its data URI is about a third longer than the file in bytes.