Dummy Image Placeholder Generator

Generate resolution-exact placeholder images as embeddable data URIs for mockups and tests.

Generate placeholder image data URIs instantly. Free dummy image generator with custom size, colors and text — no signup, works offline.

About Placeholder

Generate resolution-exact placeholder images as embeddable data URIs for mockups and tests.

Enter dimensions, pick background and text colors, and get a crisp SVG placeholder at exactly that size — previewed above and downloadable. Because it is a data URI, it embeds directly into HTML or CSS with zero requests.

SVG placeholders stay sharp at any zoom and weigh bytes, unlike generated PNG services. Everything runs in your browser, offline-friendly.

Where it is used

Wireframes, layout testing, CMS demos, and email templates that need sized image slots.

How to use the Placeholder

  1. Width (px) — enter the value (e.g. 800).
  2. Height (px) — enter the value (e.g. 600).
  3. Background Color (hex) — enter the value (e.g. cccccc).
  4. Text Color (hex) — enter the value (e.g. 333333).
  5. Label Text (optional) — enter the value (e.g. Preview).
  6. Calculate — press the Calculate button to see the result instantly above.

Formula

Inline SVG rect + centered label, served as an encoded data URI.

Examples

Example

width:800
height:600
bgColor:cccccc
fgColor:333333
labelText:
Result: 800 × 600 data-URI placeholder

Frequently Asked Questions

Why SVG instead of PNG?
SVG is resolution-independent and tiny, and data URIs embed anywhere. For photographic placeholders, use a real image service instead.
Will the data URI work in <img> tags?
Yes — paste it as the src. It also works in CSS url() and most email clients that accept data URIs.
What if I need an exact brand color?
Type any 3- or 6-digit hex (with or without #). Invalid entries fall back to the defaults.
Image ConverterImage Compressor