DarnlyBlur placeholders for your images
Drop an image and get a soft, blurred version that’s only a few hundred bytes. It shows while the real image loads, so your page never has empty boxes. Copy it for Next.js, CSS, or as a BlurHash or ThumbHash. It runs in your browser, so nothing is uploaded.
Free from Darnly. Spot a bug in the app you're building? Darnly hands it to Claude Code, Codex or Cursor in one key.Add to Chrome
Copy it into your project
How this works
Blurred image: we shrink your image to a few pixels wide (the “Detail” setting) and save it as WebP or PNG, whichever is smaller. For Next.js that tiny image is the blurDataURL, and Next.js blurs it for you. For CSS we wrap it in a small SVG with a blur filter, so it looks smooth in any browser without extra code.
BlurHash stores the main colors and shapes as a short text string (4×3 parts by default, picked from your image’s shape). It’s encoded with the same maths as Wolt’s reference library. You turn it back into a picture with the blurhash library.
ThumbHash does the same with a smarter color model, so it keeps more detail and the image’s shape, and supports see-through images. It matches Evan Wallace’s reference encoder byte for byte. You turn it back into a picture with the thumbhash library.
Big images are scaled down first, so it stays fast. The sizes shown are for the placeholder text you paste, not the real image.
More free tools
See all 89 toolsHow it works
- Drop in an image, or paste one. Until you do, we show a sample photo so you can see how it works.
- Compare the three kinds of placeholder: a tiny blurred image, a BlurHash and a ThumbHash. Press “Simulate slow load” to watch the blur fade into the real image, the way your visitors on a slow phone will see it.
- Copy the code for your setup: Next.js
<Image>, plain HTML and CSS, or the hash with the library that turns it back into a picture.
Questions
Is my image uploaded anywhere?
No. Everything happens in your browser. Your image never leaves your computer.
What is a blur placeholder for?
Big images take a moment to load. Without a placeholder, visitors see an empty box (or the page jumps when the image arrives). A blur placeholder fills that box at once with a soft version of the picture, so the page feels ready, then the real image fades in on top.
Which one should I use?
Using Next.js? Use the blurred image with placeholder="blur". Anywhere else, the blurred image also works with one line of CSS and needs no library. Pick BlurHash or ThumbHash when you store placeholders in a database (they’re short text) or build a mobile app. ThumbHash keeps more detail and supports see-through images; BlurHash has libraries for almost every language.
Next.js already blurs local images. Do I need this?
Not for images you import from your project: Next.js makes their placeholder at build time. You need a blurDataURL for images that come from a URL, a CMS or a database, because Next.js can’t see those at build time. That’s what this tool gives you.
How big is the placeholder?
Usually a few hundred bytes, small enough to put straight in your HTML. The “Detail” slider makes it sharper or softer. More detail means a few more bytes.
Can my AI coding agent do this for every image?
Yes. Click “Copy prompt for your AI agent” and paste it into Claude Code, Codex or Cursor. It asks the agent to add blur placeholders across your site, using the plaiceholder library for images it can read at build time.