PNG / SVG / WebPData URILive Preview

Settings

#E5E7EB
#6B7280
<img src="[data-uri]" width="800" height="400" alt="Placeholder 800x400" />

How It Works

1

Set Dimensions

Enter width, height, and choose background and text colors.

2

Customize

Add custom text, adjust font size, and pick the output format.

3

Download or Copy

Download the image or copy the data URI / HTML snippet.

Frequently Asked Questions

What formats are supported?
You can download placeholder images as PNG, SVG, or WebP. SVG generates a lightweight vector file, while PNG and WebP produce raster images via the Canvas API.
What is a data URI?
A data URI is a Base64-encoded representation of the image that can be embedded directly in HTML or CSS without a separate file request. Click "Copy Data URI" to get the full string.
What is the maximum image size?
You can generate images up to 4000x4000 pixels. Very large images may take a moment to render in your browser.
Can I use custom text on the placeholder?
Yes. By default the text shows the dimensions (e.g. "800x400") but you can type any custom text in the "Custom Text" field.
Share:

About Placeholder Img

What this tool does

Generator tools create passwords, UUIDs, Lorem Ipsum placeholder text, QR codes, barcodes, fake data sets, random numbers, and various code snippets. Each output is generated fresh on every click using cryptographic or pseudo-random algorithms.

Why use this tool

Developers and designers constantly need test data, unique identifiers, and placeholder content during prototyping. Generating them locally avoids dependency on external APIs and keeps sensitive outputs like passwords off the network.

How it works

For security-sensitive outputs (passwords, UUIDs), the tool uses the Web Crypto API's crypto.getRandomValues(). For placeholder text, it assembles words from a built-in dictionary. QR codes and barcodes are rendered to canvas or SVG.

Pro tip

For passwords, enable all character classes and use at least 16 characters. A passphrase of 4-5 random dictionary words is equally strong and much easier to remember.

Love this tool? Explore 12467+ more

Free online tools for images, PDFs, text, code, and more. All running in your browser.

Explore All Tools