LQIP placeholder generator

Generate a blurred image placeholder (LQIP) for lazy-loaded images, free and in your browser with no upload. Each image gives a tiny base64 data URI, its average color and a CSS gradient, ready to copy.

A few hundred bytes of base64 that looks like the photograph. Swap it for the real file once that arrives.

In detail

Placeholder turns each image 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 color of every opaque pixel, and a CSS gradient built from a grid of cell colors that needs no request at all.

The tiny image is written as WebP or JPEG, or both with the shorter one kept, 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 has copy buttons for the data URI, an img tag, the CSS rule and the hex color.

LQIP placeholder generator at a glance

Input: JPG, PNG, WebP, AVIF, HEIC, GIF (first frame), BMP, TIFF, SVG and other image formats
Output: Text to copy: a data URI, an img tag, a CSS gradient and a hex color
What it does: A base64 data URI from 8 to 64 pixels wide
The average hex color
A CSS gradient with no request
WebP, JPEG or the smaller of both
Copy buttons for every format
Who it is for: Web developers building lazy-loaded images and fast pages.
Limits: Data URIs over 2 KB are flagged as too large to help.
Nothing is saved as a file; results are copied.
Privacy: Runs entirely in your browser: no file is uploaded, and nothing is kept after you close the tab.

How to make a blurred image placeholder

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.
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.
Choose the format Pick WebP, JPEG, or Smallest, which writes both and keeps whichever is fewer bytes.
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.
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.

LQIP placeholder generator: common 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.