Image Placeholder Generator
Turn any image into a lazy-load placeholder: a BlurHash string, a tiny base64 LQIP, and the average color. Drop an image and copy the code. Free, no signup, runs in your browser.
Drop an image to make a placeholder
Get a BlurHash, a tiny base64 LQIP, and the average color.
100% in-browser. Your image never leaves your device.
How to generate an image placeholder
Upload Your Image
Drag in or choose the image you want a placeholder for. It is read on your device, not uploaded.
Pick The Detail
Adjust the detail sliders for the BlurHash. 4 by 3 looks good for most photos.
Copy The Output
Copy the BlurHash string, the base64 LQIP, or the average color and drop it into your code.
Smoother Lazy Loading With Real Placeholders
When images load late on a page, an empty gray box or a sudden layout shift looks rough. A placeholder fixes that by showing something in the right shape and colors while the full image downloads. It keeps the layout stable and makes the load feel faster, even when it is not.
This tool gives you three kinds of placeholder from one image. A BlurHash is a short text string that decodes into a soft, blurred version of the photo. A low quality image placeholder, or LQIP, is a tiny base64 version you can inline directly in your HTML or CSS with no extra request. And the average color gives you a single hex value for the simplest solid placeholder of all.
Pick whichever fits your stack. Many image components accept a BlurHash, CSS can use the base64 as a background, and the average color works anywhere. Everything is generated in your browser, so your image is never uploaded.
Why Use Our Image Placeholder Generator?
BlurHash String
Get a short BlurHash that decodes into a soft blurred preview, perfect for a smooth lazy load.
Base64 LQIP
Get a tiny low quality image placeholder as a data URI you can inline with no extra request.
Average Color
Get the average color as a hex code for a clean solid color placeholder or background.
Live Previews
See the original, the BlurHash, the LQIP, and the color side by side before you copy.
Adjustable Detail
Choose how detailed the BlurHash is, trading a longer string for a closer preview.
In Your Browser
Your image is processed on your device. Nothing is uploaded, and there is no signup.
Similar Tools
More Image tools you might find useful.
Frequently Asked Questions
Common questions about image placeholders.
What is a BlurHash?
A BlurHash is a short string, usually around 20 to 30 characters, that encodes a small blurred version of an image. Your app decodes it into a soft preview that shows instantly while the real image loads, then fades out. It is tiny enough to store in a database or send in an API response.
What is an LQIP?
LQIP stands for low quality image placeholder. It is a very small, low resolution copy of the image, exported here as a base64 data URI. Because it is inline, it needs no extra network request and can be shown blurred until the full image arrives.
Which placeholder should I use?
Use a BlurHash if your image component supports it, since it looks the smoothest. Use the base64 LQIP if you want a drop-in CSS background with no setup. Use the average color for the lightest option when a solid color is enough.
How do I use the base64 placeholder in CSS?
Copy the output and set it as a background image on the container, for example background-image with the data URI, sized to cover. Show it until the real image loads, then swap or fade the full image in on top.
Does this tool upload my image?
No. The image is read and processed entirely in your browser. Nothing is uploaded, logged, or stored on a server, and there is no signup required.
Is the image placeholder generator free?
Yes, it is completely free with no limits. Generate placeholders for as many images as you need.