Placeholder generator
Create a tiny blurred placeholder string for lazy loading.
How to use Placeholder generator
- Drop an image onto the upload area.
- Adjust the X and Y component sliders. More components keep more detail but make the hash longer.
- Compare the decoded placeholder preview with your original image.
- Click Copy to copy the BlurHash string into your code.
A BlurHash is a compact string — usually 20 to 30 characters — that encodes a rough, blurred approximation of an image. Store it alongside the image's URL, and any page using it can render that blur immediately while the real image is still loading, instead of a blank box or a generic spinner.
This uses the actual BlurHash reference implementation, so the string it produces decodes identically wherever BlurHash is already supported — Next.js image components, various UI kits, mobile apps.
The two sliders control how much detail is retained in each direction — more detail means a longer string and a closer (but still blurry) approximation, not a sharp image. The preview shows exactly what decoding the hash back produces.
Questions
What do I do with the string once I have it?
Store it next to the image's URL in your data (a database column, a CMS field, frontmatter, etc.), then decode it client-side with a BlurHash library to render the placeholder before the real image has loaded.
How much detail should I use?
The common default (4 horizontal, 3 vertical) is a good balance for most photos — enough to suggest the image's colours and rough composition without an unnecessarily long string. Push it higher only if the blur is visibly too crude for your use case.
Is a BlurHash the same as a low-res thumbnail?
No — it's not an image file at all, just a short text string that gets mathematically decoded back into a blurred approximation on the fly. That's what makes it small enough to store as plain text rather than a separate file.
Is my image uploaded anywhere?
No. It's sampled and encoded entirely in your browser — the file never leaves your device.