Why generate them rather than link them
A hosted placeholder service is one line of markup and no files to manage, and it is fine while you are the only person looking. It stops being fine the moment the mockup travels: a client on a corporate network where the domain is not allowed, a developer working offline, a design review in a room with no wifi, an archived HTML file opened three years later. Every one of those shows broken images where your layout used to be.
A generated file has no runtime dependency. It also has no third party watching who opens your mockup and when, which some clients care about more than you expect.
PNG or JPEG for a flat colour
A solid background with a few glyphs on it is exactly the content PNG is built for, and an 800 x 600 grey placeholder comes out at a few kilobytes — usually smaller and always sharper than the JPEG of the same thing. Pick JPEG for two reasons only: the pipeline you are feeding demands a .jpg extension, or you are deliberately imitating the file size of the photograph that will eventually sit there, so that a performance measurement on the mockup means something.
The label earns its place
Leaving the text empty writes the dimensions into the image. In a wireframe with a dozen image slots, that turns out to be the single most useful thing on the page — you can see at a glance that the hero is 1200 wide and the thumbnails are 160, and spot the one that is accidentally 161. Replacing it with a description ("product shot", "author photo") is better once the layout is settled and the conversation has moved from sizes to content.
When to inline the data URL
Base64 encoding inflates the payload by roughly a third and the result cannot be cached independently of the document that contains it, so an inlined image is downloaded again on every page load. Against that, it removes a request and it makes a single HTML file genuinely self-contained. That trade is worth it for email templates, for a one-file prototype you are going to send as an attachment, and for tiny decorative images. It is not worth it for anything a browser will fetch repeatedly, which is why the tool stops offering it above 60 KB.
The layout-shift habit
While you are placing dummy images, put the real dimensions on the img element. A browser that knows the intrinsic ratio before the bytes arrive reserves the space and nothing below it moves when the image lands. Get this right at wireframe stage with the placeholder markup and it survives into production; retrofit it later and you will be chasing a Cumulative Layout Shift score around a codebase that has already shipped.
Questions people ask
What is the largest image I can make?
4096 px on a side, and 16.7 million pixels in total, so 4096 x 4096 is the corner case that just fits. The ceiling is not arbitrary: past roughly that area browsers start returning blank canvases or throwing allocation errors instead of images, and the behaviour differs between desktop and mobile. If you need something larger, generate at half the size and scale it in whatever consumes it — a flat colour with text loses nothing.
Can I get a transparent background?
No — the canvas is filled with the background colour before anything else is drawn, so even the PNG output is fully opaque. For a transparent slot in a mockup, set the background to the same colour as the page and it will be indistinguishable, or leave the space empty in CSS and give it a border. A genuinely transparent placeholder is rarely what you want anyway, since the point is to make the reserved space visible.
Which font does it use?
The system UI font of whoever generates the image — San Francisco on macOS, Segoe UI on Windows, Roboto on most Android and Linux setups. That means the same settings produce slightly different letterforms on different machines. For dimension labels on a placeholder this is not worth worrying about; if you need typographic consistency, the image should not be a placeholder any more.
Why is the automatic font size sometimes small?
It starts at an eighth of the shorter edge and then shrinks until the text fits within 90% of the width. A long label on a narrow image hits that constraint quickly. Set the font size manually if you would rather have the text clipped than shrunk, or shorten the label.