devpack
EnglishDeutsch · StartseiteFrançais · AccueilEspañol · InicioPortuguês (Brasil) · Início
Site Audit

BlurHash & LQIP Generator — Blurred Image Placeholders

Make images feel instant: show a blurred preview while the real image loads. Drop in a photo and get a compact BlurHash string (about 20–30 characters), a tiny base64 LQIP (low-quality image placeholder), and the image’s dominant color — with copy-ready code for plain HTML/CSS, Next.js placeholder="blur" and React.

Runs in your browserUpdated

Choose a photo or drag & drop it here

JPEG, PNG, WebP, GIF, AVIF or SVG · or paste with Ctrl+V · processed in your browser

Your data never leaves your computer. All processing happens 100% locally in your browser.

How to use the BlurHash & LQIP Generator

  1. Choose a photo (or try the sample). Everything runs in your browser.
  2. Adjust the BlurHash detail: 4 × 3 suits most landscape photos; more components keep more shapes but make the string longer.
  3. Pick the LQIP width and format — 16 px WebP is usually under 1 KB.
  4. Copy the BlurHash string, the data URI or ready code for HTML/CSS, Next.js or React.

Three kinds of placeholder

PlaceholderSizeBest for
Dominant color7 charactersGrids of thumbnails; the simplest option
BlurHash20–30 charactersStoring in a database or API response next to the image URL; decoded to pixels in the app
LQIP (base64 image)Under 1 KBInlining in HTML or CSS, Next.js blurDataURL; works without JavaScript

How BlurHash works

BlurHash describes an image with a few cosine waves — like a very low-resolution JPEG. The image is converted to linear light, multiplied by cosine patterns in each direction, and the resulting factors are quantized and written with an 83-character alphabet. Decoding draws the same waves back, giving a smooth blur with the image’s colors and rough layout. Decode it at around 32 × 32 pixels and stretch it with CSS — it is meant to be blurry.

Always set width and height (or aspect-ratio) on the image so the placeholder reserves its space and nothing jumps when the photo arrives. Compress the full image too, with the Image Compressor.

Also searched as: blurhash generator, lqip generator, image placeholder generator, blur placeholder, nextjs blurdataurl, blurhash online, low quality image placeholder, progressive image loading.

Tools that pair well with the BlurHash & LQIP Generator

  • Image Resizer — Resize a photo to exact pixel dimensions or a percentage, crop it to fill a social-media size, or fit it inside a frame with a background color — all locally in your browser.
  • Image Converter — Convert any image your browser can open — PNG, JPG, WebP, AVIF, GIF, BMP or SVG — into PNG, JPG, WebP or AVIF, one file or hundreds at a time.
  • Page Speed Test — Run Google Lighthouse on any URL for mobile or desktop.
  • Image Color Palette Extractor — Find the color palette of any image — a photo, logo, screenshot or design.

Frequently asked questions

What is an LQIP?
A low-quality image placeholder: a tiny, heavily compressed version of the image (about 16 px wide) embedded as a data URI and shown blurred until the full image loads.
How do I use the blur placeholder in Next.js?
Pass placeholder="blur" and blurDataURL with the data URI to next/image — choose the Next.js code here. For local imports Next generates it automatically; you need it for remote images.
BlurHash or LQIP?
BlurHash is a short text string, ideal to store in a database and decode in an app. An LQIP is a real tiny image you can inline in HTML and CSS without any JavaScript.
Is my photo uploaded?
No. The placeholders are computed in your browser with a canvas.
Can I install BlurHash & LQIP Generator as a web app and use it offline?
Yes. BlurHash & LQIP Generator is an installable web app (PWA) — installed from your browser, not downloaded from an app store. Click Install app at the top of this page in Chrome or Edge (Windows, macOS, Linux, ChromeOS) or on Android, use Share → Add to Home Screen on iPhone and iPad, or File → Add to Dock in Safari 17+ on a Mac. It then opens in its own window with its own icon, and because it runs entirely in your browser it keeps working offline. Firefox on desktop can’t install web apps. How installing works.

Related tools

localImage CompressorShrink photos and graphics by 50–90% without visible quality loss. Batch-compress, convert to WebP or…localImage ResizerResize a photo to exact pixel dimensions or a percentage, crop it to fill a social-media size, or fit it…localImage to Base64Turn a PNG, JPEG, SVG, WebP or GIF into a Base64 data URI with copy-ready CSS and HTML — or paste a Base64…localImage ConverterConvert any image your browser can open — PNG, JPG, WebP, AVIF, GIF, BMP or SVG — into PNG, JPG, WebP or…apiPage Speed TestRun Google Lighthouse on any URL for mobile or desktop. See performance, accessibility, best-practices and…localImage Color Palette ExtractorFind the color palette of any image — a photo, logo, screenshot or design. Drop it in to get its main…