About this tool
A placeholder is what a page shows in the instant before the real image has finished loading — a blurred smudge of the photo to come, or a plain colored box — so the layout doesn't jump and the page feels alive while the real asset is still in flight. The blurred-photo style is often called LQIP (Low-Quality Image Placeholder): shrink the source photo down to a handful of pixels — 20 to 40px on the long edge is plenty — optionally soften it with a touch of blur, and re-encode that tiny result. With so few pixels there is very little to encode, so the output is typically a few hundred bytes to a couple of kilobytes, small enough to inline directly as a base64 data URI instead of fetching it as a separate file.
Inlining the placeholder as a data URI means it ships inside the page's own HTML or CSS — no extra network round trip just to show something before the real photo arrives. Stretch the tiny, slightly blurred result up to the real image's display size with CSS and it reads as a soft preview of the photo to come; that's the exact trick behind the fade-in loading effect on sites like Medium and many product-photo galleries. When there's no source photo yet — a skeleton screen, a rough layout mockup, or reserved space for content a user hasn't uploaded — switch to the second mode to generate a plain solid-color, gradient or striped placeholder at any pixel size instead, with the same instant download and copyable data URI. Everything runs locally in your browser; nothing is ever uploaded.
Frequently asked questions
How small is "small" for the LQIP data URI?
A typical output at the default tiny dimensions (well under 50px on the longer side) lands somewhere around a few hundred bytes to roughly 1-2KB as a base64 string — tiny enough to embed directly inline in your HTML/CSS/JS without adding any meaningful weight to your page, which is the entire point of the LQIP technique: showing SOMETHING immediately while the real, full-size image loads in the background.
Should I use the "From photo" mode or the "Solid/gradient" mode?
Use "From photo" when you already have the real image and want a placeholder that visually hints at what's coming (a blurred preview of the actual content) — this gives users a smoother, more informative loading experience. Use "Solid/gradient" when you need a generic placeholder BEFORE the real image is known or ready (e.g. a skeleton-loading state for a gallery whose photos haven't been chosen yet), or simply want something simpler and even smaller than an LQIP.