Updated · Built and checked by the PlinzoTools team, formulas tested against published sources
Generate a placeholder image of any size, color, and label -- no network request.
Placeholder images are commonly used in mockups and development to reserve visual space before real content is ready. This tool generates one instantly as an SVG -- entirely in your browser, with no network request to an external placeholder service -- with your chosen dimensions, colors, and label text.
Set width, height, background color, text color, and (optionally) custom label text -- it defaults to showing the dimensions themselves. The preview updates instantly, and you can copy an <img> tag or download the SVG.
An SVG is built directly as a string: a colored rectangle sized to your dimensions, with centered text scaled proportionally to the image size. This is embedded as a data: URI, so the image renders with zero network requests, unlike third-party placeholder services.
For QR codes or barcodes as generated images instead, see the Barcode Generator or the existing QR Code Generator.
The tool starts at 400 by 300 pixels with a light gray background (#CCCCCC) and a darker gray text color (#666666), and with no custom label the image simply reads 400x300. The label size is calculated from the smaller side of the image: it is one fifth of the smaller dimension, but never below 12 pixels. For the default 400 by 300 image, the smaller side is 300, so the text is 60 pixels tall. For a wide banner such as 1200 by 200, the smaller side is 200, so the text is 40 pixels tall, and it stays centered both horizontally and vertically.
Imagine you are building a hypothetical product grid where each thumbnail slot is 320 by 240. You set width 320 and height 240, choose a soft blue background and white text, and leave the label empty. The copy button gives you an img tag with the width and height attributes already filled in and the image embedded as a data URI. Paste it into six grid cells and you can judge spacing, alignment and wrapping before any real photos exist. Later, replace only the src value with the real file path and keep the width and height attributes to avoid layout shift.
The label field accepts any text, and characters such as ampersands and angle brackets are escaped so they display literally instead of breaking the SVG. Labels like Hero image, Avatar or Ad slot help teammates understand what belongs in each space. Keep labels short: the tool does not wrap or shrink text to fit, so a long phrase in a small image will run past the edges. Shorten the text or make the image larger if that happens.
The output is an SVG, so it is a flat rectangle with text, not a photo-like image, gradient or pattern. Some contexts that require raster formats, such as certain email clients, image-upload forms or older tools, may not accept SVG or data URIs. Very large data URIs also make HTML source harder to read, so for a big page you may prefer to download the SVG file and reference it by path instead. Width and height accept whole pixel values of at least 1; extremely large values create a huge canvas description but the SVG itself stays tiny because it is only a rectangle and one text element.
No -- unlike many "placeholder.com"-style services, the image is generated entirely client-side as an SVG data URI, so it works offline and never depends on a third party staying online.
It's intended for mockups, prototypes, and development -- for production placeholder/loading states, consider a purpose-built loading skeleton or blurred low-res preview instead.
Because that's the most useful default for a mockup -- seeing "400x300" at a glance confirms the image's actual size is correct for your layout, without needing to check separately.
It is one fifth of the smaller of the width and height, with a minimum of 12 pixels. So a 500 by 500 image gets 100-pixel text.
Yes. The tag embeds the SVG as a data URI, so no request to any outside server is made. It renders even with no internet connection.
The tool centers the text but does not wrap it or shrink it to fit. Use a shorter label or a larger image size.
Copy the tag for quick mockups. Download the file if you want to reference it by path, reuse it in many places, or keep your HTML tidy.
Reference: MDN Web Docs