Free Lazy-Load Placeholder Generator — LQIP / Blur-Up Data URIs

Blank rectangles during image load look unprofessional and ruin Core Web Vitals. PikDraw's Lazy-Load Placeholder Generator creates tiny, inline-able blur placeholders (LQIP / blur-up) for every image in your folder — base64 data URIs ready to drop into HTML, JSX, CSS or a Next.js blurDataURL prop. All processing happens in your browser.

What is the Lazy-Load Placeholder Generator — LQIP / Blur-Up Data URIs?

Lazy-Load Placeholder is a client-side tool that downscales each input image to ~20 pixels wide, encodes it as a low-quality JPEG, and serialises the result as a base64 data URI. Output is a one-click copy per image plus a downloadable JSON manifest mapping every filename to its placeholder.

Key features

  • Generates LQIP / blur-up data URIs
  • Configurable width (8 – 64 px)
  • Typical payload ~400 bytes per image
  • One-click clipboard copy per file
  • Downloadable JSON manifest for build pipelines
  • Works with any framework — no runtime JS required
  • 100% client-side — no upload
  • Free, no signup, no watermark

How it works

Each uploaded image is decoded into an off-screen Canvas, scaled down to the chosen width with aspect ratio preserved, and re-encoded as a JPEG at 50% quality (the visible blur smooths over the compression). canvas.toDataURL() returns a base64 data URI that the browser can render inline without any HTTP request. The full set is exposed both as individual copy buttons and as a single JSON file keyed by original filename.

Why use this tool

Most LQIP tooling lives inside specific frameworks (Plaiceholder for Next.js, BlurHash for React Native). PikDraw's generator is framework-agnostic, free, runs in your browser, and produces standard data URIs that work everywhere — from raw HTML to enterprise CMS pipelines. No npm install, no build step, no upload.

Common use cases

  • Generate Next/Image blurDataURL props at build time
  • Add LQIP to a React / Vue / Astro / Svelte image component
  • Improve Core Web Vitals (LCP and CLS) on image-heavy pages
  • Provide colour-accurate placeholders for slow connections
  • Replace blank rectangles in Tailwind-styled cards
  • Pre-render placeholders for a Contentful / Sanity / Strapi pipeline
  • Build a blur-up gallery for portfolios and editorial sites

How to use this tool

  1. Upload your images — Drop any number of JPGs, PNGs or WebPs. The tool generates one tiny base64 placeholder per image — the originals are never modified.
  2. Set placeholder width — 20 px is the Next.js / Plaiceholder convention and ~400 bytes per placeholder. 32 px gives more colour fidelity; 8 px is the absolute minimum and looks like 'colour wash' rather than a blur.
  3. Generate — Each image is downscaled in your browser, encoded as a low-quality JPEG and serialised as a base64 data URI you can drop straight into your CSS, HTML or JSX.
  4. Copy or download JSON — Copy individual data URIs to clipboard, or download a single JSON file mapping filename → placeholder data URI. Drop that JSON into your build pipeline.
  5. Use in your front-end — Render the data URI inside an <img>, an inline style background-image, or pass to a component prop. Apply a CSS blur(8–20px) and an opacity transition that resolves when the full image fires onload.

Who should use this

Front-end developers chasing Core Web Vitals. Static-site engineers building image-heavy portfolios and blogs. CMS administrators retrofitting LQIP onto existing libraries. Designers prototyping pages who want polished placeholder states without writing a build script.

How to get started

Drop your images, keep the default 20 px width, click Generate, then copy individual placeholders or download the JSON manifest.

Best practices

  • Stay at or below 20 px width for inline payloads under 1 KB
  • Pair placeholders with width + height attributes to prevent CLS
  • Apply CSS blur(20px) and transform: scale(1.1) to hide JPEG edge artefacts
  • Cross-fade from placeholder to full image with opacity transitions
  • Cache the JSON manifest — placeholders are deterministic per source
  • Use JPEG placeholders only for photographic content
  • For transparent PNGs, generate a colour-only swatch instead

Pro tips

  • Keep placeholders under 1 KB — bigger defeats the point of inline delivery.
  • Always pair with the real <img> using width + height attributes so the layout doesn't shift.
  • CSS `transform: scale(1.1)` hides the JPEG block artefacts on the edges.
  • Cache the JSON in your CMS so you don't regenerate placeholders on every build.
  • For colour-only placeholders, 8 px width gives you the dominant tone without artefacts.

Expert insights

💡 Pro Tip: 20 px is the sweet spot

Next.js and Plaiceholder both standardise around 20 px. Larger looks better but bloats the inline payload.

💡 Pro Tip: Always set dimensions

Pair LQIP with explicit width and height attributes — otherwise CLS spikes when the full image arrives.

💡 Pro Tip: Cache the JSON

Generate once, store the JSON in your CMS or repo, and reuse forever. Placeholders never need to be regenerated unless the source changes.

Limitations to be aware of

  • JPEG output only (no transparency)
  • Bigger placeholders defeat the purpose of inline delivery
  • Does not output BlurHash strings
  • Single placeholder per image (no progressive levels)
  • Browser RAM bounds very large batches
  • No CMS integration — output is plain JSON

Frequently asked questions

What is LQIP?
Low-Quality Image Placeholder. A tiny, heavily blurred version of an image (~20 px wide, ~400 bytes) that loads instantly inline and is gradually replaced by the full image as it arrives. Popularised by Medium, refined by Cloudinary's BlurHash and Next.js's <Image> component.
Why not just lazy-load without a placeholder?
Lazy loading without a placeholder leaves blank rectangles that cause layout jank and a worse perceived load. A blur placeholder fills the rectangle immediately with something colour-correct, so the page reads as 'mostly loaded' from the first paint.
How big are the placeholders?
At 20 px wide, a typical landscape photo generates a ~400 byte data URI. Square images are slightly smaller, portraits slightly larger. The base64 overhead adds ~33% vs the raw bytes — still trivial to inline.
Should I use BlurHash instead?
BlurHash gives more pleasing blurs at smaller payloads (~30 bytes) but requires a JavaScript decoder on the client. LQIP data URIs need no JS — the browser renders them natively, instantly. Use BlurHash if you already have a JS-heavy framework; LQIP if you want zero runtime cost.
How do I use this in Next.js?
Next/Image accepts placeholder='blur' with blurDataURL — paste this tool's data URI straight into blurDataURL. For Static Site Generation, generate the placeholders at build time and store them in your CMS or in the page's frontmatter.
Can I use it for React / Vue / Astro?
Yes. Render the data URI as the <img> src first, then swap in the full image when onload fires. Apply CSS `filter: blur(20px)` to soften the JPEG. Most frameworks have community wrappers (react-blurhash, vue-lazyload-placeholder).
Does this work for PNG transparency?
No. Placeholders are encoded as JPEG (smallest possible payload). For PNG transparency previews, generate a tiny PNG manually — but for typical photo content JPEG is the right choice.
Are my files uploaded?
No. Downscaling and base64 encoding run entirely in your browser. Safe for unreleased imagery.

Browse all PikDraw image tools →