Blurred image placeholder

Placeholder turns each image you drop into three stand-ins to show while the real file loads: a base64 data URI of an image 8 to 64 pixels wide, the average hex color of every opaque pixel, and a CSS gradient built from a grid of cell colors that makes no request at all. The tiny image is written as WebP or JPEG — or both, keeping whichever came out shorter — and the tool flags any data URI over 2 KB, the point at which a placeholder becomes a second image download. Nothing is saved as a file: each result carries copy buttons for the data URI, an img tag with the placeholder as its background, the CSS rule and the hex.

How it works

  1. Drop the images Add one or several. Each is decoded once, box-filtered down to 512 pixels on its long edge, and the full-size bitmap is released, so a batch of large photographs does not sit in memory.
  2. Set the width and quality Choose a placeholder width between 8 and 64 pixels; the height follows the aspect ratio. Lower the quality slider — 0.3 to 0.95 — if the data URI is longer than you want.
  3. Choose the format Pick WebP, JPEG, or Smallest, which writes both and keeps whichever is fewer bytes.
  4. Tune the preview blur and the gradient grid The blur changes only what is drawn on screen, not the bytes — it is the blur you would apply while the real file loads. The grid slider sets how many cells across and down the CSS gradient is built from, from 2 to 6.
  5. Copy what you need Each card has buttons for the data URI, an img tag carrying the placeholder as its background, the CSS gradient rule and the hex color.

Questions

How small does the data URI have to be?
Under 2 KB. Past that the browser downloads two images instead of one, which defeats the point, so the tool marks any result over 2048 bytes and tells you to drop the width or the quality. Base64 is ASCII, so one character is one byte on the wire.
Is there a file to download?
No. Placeholder produces text rather than files — a data URI, a hex color and a CSS rule — so every result is copied to the clipboard from its card. If the browser blocks clipboard access the tool says so and you can select the value and copy it by hand.
What is the CSS gradient option for?
It averages the image into a grid of up to 6 by 6 cells and writes them as one horizontal linear-gradient per row, layered and positioned down the box, so the placeholder costs no request at all. It is smooth across and stepped down: at 3 rows or fewer the bands are visible, and the tool says so.

Every tool