peartools

LQIP Generator

Make a Low Quality Image Placeholder. A tiny base64 data URI you can drop straight into an image tag or CSS to show a blur while the full image loads. No decoder or library needed. Adjust the size, quality, and format, and copy the string. Everything happens in your browser, so nothing is uploaded.

Drag and drop an image here, or

JPG, PNG, WebP, and GIF work. Up to 25 MB. Nothing is uploaded.

What is an LQIP?

LQIP stands for Low Quality Image Placeholder. The idea is simple: make a very small version of your image, often 16 to 32 pixels on the longest side, and show it, scaled up and blurred, while the full image downloads. It fills the space with the right colors so the page does not sit empty or jump around.

The small image is saved as a base64 data URI, a string that starts with data:image. Because it is a real image and not a hash, you do not need any code to render it. You drop the string into an image tag or a CSS background and the browser shows it right away, even before other scripts run.

The trade-off is size. A data URI is larger than a BlurHash or ThumbHash string, so it costs more to store per image. In return it is the easiest placeholder to use, since there is nothing to decode.

LQIP compared to BlurHash and ThumbHash

  • ·No decoder needed. It is a normal image, so an image tag or one line of CSS is enough.
  • ·Works everywhere. Even in email or a static page where JavaScript cannot run.
  • ·Larger to store. The data URI weighs more than a BlurHash or ThumbHash.
  • ·Framework ready. Fits the blur placeholder field in Next.js and similar tools.
  • ·You control the size. Pick the pixels, quality, and format to match your budget.

How to use it

  1. 1

    Add your image

    Drag a JPG, PNG, or WebP onto the box or pick a file. It is read in your browser and never uploaded. The tool draws a tiny version of it onto a canvas.

  2. 2

    Set size, quality, and format

    Choose how small the placeholder is, how much quality to keep, and whether to use WebP or JPEG. The data URI and its byte size update as you go, so you can trade sharpness for weight.

  3. 3

    Check the blurred preview

    The tiny image is shown blurred next to your original, which is how it looks when a browser scales it up behind the real photo.

  4. 4

    Copy the data URI

    Copy the base64 data URI and paste it straight into an image tag, a CSS background, or a framework's blur placeholder field. No decoder or extra library needed.

How to use an LQIP data URI in your code

The data URI is a normal image source, so it fits wherever an image goes. A couple of common ways:

<!-- Plain HTML: blur it with CSS, swap in the real image on load -->
<img src="data:image/webp;base64,UklGR... "
     style="filter: blur(8px)" />

// Next.js: pass it as the blur placeholder
<Image
  src="/photo.jpg"
  placeholder="blur"
  blurDataURL="data:image/webp;base64,UklGR... "
/>

Keep the placeholder small so the data URI stays light. A width of 16 to 32 pixels is usually enough, since it is blurred and scaled up anyway.

Who uses LQIP placeholders

An LQIP suits anyone who wants a placeholder with no client code. These are the people who use it most:

  • ·Next.js and Astro developers. Frameworks that support a blur placeholder take a base64 data URI directly. Generate one here for an image that is not in your build pipeline, or to see what a given size and quality produce.
  • ·Developers who want zero dependencies. An LQIP is a normal image, so it works with nothing but an image tag or a line of CSS. There is no decoder to add and nothing to run on the client.
  • ·Email and static site builders. Where you cannot run JavaScript, a base64 data URI still shows. It is a simple way to inline a small preview or a lightweight image without a second request.
  • ·Anyone tuning page speed. Reserve space and show a colored blur so the layout does not jump while images load, which helps your Largest Contentful Paint and Cumulative Layout Shift scores.

Frequently asked questions

What is an LQIP?
LQIP stands for Low Quality Image Placeholder. It is a real, tiny version of an image, often 16 to 32 pixels wide, saved as a base64 data URI. You show it, usually blurred and scaled up, while the full image loads, then swap in the real one.
How do I create an LQIP data URI?
Add your image here and the tool shrinks it and encodes a base64 data URI in your browser. Adjust the size, quality, and format to balance sharpness against weight, then copy the string. Nothing is uploaded.
How is an LQIP different from a BlurHash or ThumbHash?
An LQIP is an actual image, so it needs no decoder: you drop the data URI into an image tag or CSS and it just works. A BlurHash or ThumbHash is a compact hash that is smaller to store but needs a small library to render. LQIP is simplest to use; the hashes are lighter to store. Compare them with our BlurHash and ThumbHash generators.
Should I use WebP or JPEG for the placeholder?
WebP is usually smaller at the same quality, so it makes a lighter data URI, and every current browser supports it. JPEG is the safest fallback if you need to support very old clients. If your browser cannot encode WebP on a canvas, the tool falls back automatically and tells you.
How do I use the data URI in Next.js?
Pass it to the next/image component as the blurDataURL prop with placeholder set to blur. You can also use it as the background-image in CSS, or as the src of a small image element that sits behind the full one until it loads.
Are my images private?
Yes. The whole process runs in your browser. Your image is never uploaded to a server or saved anywhere, and once the page has loaded you can even use it offline.