---
title: "Image Placeholder Generator – LQIP, BlurHash and Colour"
description: "Make loading placeholders from a picture: a tiny blurred LQIP data URI, a BlurHash string and the average colour, plus HTML to use them. Free, no sign-up."
url: "https://imagecompressor.si/image-placeholder-generator"
lang: "en"
---

# Generate image placeholders: LQIP and BlurHash

Get the blurred preview, the BlurHash and the average colour that fill a picture's place while it loads.

## How it works

1. **Add your images** Drag and drop, paste, or pick files. They upload over an encrypted connection.
2. **Pick a quality or a target size** Use the quality slider, or tell it exactly how many KB or MB you need.
3. **Download** Save each file, or grab them all at once as a ZIP.

On a page with large pictures, the text appears first and the pictures arrive a moment later. In between, there are white holes, or worse, the layout jumps as each picture lands. A placeholder fills the space straight away with a soft impression of the picture, so the page looks complete from the first moment and the real picture fades in over it.

This page makes the three common kinds from one upload. The LQIP, low-quality image placeholder, is the picture shrunk to 24 pixels wide and saved as a WebP data URI of a few hundred bytes, small enough to sit in the HTML. The BlurHash is a short text that a script turns into a smooth blur. The average colour is a single hex code for the simplest placeholder of all.

Each comes with a copy button, and the HTML block shows the usual pattern: the LQIP as the img's background, with width and height set. The picture is processed on our server and deleted at once.

## Which placeholder to choose

The average colour costs nothing and suits grids of thumbnails. The LQIP shows the picture's shapes and colours and needs no script, which makes it the easiest to adopt on any site. BlurHash is the smallest for what it shows, but needs a small decoder in the page or app, and is popular in mobile apps and frameworks that already include one.

## Using the LQIP without a script

Put the data URI in the img's background, as the HTML block does, together with background-size cover. The blurred picture shows at once; when the real picture loads, it covers its own background. Add width and height so the space is reserved before anything loads.

## Using a BlurHash

Store the BlurHash next to the picture's address, in your database or content files, and decode it in the page or app with one of the published BlurHash libraries, then swap in the real picture when it has loaded. The default of four by three components suits most pictures.

If your site's framework already supports LQIP or BlurHash, pass it the values from this page.

## Placeholders and page speed

Placeholders do not make the picture itself load faster, but they make the page feel faster and stop layout jumps, which speed measurements count against a page. Combine them with properly sized images: the responsive image generator makes the widths, and this page the placeholder for each.

Placeholders matter most on slow connections and long pages full of pictures, such as galleries, shops and news sites.

## Frequently asked questions

### How big is the LQIP?

Usually two to six hundred bytes as a data URI, depending on the picture.

### Can I change the BlurHash detail?

Through the API: components_x and components_y, from 1 to 9 each.

### Does it work with transparent pictures?

The LQIP keeps transparency; the BlurHash and the average colour treat it as white.

### Is my picture kept?

No. The placeholders are worked out on our server and the upload is wiped once they are sent back.

### Can I make placeholders for many pictures?

For many, use the API in a script: POST /api/v1/placeholder returns all three as JSON.

### Does the LQIP change the picture's file?

No. It is a separate, tiny copy; your picture stays exactly as it was.

## Related tools

- [Generate responsive images and srcset HTML](https://imagecompressor.si/responsive-image-generator): One upload gives you each width in modern formats, and the HTML that lets the browser pick the right one.
- [Convert an image to Base64](https://imagecompressor.si/image-to-base64): Get a data URI, an HTML tag and a CSS line for your image, ready to paste into code or an email template.
- [Optimize every image on a website](https://imagecompressor.si/website-optimizer): Enter an address, a sitemap or a list of pages. Each page is analysed on its own, and you get optimized files in a ZIP with a map of what replaces what.