Placeholder Image Generator

Layouts are built before the photography exists. A card grid needs thumbnails, a hero needs a banner, an avatar column needs faces, and leaving blank spaces hides problems such as images that jump around while loading. A placeholder of the right size solves that: it holds the space, shows the proportions and makes screenshots look finished. This page draws one in the size and colours you choose, with no network request.

What is generated

The image is an SVG with a viewBox equal to the size you set, a rectangle that fills it with the background colour and a single text element centred both ways. For 800 by 600 pixels, a label of “Product photo”, a background of #cbd5e1 and a text colour of #475569, the file is 338 bytes: the root has width="800" height="600" viewBox="0 0 800 600" role="img" aria-label="Product photo", the rectangle uses width="100%" height="100%", and the text is set in system-ui, sans-serif at 103 pixels. Without a label, the text is the size itself, written as 1200 × 630, and also becomes the aria-label.

A worked example

Press Sample to load that 800 by 600 product-photo placeholder. Beside the preview you get four outputs. Download PNG renders the SVG on a canvas at exactly 800 by 600 pixels and saves placeholder-800x600.png. Download SVG saves the 338 byte file, which you can use at any size. The HTML line is <img src="data:image/svg+xml,..." width="800" height="600" alt="">, ready to paste into a mock-up. The SVG code block holds the same markup. For a pure CSS use, convert the SVG to a background with the SVG to CSS tool.

Presets and sizes

The chips set common sizes in one click. Square 600 suits product tiles, Card 4:3 at 640 by 480 is a classic thumbnail ratio, Hero 16:9 at 1280 by 720 matches video-shaped headers, Banner at 1200 by 300 is a wide strip, and Avatar at 128 by 128 is a profile picture. Open Graph at 1200 by 630 is the size usually used for link previews on social networks, and Story 9:16 at 1080 by 1920 matches the vertical format of story features. You can still edit width and height afterwards, from 1 up to 4000 pixels.

Text and colours

Font size 0 picks a size from the image dimensions so that the label fits: 24 pixels for a 128 by 128 avatar, 103 for the 800 by 600 label above and 158 for a 1200 by 630 size label. Enter your own size when you want a smaller or larger label. Pick a text colour with enough contrast against the background, since the label is also a small accessibility check on your colour pairs. Reset restores the default grey blue.

Using placeholders well

Set the same width and height on the img element as on the placeholder so the browser reserves the space and the page does not shift when the real picture loads. Use the same aspect ratio as the real asset. Replace every placeholder and write meaningful alt text before launch; search engines and screen readers cannot use a grey box. If a placeholder must stay in production, mark it clearly as decorative with an empty alt.

Edge cases

Very long labels can overflow a small image because the text is a single line and is not wrapped. PNG output at 4000 by 4000 pixels takes noticeable memory on a phone. The SVG text depends on the viewer’s system font, so exact glyph shapes differ between machines, although the PNG is rendered by your own browser. Emoji in the label render only if the system has them.

Limits

Only a flat rectangle with one line of text is offered: no gradients, patterns, rounded corners or icons. The generator makes no photographs or sample faces. All drawing happens in your browser.

Related tools

• Aspect Ratio Calculator works out sizes that keep a ratio.
• Object Fit Tester shows how the real image will fill its box.
• SVG to CSS Converter turns the SVG into a CSS background.
• Image Resizer scales the final picture to the same dimensions.