Blur Placeholder Generator

What is a blur placeholder (LQIP)?

A blur placeholder — also called an LQIP, Low Quality Image Placeholder — is a heavily downscaled, low-detail version of an image that's shown instantly while the full-resolution version loads. Because it's often under 1 KB, it can be embedded directly in the page's initial HTML as a Base64 data URI, so there's no extra network request and no flash of empty space or layout shift while the real image streams in.

This tool shrinks your image down to a tiny canvas (as small as 4px, up to 32px on the long edge, keeping aspect ratio), re-encodes it as a low-quality JPEG, and gives you the resulting Base64 string. Next.js's <Image> component consumes this directly via its blurDataURL prop combined with placeholder="blur", rendering it scaled up and CSS-blurred until the real image is ready.

When to use it

Use this for any image-heavy page where perceived load performance matters — blog post headers, product photos, portfolio galleries, hero images — anywhere a blank gray box or sudden pop-in would look jarring. It's especially valuable for images below the fold or served from a slow CDN, where the real image might take a second or more to arrive.

The size slider controls the tradeoff directly: smaller placeholders (4-8px) produce a more abstract blur and a smaller data URI, cheaper to inline; larger ones (16-32px) preserve more color and shape detail at the cost of a bigger string. For most photographic content, 8-10px hits a good balance — recognizable color blocks and gradients without a noticeably large payload.

Example

Drop a 1600×900 landscape photo with size set to 10px — the tool computes a proportional 10×6 canvas, draws the image down to that resolution, and re-encodes it as JPEG at 10% quality, producing a Base64 string typically under 500 characters. Paste that into blurDataURL on your Next.js <Image placeholder="blur" blurDataURL="..." width={1600} height={900} /> and the placeholder renders as a soft, correctly-proportioned color blur until the real photo loads.