LQIP Placeholder Generator
Generate a tiny blurred placeholder as an inline data URI or a dominant-colour block, so an image area has something in it before the real file arrives.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
The gap before an image arrives
Between a page rendering and its images loading there is a period, sometimes several seconds on a slow connection, where the image area is empty. Filling it with something representing the eventual image makes the page feel substantially faster even though nothing loads sooner, because the layout is complete and the reader can see what is coming. This is the whole idea behind a low quality image placeholder.
It must be small enough to inline
A placeholder fetched as a separate file defeats the purpose, since it costs another request that competes with the real image. The placeholder therefore has to be embedded in the HTML or CSS as a data URI, which means it must be tiny: a few hundred bytes at most, or it adds more to the initial document than it saves. A 20 pixel wide JPEG blurred up with CSS achieves this comfortably.
Reserve the space regardless
A placeholder is a refinement on top of the thing that actually matters, which is reserving the correct space so the page does not shift when the image arrives. Width and height attributes, or an aspect-ratio declaration, do that on their own and cost nothing. A placeholder without reserved space still causes the layout to jump, and reserved space without a placeholder is already most of the benefit.
Related tools
- EXIF Viewer — Extract hidden EXIF data (Camera, GPS, Settings) from images.
- Favicon Generator — Generate favicons and app icons at every required size from one source image, with the exact HTML to reference them.
- Placeholder Image Generator — Generate placeholder images at any size with custom colours and label text. Produced in your browser as downloadable files, no external hotlinking.
- Image Resizer — Resize images in your browser with aspect ratio control and format conversion. Files are processed locally and never uploaded.
Frequently Asked Questions
How small should a placeholder be?
A few hundred bytes. It is inlined into the HTML or CSS, so every byte is added to the initial document. Above about a kilobyte it costs more than it saves.
Why not load a small image file instead?
Because a separate file costs another request that competes with the real image for bandwidth and connections. Inlining as a data URI is what makes the placeholder free in request terms.
Does this replace width and height attributes?
No. Reserving the correct space is what prevents layout shift, and it is more important than the placeholder. A placeholder without reserved space still lets the page jump when the real image loads.
What is the dominant colour option for?
A single colour block, which is a few dozen bytes rather than a few hundred and works well for photographs without a strong subject. It is the cheapest possible placeholder and still removes the empty gap.
Should I use this on every image?
On images above the fold and on anything large enough that the gap is noticeable. Small images below the fold load before anyone scrolls to them, so a placeholder adds bytes for no benefit.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Upload an image to generate a tiny inline placeholder for it.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
EXIF Viewer
ImageExtract hidden EXIF data (Camera, GPS, Settings) from images.
Favicon Generator
ImageGenerate favicons and app icons at every required size from one source image, with the exact HTML to reference them.
Placeholder Image Generator
ImageGenerate placeholder images at any size with custom colours and label text. Produced in your browser as downloadable files, no external hotlinking.