Tiny Web Tools

Placeholder Image Generator

Generate placeholder images with the classic image icon or a dimensions label, in any size and colour. Copy as SVG or data URI, or download SVG/PNG. Responsive and private.

Style
Icon style

Preview (600×400)

Placeholder preview

The SVG uses a viewBox, so it scales responsively to any container. Everything is generated in your browser.

The Placeholder Image Generator creates dummy images for mockups, prototypes, and empty states. Pick a size and style — the classic image icon (like the familiar “no image” placeholder used by WooCommerce and product listings), a dimensions label, or a plain colour block — choose your colours, and grab it as SVG or PNG.

The SVG output uses a viewBox, so it scales cleanly to any container without blurring, making it ideal for responsive layouts. Everything is generated in your browser — nothing is uploaded, and there’s no external placeholder service to depend on.

How to generate a placeholder image

  1. Set the width and height you need.
  2. Choose a style: image icon, a dimensions label, or blank.
  3. Pick the background and icon/text colours.
  4. Copy it as an SVG or data URI, or download it as an SVG or PNG.

Which output should I use?

  • SVG — sharp at any size and tiny in file size; best for the web.
  • Data URI — paste directly into an <img src> or CSS background, no separate file needed.
  • PNG — a raster image for tools that don’t accept SVG.
  • The image icon style matches the classic e-commerce “placeholder” look for missing product photos.

Why generate placeholders locally?

Many developers use remote placeholder services (like placeholder URLs) that require a network request and can break, slow a page, or disappear. Generating the placeholder yourself gives you a self-contained SVG or data URI that always works, loads instantly, and keeps your mockups offline-friendly.

Because the SVG scales with a viewBox, a single placeholder works across every breakpoint — no need to generate multiple sizes.

Frequently Asked Questions

What is a placeholder image?

A placeholder is a temporary stand-in image used while designing or when a real image is missing — such as the grey “image” icon shown for products without photos.

Is the output responsive?

Yes. The SVG includes a viewBox, so it scales to fit any container width without losing quality. You can also set explicit dimensions when you need them.

Can I use it as an <img src> or CSS background?

Yes. Use “Copy data URI” and paste the value straight into an img src or a CSS background-image — no separate file required.

Does it look like the WooCommerce placeholder?

The image-icon style uses the same familiar framed picture glyph (a sun and mountains) that e-commerce placeholders use, on a grey background you can recolour.

Is anything uploaded?

No. The placeholder is created entirely in your browser and nothing is sent to a server.

Related Generators

QR Code Generator

Create custom QR codes for links, UPI payments, contacts, Wi-Fi, and more. Choose colors, add a logo, and download as PNG or SVG.

QR Code Scanner

Scan and read QR codes with your camera or by uploading an image. Decode links, Wi-Fi, contacts, UPI, and more — private and instant in your browser.

Favicon Generator

Turn any image into favicons — generate all the standard sizes (16, 32, 180, 512), download a favicon.ico, and copy the HTML snippet. Private and instant in your browser.