Blur-Up Image Placeholder Generator
Generate tiny blurred base64 placeholders for progressive image loading. Used by Astro, Next.js, and Gatsby. Everything runs in your browser — your images never leave your device.
What Is Blur-Up Image Loading?
Blur-up (also called LQIP — Low Quality Image Placeholder) is a progressive loading technique where a tiny, heavily blurred version of an image is shown immediately while the full-resolution image loads in the background. Once loaded, the sharp image replaces the placeholder with a smooth transition. This technique is used by frameworks like Next.js, Astro, and Gatsby to dramatically improve perceived page load speed and Core Web Vitals scores.
The placeholder is typically just 20-40 pixels wide and encoded as a base64 data URI, making it small enough to inline directly in your HTML — no extra HTTP request needed. At around 300-800 bytes, it adds negligible weight while giving users instant visual feedback.
How This Generator Works
Upload any image and this tool resizes it to a configurable tiny width (4-64 pixels), exports it as a compressed JPEG base64 string, and generates ready-to-use code snippets. You control the placeholder width, blur amount, and JPEG quality. A smaller width and lower quality produce a smaller data URI, while a larger width preserves more detail in the placeholder. The blur filter hides pixelation artifacts, making even a 20px wide image look like a smooth gradient preview of the original.
Everything runs client-side in your browser using the Canvas API. Your images are never uploaded to any server, making this tool completely private and safe for proprietary assets.
Blur-Up Placeholders for Web Performance
Google's Core Web Vitals penalize layout shifts caused by images loading without defined dimensions. Blur-up placeholders solve this by filling the image space immediately, preventing Cumulative Layout Shift (CLS). They also improve Largest Contentful Paint (LCP) perception — users see content instantly instead of blank space. For e-commerce sites, hero images, and media-heavy pages, blur-up loading can significantly reduce bounce rates and improve user experience.
The base64 data URI can be inlined in HTML, embedded in CSS as a background-image, or passed as a placeholder prop in Next.js Image components. This eliminates an extra network request entirely.
Tips for Optimal Placeholder Quality
For most use cases, a placeholder width of 16-24 pixels with 20-30% JPEG quality produces an ideal balance between file size and visual quality. Increase blur amount to 25-40px if using very small widths (under 10px) to smooth out block artifacts. For hero images where you want more detail in the placeholder, try 32-48px width at 40% quality. Always check the file size comparison — aim for placeholders under 1KB for maximum performance benefit.
For transparent images (PNG), the tool exports as JPEG which removes transparency. If you need transparent placeholders, consider using CSS backdrop-filter or SVG-based approaches instead.