Make blurred image placeholders (LQIP)

A blank space while a photo loads looks broken. Show a blurred preview instead: a tiny inline image of a few hundred bytes, a BlurHash code for apps, or simply the image’s average colour, each with the HTML to use it.

Drop an image hereAdd an image

JPG, PNG, WebP, GIF or AVIF, up to 80 MB. You can also paste an image.

Made on your device. Your image is never uploaded.

How it works

  1. Your browser decodes the image and makes small copies of it.
  2. The tiny image is saved as an 8 to 32-pixel-wide WebP, JPG or PNG and written as a data URI; the browser’s smooth scaling blurs it.
  3. BlurHash describes the image with a few smooth colour waves, encoded as a short string; the average colour is one value for the whole image.

Supported formats

Opens
JPG, PNG, WebP, AVIF, BMP and GIF (the first frame of an animation)
Saves
Text to copy: HTML with an inline placeholder, a BlurHash string, or a colour
Limits
Files up to 80 MB.
  • BlurHash is an open format by Wolt; decoders exist for JavaScript, Swift, Kotlin and more. It’s measured on a 64-pixel copy of your image, as the format intends.
  • The average colour is worked out in linear light, so it matches how the blurred image looks.

Your image stays on your device

This tool runs entirely in your browser. The image is never uploaded, so there is nothing for us to store, see or delete.

To check, open your browser’s developer tools, switch to the Network tab and use the tool: you will not see your image being sent anywhere.

Questions

Are my images uploaded anywhere?

No. The image is read and processed by your own browser. Nothing is sent to our servers, so there is no copy of your image anywhere but your own device.

Which placeholder should I use?

For a website, the tiny image is easiest: it’s plain HTML and CSS, with no script. BlurHash suits apps and JavaScript frameworks that already decode it. The average colour is the lightest of all.

Does a placeholder make the page slower?

A few hundred bytes per image is very little, and the page feels faster because the layout appears at once. Use the width and height attributes too, so nothing jumps when the real image arrives.