Placeholder images without the placeholder host

Inline it whenever the encoded string is under about a kilobyte, which every flat placeholder here is. The 1200 × 630 box is 291 bytes of SVG markup — 414 as base64, 480 percent-encoded — so inlining removes an HTTP request whose headers alone would outweigh the image. The PNG of the same box is a different calculation: base64 adds a third to the file, the string cannot be cached separately from the HTML it lives in, and it is re-downloaded with every page that repeats it. Take the file when something outside a browser has to read it — a README, a Figma frame, an email template that strips data URIs.

Nine times in ten the xmlns attribute is missing. An inline svg element in the DOM inherits its namespace from the HTML around it, so hand-written markup looks correct on the page and then fails the moment it becomes an image: an SVG loaded through img or background-image is parsed as a standalone XML document, and XML without a namespace is not SVG. The second cause is an unencoded hash — a color written as #e5e7eb inside a CSS url() ends the URI and starts a fragment identifier, leaving the browser a truncated document. Both encodings copied from this page are complete on both counts.

Because the SVG names a font stack rather than carrying the glyphs. system-ui resolves to San Francisco on macOS, Segoe UI on Windows and Roboto on most Android builds, and their widths differ enough that a label fitting exactly on one machine is clipped on another — and an SVG loaded as an image has no way to fetch a webfont to settle the argument. The PNG has no such problem, because the glyphs are already pixels by the time the file exists. Export the PNG when the placeholder is headed for a screenshot, a slide or a PDF.

No, and the place where a service still wins is worth stating plainly: its output is a URL, so changing 400x300 to 800x600 is two keystrokes in your markup, while here you come back and regenerate the file. What you get in exchange is that the box is no longer a third-party GET fired from every render of the mockup — it cannot be blocked by a proxy that allow-lists domains, it does not send a Referer header naming your staging host, it works with the network off, and it cannot begin returning 404 the day the service is retired. The percent-encoded data URI recovers some of the convenience, since the width, the height and the hex codes stay readable inside the string and can be edited in place.

It is for the case where the final image already exists and a grey rectangle would be a downgrade: a 20 px-wide copy of the real photograph, inlined in the HTML and blurred up in the slot while the full file arrives — the technique Medium shipped in 2015 that image components have copied ever since. 20 px is the width where the shapes are still recognizable and the string is still cheap, roughly 300 bytes as WebP against roughly 950 as JPEG. That gap is worth understanding rather than guessing at: a JPEG this small is mostly its quantization and Huffman tables, about 600 bytes of fixed header that do not shrink with the picture, so dropping JPEG quality from 0.5 to 0.3 saves around 40 bytes while changing the format saves nearly 700. Below 12 px too little is left to recognize; above 32 px the string passes a kilobyte and costs more than the perceived speed it buys. The averaged color shown beside the preview is the older and cheaper version of the same idea: one hex value behind the slot and no data URI at all.

Yes — give the background an alpha channel and the PNG keeps it as 8-bit alpha. rgba(15, 23, 42, 0.08) produces the faint tinted block a skeleton screen wants, and the SVG writes it as a fill plus fill-opacity rather than an rgba() fill, so renderers that predate CSS Color 4 still read it correctly. The contrast figure switches to the color composited over white as soon as you do this, because a WCAG ratio is only defined between two opaque colors and a translucent grey over an unknown page is not one.

Because the label states the intrinsic size of the file, not the size of the slot it landed in — and that gap is the most useful thing a placeholder can tell you. A box drawn at 1200 × 630 that displays 400 px wide means the layout is downscaling by three, so a real photograph in that slot would be shipping nine times the pixels it needs. Comparing the label against the rendered box is the quickest way to catch a mis-sized image slot while it is still cheap to fix.