OneTaskBy Tim King · Updated
Blur-Up Image Placeholder
Tiny Base64 LQIP with HTML, CSS and JS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Blur-Up Image Placeholder works
A blur-up image placeholder shows a soft, blurred version of a photo instantly while the real file downloads, then fades the sharp image in over it. Drop an image to make the tiny base64 placeholder and get the HTML, CSS and JavaScript that run the effect.
The technique is often called LQIP, short for low quality image placeholder. The placeholder is the same photo scaled down to about 20 pixels wide and saved as a heavily compressed WebP or JPEG, which comes to a few hundred bytes. Encoded as a data URI it lives inside the HTML, so it appears with the first paint and the page never shows an empty grey box.
How the blur-up image placeholder code works
The wrapper div carries the tiny image as its background, and a ::before layer blurs it and
scales it slightly so the soft edges do not show. The real <img> sits on top at zero opacity with
loading="lazy", and a few lines of JavaScript add an is-loaded class when it finishes, which
fades it in. The width and height attributes reserve the right space, so nothing jumps.
Accessibility and fallbacks
Visitors who ask for reduced motion get the sharp image without the fade. If scripting is off, a
scripting: none media query shows the image straight away. Add real alt text to the <img>
before you publish; the placeholder is decorative and needs none.
FAQ
How small should the placeholder be?
Between 16 and 32 pixels wide is the usual range. Smaller gives a vaguer blur and a shorter data URI; larger keeps more shape but grows quickly. Around 20 pixels at quality 50 usually lands under 1 kB, which is small enough to inline for every image on a page.
Is blur-up better than a solid colour placeholder?
It gives a better sense of the photo, which makes loading feel faster, but it adds a few hundred bytes per image to the HTML. For a long product grid a dominant colour is lighter; for hero images and article photos the blur-up usually looks noticeably better.
Does the image get uploaded anywhere?
No. The image is decoded and resized on a canvas in your browser, and the placeholder and snippet are generated there too. Nothing is sent to a server, so it is safe to use with unreleased product shots or client work.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Image Placeholder Generator
Make sized placeholder images as SVG, PNG, data URI or CSS.
Image To Data URI
Base64-encode an image as a data URI for CSS or HTML.
Responsive Image Generator
Generate srcset, sizes and picture markup for responsive images.
Image To WebP
Convert to WebP, JPEG or PNG with a quality slider.
Image Compare
Spot differences between two images and get a similarity score.