Placeholder Image Generator

Features

• Any size up to 4000×4000
• Eight common presets for social and ad formats
• Custom text, colours and font size
• PNG and SVG export
• Copy a data URI or a complete img tag

How to use it

1. Set the dimensions, or pick a preset.
2. Add text, or leave it blank to show the size.
3. Choose your colours.
4. Download, or copy a data URI to paste into your code.

Placeholder images and layout stability

The main reason to use correctly sized placeholders during development is Cumulative Layout Shift. If an image has no dimensions, the browser cannot reserve space for it, so everything below jumps down when it finally loads. That is measured by Core Web Vitals and it is genuinely annoying to use. Always set explicit width and height attributes, or an aspect-ratio in CSS, and the browser reserves the right box before a single byte of the image arrives.

The data URI option is useful but has a real cost. Embedding an image directly in your HTML or CSS avoids a network request, which is worth it for tiny assets. But Base64 encoding inflates the data by roughly 33%, the bytes cannot be cached separately from the document, and a large data URI bloats every page load. As a rough guide, inline anything under about 2 KB and link to everything larger.

SVG is usually the better format for placeholders specifically. It stays crisp at any size, and a solid-colour rectangle with a line of text compresses to a few hundred bytes, far smaller than the equivalent PNG. It is also editable as plain text, so you can adjust the colour in your editor without regenerating anything.