BlurHash, ThumbHash and LQIP placeholder generator

What an image placeholder is and why you need one

A placeholder is what users see in an image's slot while the image downloads. Without one, the page shows an empty box (or nothing) and the image pops in when it arrives. With one, the slot is filled from the very first paint with a heavily blurred version or the main color of the photo, and the final image fades in on top.

This isn't just cosmetic. A good placeholder:

• Reduces perceived waiting time. Users feel the page is already there even while images are still loading. On slow mobile connections the difference is very noticeable.
• Prevents layout shifts, as long as it comes with width and height or aspect-ratio. The image's space is reserved from the first paint, so CLS (Cumulative Layout Shift) is not affected.
• Provides visual continuity in galleries, online stores and infinite feeds, where dozens of images load at once.

The key is for the placeholder to be tiny (usually under 300 bytes) so you can inline it in your HTML or API JSON without adding requests or delaying anything.

How to use the generator

1. Drop, paste (Ctrl+V) or pick your images. Add as many as you like. They're processed in your browser and never uploaded.
2. Pick a placeholder type in the preview tabs: LQIP, BlurHash, ThumbHash, color or gradient. On the left you'll see what the slot looks like while loading; on the right, the original image.
3. Tweak if needed the number of BlurHash components or the LQIP size in Advanced settings. The defaults work well for most photos.
4. Copy the code for your stack: next/image, HTML with CSS, React with BlurHash, or ThumbHash.
5. Download the JSON with the data for every image if you want to store it in your database, CMS or content files.

The five placeholder types, explained

LQIP (blurDataURL)

LQIP stands for Low Quality Image Placeholder: a version of the image itself shrunk to about 16 pixels and base64-encoded as a data URI. It's exactly what the blurDataURL prop of the Next.js Image component expects when you use placeholder="blur".

The generator creates a 16 px WebP at medium quality, which usually weighs 100 to 250 bytes. If your browser can't export WebP from canvas (Safari), it uses JPEG, or PNG when the image has transparency. When displayed, a CSS blur (filter: blur(20px)) hides the pixels.

Pros: no JavaScript needed to decode, works in any <img> or CSS background, and Next.js supports it out of the box. Cons: slightly heavier than a hash.

BlurHash

BlurHash encodes the image as a sum of color waves (discrete cosine transform components) in a string of about 20-30 characters, such as LKO2:N%2Tw=w]~RBVZRi};RPxuwH. To display it, JavaScript decodes it into a <canvas>, which libraries like react-blurhash or blurhash do on web, iOS and Android.

The number of components controls the detail: 4×3 (the default) captures the main color masses of a landscape photo. For portrait images try 3×4, and for very detailed photos go up to 6×5, keeping in mind that the hash grows with each component.

Pros: very short string, ideal for storing in a database or sending through an API, with libraries for almost every platform. Cons: needs JavaScript and doesn't keep the aspect ratio, which you must store separately.

ThumbHash

ThumbHash is a newer alternative to BlurHash created by Evan Wallace (co-founder of Figma). In about 25-35 bytes (roughly 30-45 base64 characters) it encodes more detail than BlurHash, the approximate aspect ratio and the alpha channel, so it works with transparent PNGs. The thumbHashToDataURL function turns it straight into an image you can use as a background.

Pros: better colors and contrast, transparency and aspect ratio included. Cons: less widespread than BlurHash outside the web.

Dominant color

The lightest possible placeholder: a single hex color, like #3a5f7d, applied as the container's background-color. The generator groups pixels into color buckets and returns the most frequent one, which usually matches perception better than the arithmetic average.

It's the technique Pinterest and Google Images use: zero extra bytes in requests, zero JavaScript, and the grid looks tidy while loading.

CSS gradient

A linear-gradient with the average color of the top half and of the bottom half of the image. It takes about 60 characters, needs no JavaScript and conveys the "sky on top, ground below" feel of many photos better than a flat color.

Which one to choose for your project

Rule of thumb: if the placeholder goes in the initial HTML, use something that doesn't need JavaScript (LQIP, color or gradient). If it travels in data consumed by a client (JSON, GraphQL), a short hash is more convenient.

Common mistakes

• Forgetting width and height. A placeholder without dimensions doesn't reserve space, so content still jumps. Copy the dimensions shown by the generator.
• Using an LQIP that's too big. Above 32 px the data URI easily exceeds 1 KB per image, and with 30 images on a page you're bloating the HTML by 30 KB of render-blocking bytes.
• Adding a placeholder to the LCP image and lazy-loading it. A placeholder doesn't replace loading the main image early: use fetchpriority="high" on it. We explain why in the lazy loading and fetchpriority guide.
• Computing placeholders on every request. Generate them once when the image is uploaded and store them; recomputing them on the server on every visit wastes CPU.

Frequently asked questions

Are my images uploaded to a server?

No. Everything is computed in your browser with canvas and JavaScript. Images never leave your device and are discarded when you close the page.

What's the difference between BlurHash and ThumbHash?

Both encode a very blurry version of the image in a few bytes. ThumbHash keeps colors better, stores the aspect ratio and supports transparency; BlurHash is more widespread and has libraries for more platforms.

How do I use blurDataURL with remote images in Next.js?

Store the blurDataURL next to the image URL (in your CMS or database) and pass it to the Image component with placeholder="blur". Next.js only generates it automatically for statically imported images.

How big is each placeholder?

The 16 px LQIP is usually 100 to 250 bytes, a 4×3 BlurHash about 28 characters, a ThumbHash about 30-45 characters and the dominant color 7 characters.

Can I generate placeholders for hundreds of images?

Yes. Drop them all at once and download the JSON with each file's data, indexed by file name, to import into your project.

Does it work with SVG, GIF or AVIF?

Yes, with any format your browser can display. For animated GIFs the first frame is used.