imbuz
Contact All tools

BlurHash & LQIP generator

Design tools

A blurry preview in 30 bytes

Turn an image into a BlurHash, a ThumbHash or a tiny inline LQIP, and get the markup that shows it while the full image loads.

Drop an image or browseJPG, PNG, WebP or AVIF — hashed in your browser, nothing uploaded

About this tool

Placeholders that look like the image

A blank box while an image loads looks broken; a blurred preview of the image looks intentional. BlurHash and ThumbHash encode an image’s overall shapes and colours into a string of about 20–30 characters that a few lines of JavaScript can decode; an LQIP is a tiny, heavily compressed version inlined as a data URI. This generates all three from your image, previews each at full size, shows their weight, and gives you the code to use them.

  • Free, no sign-up
  • Runs in your browser
  • Nothing uploaded

Three techniques

BlurHash (compact, widely supported), ThumbHash (keeps alpha and aspect ratio) and an inline LQIP that needs no JavaScript.

Weight shown

Each placeholder’s size in characters or bytes, next to how it looks.

Copy-ready code

The hash string, the data URI, and HTML/CSS for a blur-up effect.

Step by step

How to make a BlurHash placeholder

  1. Add an image

    Drop the image you want a placeholder for.

  2. Pick the technique

    Adjust BlurHash components or the LQIP size and compare the previews.

  3. Copy the code

    Copy the hash or data URI and the markup into your page.

Get the most out of it

Tips for the best results

  • LQIP needs no JavaScriptAn inline LQIP works with plain CSS — the simplest option for static sites.
  • 4×3 components is enoughMore BlurHash components add characters but rarely help.
  • Store hashes with imagesSave the hash in your CMS or JSON next to the image URL.
  • Keep width and heightReserve the image’s space with width and height so nothing shifts when it loads.

Keep going

More free design tools

See every design tool →
Color Palette ExtractorHEX, HSL, OKLCH, CSS and Tailwind from a photo Contrast CheckerWCAG 2 and APCA, with fixes Font Previewer & PairingTest your font, weights and pairings Font IdentifierSuggest the Google Font in an image AI Image Upscaler2× and 4× AI upscaling in the browser Mockup GeneratorScreenshots in browser and phone frames Placeholder Image GeneratorAny size, colour and label Image CompressorAVIF, WebP, JPEG — measured before you save Image ResizerExact pixels, a percentage, or a preset

Questions

Questions about this tool

Everything here runs in your browser — nothing you add is uploaded. More in the general FAQ.

What is BlurHash?

A compact representation of an image’s blurred appearance as a short string (about 20–30 characters). A small decoder turns it back into a blurred image to show while the real one loads.

BlurHash or ThumbHash?

ThumbHash is newer: it preserves transparency and the image’s aspect ratio and tends to look a little more detailed. BlurHash is more widely supported by libraries and CMSs.

What is an LQIP?

A Low-Quality Image Placeholder: a tiny version of the image (typically 16–32 px wide), inlined as a data URI and scaled up with a CSS blur. It needs no JavaScript.

Do placeholders affect SEO or performance?

They improve perceived performance and, with width and height set, prevent layout shift. They do not replace the real image for SEO.

Is my image uploaded?

No. The hashes and LQIP are computed in your browser.