# Placeholder Image Generator

> Generate sized placeholder images — pick width, height, background, foreground, and label. Copy as SVG/PNG or a static URL.

- URL: https://generate.now/placeholder
- Category: media
- Price: free, no account required
- AI-powered: no
- Last updated: 2026-08-27

## What it does

A tiny placeholder image generator for mockups, design systems, and demo content. Pick exact dimensions, customize colors and label text, and grab the result as a copy-pasteable SVG, a downloadable PNG, or a copyable data: URL you can drop into any <img> tag.

## When to use it

- Fill a hero or grid with sized placeholder images during design
- Get a quick 1200×630 placeholder for OG image slots
- Build a design system showcase with consistent placeholder shapes
- Generate a labelled placeholder to call out 'avatar', 'cover', 'thumb'

## Examples

### 1200×630, dark bg, label 'OG image'

```
Downloadable SVG / PNG at exact dimensions
```

Common OG placeholder for blog post mockups.

### 120×120, accent bg, label '120²'

```
Square thumbnail placeholder
```

Use in a card grid before real assets exist.

### 1920×1080, dark background, label "hero"

```
Downloadable SVG or PNG at exactly 1920×1080
```

16:9 at full size, for checking a hero crop before the real photography exists.

### 400×400, data: URL output

```
data:image/svg+xml,%3Csvg xmlns=…
```

Paste straight into an img src with no file to manage.

## Frequently asked questions

### Why generate placeholders locally vs using a CDN?

CDNs like placeholder.com used to break or get blocked. Local generation is offline, free, and produces SVG (sharp at any size) or PNG with no network dependency.

### What format should I use?

SVG for sharp scaling and tiny file size — the default. PNG when you need a raster file for a system that doesn't accept SVG (some PDF tools, slide decks). data: URLs for inline embedding without any file at all.

### Why generate placeholders locally instead of using a CDN service?

Three reasons: the images work offline, they don't leak your mockup's structure to a third party through request logs, and they don't break when the service rate-limits you or disappears. Several popular placeholder services have gone down or started throttling over the years, taking every prototype that depended on them with them.

### Should placeholder images have alt text?

If the image is standing in for something decorative, use alt="" so assistive tech skips it. If it represents real content that will exist later — a product photo, an article thumbnail — write the alt text you'd eventually want. Mockups are where alt text habits form or don't.

### How do I stop placeholders causing layout shift?

Set width and height attributes on the img element matching the real aspect ratio. Browsers use them to reserve space before the image loads, which keeps Cumulative Layout Shift down. It works for placeholders and real images alike — the attributes aren't overridden by CSS sizing.

### Can I use a data: URL in production?

For small SVGs, yes — it saves a request and they compress well. Avoid it for base64 PNGs: base64 adds about a third to the file size and the bytes sit in your HTML, so they can't be cached separately and they delay first paint. Anything above a few kilobytes belongs in its own file.

## References

- [<img>: The Image Embed element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) — MDN Web Docs. Reference for width, height, and the attributes that prevent layout shift.
- [Images Tutorial](https://www.w3.org/WAI/tutorials/images/) — W3C WAI. How to describe decorative and informative placeholder images correctly.

## Related tools

- [Avatar Generator](https://generate.now/avatar): Generate deterministic avatars from a seed string. Initials, geometric, or identicon styles. SVG output, downloadable.
- [QR Code Generator](https://generate.now/qr-code): Turn text, URLs, WiFi credentials, or vCard info into a QR code. Download as SVG or PNG, customize color and error correction.
- [Lorem Ipsum Generator](https://generate.now/lorem): Generate placeholder text in seconds. Classic Latin or modern variants — corporate, hipster, bacon. By paragraphs, sentences, or words.