Starlight Tools

Free Placeholder Image Generator – Custom Size, Color & Text

Create a placeholder or dummy image instantly, then copy a self-contained SVG, PNG, JPG or WebP data URI or download the file.

Free, no signup, no uploads, generated entirely in your browser. Your settings and images are not sent to or stored by Starlight Tools.

Customize your image

Size presets

Enter a whole number from 1 to 4096.

Enter a whole number from 1 to 4096. Total area cannot exceed 16 megapixels.

Ratio 4:3 · 1–4096 px per side · 16 MP maximum

Common aspect ratios
Used when auto-fit is turned off.
Colors

Contrast: checking…

Placeholder style
Output format

Live preview

400×300 SVGUpdates automatically
Show self-contained data URI

This is embedded image data, not a hosted or reusable public URL. It works offline. SVG uses percent-encoding; raster formats use browser-generated Base64 data.

Embed code

Choose how assistive technology should treat the image, then copy the snippet for your project.

Which should I choose? A development placeholder can describe the planned image or its purpose. A purely decorative placeholder on a user-facing page should normally use alt="" so screen readers ignore it. Replace temporary wording when final content ships.

Generate an image to create code.

Practical placeholder examples

Apply an example to load its dimensions, label, colors and style into the generator.

Profile avatar
150×150

Profile avatar

150×150 · 1:1 · account cards

Product card
300×250

Product card

300×250 · 6:5 · listings or ads

Blog hero
1200×675

Blog hero

1200×675 · 16:9 · article headers

Social preview
1200×630

Social preview

1200×630 · 40:21 · link previews

Mobile story
1080×1920

Mobile story

1080×1920 · 9:16 · vertical stories

Ad banner
728×90

Ad banner

728×90 · 91:11 · leaderboard slots

Choose the right placeholder workflow

SVG or raster?

Use SVG for crisp, lightweight mockups that scale. Choose PNG for lossless pixels and transparency, JPG for small photographic-style files without transparency, or WebP for modern compact raster output.

Data URI or file?

A data URI keeps a small placeholder directly in HTML or CSS and works offline. Download a file when it will be cached, reused, edited, or hosted at a public URL.

Test responsive layouts

Apply portrait, square and wide examples to check cards and breakpoints. Keep explicit width and height attributes so browsers reserve the correct aspect ratio and reduce cumulative layout shift.

Private by design

The browser creates every image locally: no upload, account or server rendering. The page does not store the entered text, colors or generated image.

Maintained by Starlight Robotics for Starlight Tools · Last reviewed:

Placeholder image generator FAQ

Can I create a placeholder with a custom size?

Yes. Enter whole-number dimensions from 1 to 4096 pixels per side, up to 16 megapixels, or apply a size or aspect-ratio preset.

Which image formats are supported?

You can preview and download SVG, PNG, JPG and WebP. SVG is ideal for lightweight scalable mockups; raster formats are useful when a workflow requires pixels.

Can the placeholder background be transparent?

Yes for SVG, PNG and WebP. JPG does not support transparency, so transparent areas are flattened to white when a JPG is exported.

Is the SVG data URI Base64?

No. The SVG output is percent-encoded text. PNG, JPG and WebP canvas data URIs are Base64-encoded by the browser.

What is the maximum image size?

Each side can be up to 4096 pixels and the total image can be up to 16 megapixels. These limits reduce browser memory failures.

Can I use the generated images commercially?

Yes. The basic shapes and text you create with this tool may be used in personal or commercial projects, provided you have rights to any text or brand colors you enter.

Are my images private?

Generation happens entirely in your browser. The tool does not upload or store your settings, image content or downloads.

Does the generator work offline?

Once the page is loaded, generation itself needs no server connection because the image is built locally in your browser.

How can I embed a placeholder in HTML, CSS, Markdown or React?

Choose a format and copy the matching code from the Embed Code tabs. HTML and JSX examples include width and height to reserve layout space.

Is the generated image hosted online?

No. A data URI is a self-contained image value, not a public URL. Download a file if you need to host it at a reusable web address.

Explore more tools