Why it matters
A placeholder fills an image's space while it loads, so the page doesn't look broken and the layout doesn't jump. The options range from a flat colour to a tiny blurred version of the image. BlurHash and ThumbHash pack a soft impression of the picture into 20 to 30 characters, but need a few lines of JavaScript to draw. A tiny data URI needs no script but costs a few hundred bytes per image in your HTML or CSS.
This generator makes all four from your image, using the reference BlurHash and ThumbHash encoders, so the strings will decode the same in any library. Each preview is drawn from the placeholder itself, which shows what visitors will actually see. The table gives the byte cost of each and whether it needs JavaScript, and the CSS block is ready to use for the colour and data URI options.
How to use it
- Drop an image, or use the sample.
- Adjust BlurHash detail and the tiny image width.
- Compare the previews and the byte counts.
- Copy the string or CSS you want.
FAQ
BlurHash or ThumbHash?
ThumbHash keeps more detail and colour for its size, handles transparency and stores the aspect ratio. BlurHash has more libraries and server tools. Both need a small decoder in the browser.
Is a dominant colour enough?
Often, yes. It costs nothing beyond the CSS, needs no script and still stops the flash of an empty box.
How big should a tiny image be?
16 px wide is a good balance: a few hundred bytes and enough shape to read once it's blurred. Go to 8 px to save bytes, or 32 px for more detail.
Is my image uploaded?
No. Everything is computed in your browser.
Credits and licences
Uses BlurHash (MIT, Wolt) and ThumbHash (MIT, Evan Wallace). Sample photo: Malham limestone pavement by Paul Morris, CC0, via Wikimedia Commons.
.jpg){kind=link}