Question 1

Why generate placeholders locally vs using a CDN?

Accepted Answer

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.

Question 2

What format should I use?

Accepted Answer

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.

Question 3

Why generate placeholders locally instead of using a CDN service?

Accepted Answer

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.

Question 4

Should placeholder images have alt text?

Accepted Answer

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.

Question 5

How do I stop placeholders causing layout shift?

Accepted Answer

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.

Question 6

Can I use a data: URL in production?

Accepted Answer

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.

Placeholder Image Generator

How the Placeholder Image Generator works

When to use the Placeholder Image Generator