Image Size Comparison
Compare formats and quality settings side by side.
Blurhash Generator
Make a tiny blurred placeholder to show while an image loads.
Drop an image here, or click to choose one
JPEG, PNG, WebP, GIF or SVG · processed on your device, never uploaded
Quick Tool Overview
The Blurhash Generator reduces an image to a handful of pixels and encodes it as a data URI a few hundred bytes long — small enough to inline in the HTML, so the blurred preview appears with the page rather than after a request. The dominant colour is offered too, as the even cheaper option.
- What it does
- Creates a tiny blurred loading placeholder
- You give it
- An image
- You get back
- A data URI placeholder and the CSS
- Best for
- Perceived loading speed on image-heavy pages
About the Blurhash Generator
A grey box while an image loads tells the reader nothing. A tiny blurred version of the actual image tells them what is coming, and because it can be embedded directly in the HTML it appears instantly, before any request.
That is what this produces. The image is reduced to a handful of pixels, encoded as a data URI and scaled back up with a CSS blur — the whole placeholder is a few hundred bytes, small enough to inline without a second thought. The dominant colour is given too, which is the even cheaper option, along with the CSS and the markup to swap the real image in once it has loaded.
Key features of the Blurhash Generator
A few hundred bytes
Small enough to inline in the HTML, which means it renders before any image request is made.
No decoder needed
Unlike BlurHash proper, this is a tiny image plus a CSS blur — nothing to install and nothing to run.
Dominant colour too
The cheapest possible placeholder, for images where a full blur is more than the case warrants.
Swap markup included
The CSS and markup that replaces the placeholder once the real image has loaded.
Adjustable detail
More pixels gives a closer preview at a slightly larger string, with both shown as you drag.
How to use the Blurhash Generator
-
1
Add the image
Any photo that will be loaded on a page.
-
2
Set the placeholder detail
More pixels means a closer preview and a slightly larger string.
-
3
Compare the options
A blurred LQIP, or just the dominant colour — both are shown.
-
4
Copy the markup
The placeholder plus the CSS that swaps the real image in.
Frequently asked questions
A few hundred bytes as a data URI — small enough to inline in the HTML, which means it appears with the page rather than after a request.
The same idea, a different encoding. BlurHash uses a compact custom string that needs a decoder; this uses a tiny image as a data URI, which needs nothing but CSS.
The blur when the image is the point — a hero or a photograph. The dominant colour when it is small or incidental, since it costs almost nothing.
It helps how loading feels, and combined with explicit dimensions it prevents layout shift. It does not make the real image arrive sooner.
Reviews of the Blurhash Generator
What people who use the Blurhash Generator think of it. Reviews come from visitors and are posted as written.
No ratings yet
Yours would be the first.
- 5 0 reviews rated 5 stars
- 4 0 reviews rated 4 stars
- 3 0 reviews rated 3 stars
- 2 0 reviews rated 2 stars
- 1 0 reviews rated 1 star
0 reviews
Newest first
No reviews yet
Be the first to rate the Blurhash Generator. It takes half a minute and no account.
Write the first reviewMore image tools
PNG to JPG Converter
Turn PNG files into smaller JPEGs with a quality you choose.
Image to Text OCR
Extract text from a screenshot, scan or photograph.
Base64 to Image Converter
Turn a Base64 string or data URI back into an image file.
Twitter Header Maker
Build a 1500 by 500 header that survives the crop.
Rounded Corner Image
Round the corners of an image with real transparency.
Passport Photo Maker
Crop an ID photo to any country size and lay out a print sheet.
Photo to Sketch
Turn a photograph into a pencil sketch.