Placeholder Image

How to use it

1. Set the width and height in pixels, from 16 up to 4096.
2. Pick the background and text color with the two color pickers.
3. Type a label; leave it empty to fall back to the size text such as 600 x 400.
4. Click Generate to draw the image, then Download PNG or copy the equivalent SVG code below.

Common use cases

• Wireframes and mockups - drop correctly sized blocks into a layout before the real artwork exists.
• Missing image fallbacks - keep a ready-made 1:1 and 16:9 placeholder around for broken embeds.
• Email templates - test column widths with lightweight, exact-size images.
• Teaching materials - show how aspect ratios and crops behave without licensing real photos.

Why it stays private

The image is painted on an HTML canvas inside your browser tab, and the SVG variant is assembled from the same settings as plain text. Nothing is uploaded, and the files you download never pass through a server.

FAQ

Q: Should I ship the PNG or the SVG? A: Use the PNG when you need a fixed raster size, for example in a thumbnail slot. Use the SVG when the same placeholder must stay sharp at many sizes, because it scales without quality loss and is far smaller as text.

Q: Does the SVG look exactly like the PNG? A: Both are built from the same width, height, colors and label, so they match in size, colors and text placement. Exact glyph rendering can differ slightly between the canvas font rasterizer and SVG text.

Q: Can I change the font or add a border? A: The generated files use a generic sans-serif face and no border to stay simple. You can edit the copied SVG by hand; the text element, fill colors and dimensions are all plain attributes.