You’ve seen it on Medium and Pinterest. A soft, blurry preview appears first, then the full image fades in a moment later. That’s blur image loading, and it makes pages feel faster without actually changing download speeds.
The trick works because our brains hate blank space. A blurred placeholder tells users that content is on the way, which feels way better than staring at an empty rectangle. Cloudinary generates those placeholders automatically, so we can skip the manual work.
Key Takeaways:
- Blurred placeholders fill empty image slots with lightweight previews, making pages feel faster while content loads
- We can implement the effect with CSS filters for the blur and JavaScript for the swap logic
- Pairing blur placeholders with lazy loading cuts initial page weight while keeping layouts visually complete
In this article:
- Why Blurred Placeholders Improve Loading Experience
- How Blur Image Loading Works
- Using CSS to Create Blur Image Loading Effects
- Implementing Blur Image Loading With JavaScript
- Blur Image Loading With Lazy Loading Techniques
- Delivering Blurred Placeholders With Cloudinary
- Automating Blur Image Loading Pipelines With Cloudinary
- Applying Blur Image Loading in Real Interfaces
Why Blurred Placeholders Improve Loading Experience
When images take a couple of seconds to arrive, users stare at empty white rectangles. That space makes the whole page feel broken, even if the server responded in 200 milliseconds.
A blurred placeholder changes that reaction. The user sees color and shape right away, which is enough context for their brain to register that the page is loading normally. That tiny bit of visual information makes a surprising difference.
Perceived Performance vs. Actual Load Time
Actual load time is what Lighthouse measures. Perceived performance is what the user feels. These two numbers don’t always line up.
A page that loads in 3 seconds but reveals content progressively feels faster than a page that loads in 2.5 seconds but stays blank until everything arrives at once. Blur image loading targets that perception gap directly.
Reducing Layout Shift
Empty image slots cause Cumulative Layout Shift (CLS) problems. When images finally arrive, they push surrounding content around and users lose their place on the page.
A blurred placeholder occupies the exact same dimensions as the final image, so the layout stays locked in place. This improves Core Web Vitals scores and keeps the reading experience smooth.
How Blur Image Loading Works
The concept is simple. We load a tiny, low-quality version of the image first. That small image gets scaled up and blurred to fill the same space as the final version.
Once the full-resolution image finishes downloading, we swap it in with a smooth fade transition. The user sees the page load progressively, rather than waiting for everything to load at once.
The Placeholder Image
The placeholder is usually very small, somewhere around 20 to 40 pixels wide. At that size, the file weighs a few hundred bytes. We can inline it as a base64 data URI right in our HTML, which means it renders with the initial document and doesn’t need a separate network request.
Because the image is so tiny, it looks blocky when scaled up. The blur filter smooths those jagged pixels into a soft, ambient preview that still communicates the general color palette of the original photo.
The Swap Behavior
Once the full image loads (whether through a standard img tag or a JavaScript Image object), we replace the placeholder. A CSS opacity transition creates a smooth crossfade between the two states. The whole swap usually takes 300 to 500 milliseconds, just enough to feel intentional.
Timing the Transition
The cleanest implementations stack the placeholder and full image on top of each other using absolute positioning. The full image loads behind the blurred version, and when it’s ready, we fade the blur layer out. This avoids any flash of empty space between the two states.
When we pair this with lazy loading, the timing shifts a bit. The placeholder stays visible until the user scrolls near the image, at which point the full download starts and the swap kicks in.
Using CSS to Create Blur Image Loading Effects
For simple use cases, CSS alone handles blurred image loading just fine. The filter property gives us a Gaussian blur, and the transition property animates the change when we remove it.
Basic CSS Filter Approach
We start with a blur filter on the image element, then remove it once the image finishes loading. The CSS looks like this:
img.placeholder {
filter: blur(20px);
transition: filter 0.5s ease-out;
}
img.loaded {
filter: blur(0);
}
When the image’s onload event fires, we toggle the class from “placeholder” to “loaded.” The browser handles the smooth animation between the blurred and sharp states automatically.
Upscaling a Tiny Thumbnail
If our placeholder is a small image (something like a 30px-wide thumbnail), we set it as the initial src. Then we apply object-fit: cover and width: 100% to stretch it into the full container, and layer the blur filter on top.
This CSS-only approach works when we control the markup and don’t need complex loading logic. It falls short once we need to coordinate lazy loading or handle dynamic content with many images in different loading states.
When CSS-Only Makes Sense
The CSS approach works best for static pages where we know every image ahead of time. It’s also a good fit for hero sections and small galleries.
But once we’re dealing with infinite scroll or dynamically loaded content, we’ll want JavaScript handling the swap logic. CSS can’t track loading states across dozens of images on its own.
Implementing Blur Image Loading With JavaScript
JavaScript gives us more control over the loading sequence. We can preload the full image off-screen and trigger the swap the moment it’s ready.
Preloading With the Image Constructor
The standard pattern uses JavaScript’s Image constructor to download the full-resolution image off-screen. Once the onload event fires, we know the browser has cached the image and it’s ready for display. Here’s how that looks:
const fullImage = new Image();
fullImage.src = 'https://example.com/photo-full.jpg';
fullImage.onload = () => {
const placeholder = document.querySelector('.placeholder');
placeholder.src = fullImage.src;
placeholder.classList.add('loaded');
};
The placeholder stays visible the entire time. There’s no flash of a half-loaded image because the swap only happens after the browser confirms the download is fully complete.
Handling Multiple Images
On a page with lots of images, we need to track which placeholders have swapped and which are still waiting. A clean approach is to store the full-resolution URL in a data attribute, then loop through all images on page load:
document.querySelectorAll('img[data-full-src]').forEach(img => {
const full = new Image();
full.src = img.dataset.fullSrc;
full.onload = () => {
img.src = full.src;
img.classList.add('loaded');
};
});
Each image loads independently. On fast connections, most swaps happen almost simultaneously. On slower connections, the images reveal in a staggered fashion, which actually looks natural.
Dealing With Load Failures
Images fail sometimes. A broken URL or a server timeout can leave a blurred placeholder stuck on screen permanently. We should always add an onerror handler that either retries the load or swaps in a fallback image.
A permanently blurred placeholder with no explanation is worse than showing a generic fallback. Adding in a recovery path ensures users always see something useful.
Blur Image Loading With Lazy Loading Techniques
Blur placeholders and lazy loading are natural partners. Lazy loading defers image downloads until they’re needed (usually when they enter the viewport). The blur placeholder fills that deferred space with something meaningful instead of leaving it empty.
Native Lazy Loading With loading=”lazy”
Modern browsers support the loading="lazy" attribute on img tags. When we use it, the browser delays loading the image until the user scrolls near it. Combining this with a blurred placeholder as the initial src gives us a page that renders fast with blur previews already in place:
<img src="placeholder-small.jpg" data-full-src="photo-full.jpg" loading="lazy" class="placeholder" />
One thing to watch: native lazy loading doesn’t fire a clean JavaScript event when it swaps the image. We’ll need an IntersectionObserver or a load event listener to detect when the full image arrives and trigger the sharpening transition.
Using IntersectionObserver for Precise Control
IntersectionObserver lets us define exactly when lazy loading starts. We watch each image element, and when it crosses a threshold (such as 200px below the viewport), we kick off the full image download:
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
const full = new Image();
full.src = img.dataset.fullSrc;
full.onload = () => {
img.src = full.src;
img.classList.add('loaded');
};
observer.unobserve(img);
}
});
}, { rootMargin: '200px' });
document.querySelectorAll('img[data-full-src]').forEach(img => {
observer.observe(img);
});
This is the most reliable approach for production. We control the trigger distance and the transition timing, and the observer tells us exactly when to start the swap.
Why the Combination Works
Lazy loading alone reduces initial page weight by skipping off-screen images. Blur placeholders alone improves perceived speed by filling empty space. Together, we get both benefits at once.
Users scroll through a progressively revealing experience instead of watching images pop in from nothing. It feels polished, and the technical lift to build it is surprisingly small.
Delivering Blurred Placeholders With Cloudinary
Generating blur placeholders by hand gets old fast. For every image in our library, we’d need to create a tiny, low-quality version and host it alongside the original. Cloudinary skips that entire step.
Generating Placeholders With URL Parameters
Cloudinary lets us create a blurred, low-quality placeholder by adding transformation parameters to the delivery URL. This URL requests a 30-pixel-wide version with heavy quality reduction and a blur effect:
https://res.cloudinary.com/your-cloud/image/upload/w_30,q_auto:low,e_blur:1000/sample.jpg
That returns a tiny, blurred image weighing a few hundred bytes. We use this URL as our placeholder src, and the standard Cloudinary URL (without those placeholder parameters) as our full-resolution source. Same uploaded file, zero extra work.
Inlining Placeholders as Base64
For the fastest possible render, we can fetch the placeholder at build time and inline it as a base64 data URI in our HTML. Since the placeholder is typically under 1 KB, the base64 string adds almost nothing to the document size.
This approach works especially well for static site generators and server-rendered pages. We compute the base64 string during the build step and embed it directly in the markup. Users see the blurred preview before any images start downloading.
Consistency Across Our Whole Library
Cloudinary generates a placeholder for every image in our library using the same transformation parameters. We don’t manage a separate folder of placeholder files.
If you want to change the blur intensity or quality level, we update the URL parameters in one place. Every placeholder across the app reflects the change on the next request.
Automating Blur Image Loading Pipelines With Cloudinary
Once you’ve settled on a placeholder transformation, the next step is wiring it into our delivery pipeline so every image on the site gets the blur loading treatment automatically.
Two URLs, One Asset
This is the core pattern. For any image in our Cloudinary account, we construct two URLs from the same uploaded file.
One URL includes placeholder transformations (such as small width and blur effect). The other includes standard delivery transformations (such as appropriate width with f_auto and q_auto):
// Placeholder URL https://res.cloudinary.com/your-cloud/image/upload/w_30,q_auto:low,e_blur:1000/photo.jpg // Full image URL https://res.cloudinary.com/your-cloud/image/upload/w_800,f_auto,q_auto/photo.jpg
Our frontend loads the placeholder URL first, then swaps to the full URL using the JavaScript techniques from earlier. Both URLs reference the same asset, so there’s nothing extra to upload or manage.
Cleaning Up URLs With Named Transformations
If we’re building placeholder URLs in multiple places across the codebase, the parameter strings get repetitive. Named transformations fix this. We define a transformation in our Cloudinary settings (something like blur_placeholder), then reference it by name:
https://res.cloudinary.com/your-cloud/image/upload/t_blur_placeholder/photo.jpg
If we ever want to tweak the placeholder style (say, adjusting blur radius or image width), we update the named transformation once. Every URL that references it picks up the change automatically.
Cutting Out Manual Image Processing
Without Cloudinary, building a blur loading pipeline means running a processing script for every upload and storing two versions of every file. That’s a lot of infrastructure for a loading effect.
Cloudinary reduces the whole thing to URL construction. No processing scripts, and no duplicate files in storage. We just build the right URL at render time, and Cloudinary generates and caches the result.
Applying Blur Image Loading in Real Interfaces
Blur image loading works almost anywhere images appear. But certain interface patterns benefit more than others.
Image Galleries and Grids
Galleries load many images at once. Without placeholders, the grid looks like a broken checkerboard while images trickle in. With blur placeholders, every cell shows a soft color preview that sharpens as the actual image arrives.
The grid feels visually complete from the first render. Users see a polished layout instead of watching empty boxes fill in one at a time.
Content Feeds and Infinite Scroll
Social feeds and e-commerce product grids load new batches of content as the user scrolls. Each new batch benefits from blur placeholders because users see structured, meaningful content right away instead of watching empty cards appear.
Combined with IntersectionObserver based lazy loading, this pattern keeps scroll performance tight while maintaining a premium feel.
Hero Images and Above-the-Fold Content
Hero images are usually the largest assets on a page, and they’re visible immediately. A blur placeholder prevents that awkward gap where the top of the page sits empty while a large image downloads.
For hero images, we can inline the base64 placeholder directly in the HTML for the fastest possible render. Then we load the full hero image with high priority so the swap happens quickly.
E-Commerce Product Pages
Product pages often show a main image alongside a thumbnail gallery. Shoppers expect to see the product fast.
A blurred preview that sharpens into a crisp product photo feels professional. It keeps the shopper engaged while other gallery images load in the background, and that extra polish makes the browsing experience feel more intentional.
Make Image Loading Feel Faster
Blur image loading is a lightweight technique with an outsized impact on user experience. It doesn’t reduce actual download times, but it fills the visual gap that makes pages feel slow. A soft, blurred preview is vastly better than a blank white rectangle.
Cloudinary makes the implementation painless. We upload our images once and generate placeholder URLs through transformation parameters. Cloudinary delivers the full-resolution versions through the same CDN.
If you want image-heavy pages to feel faster, sign up for a free Cloudinary account and start building blur loading into your delivery pipeline.
Frequently Asked Questions
Does blur image loading affect SEO?
It helps. Search engines evaluate Core Web Vitals as a ranking signal, and blur placeholders directly improve Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS).
The placeholder holds the image’s dimensions in the layout, which prevents content from jumping around as images arrive. And because the final image still loads normally, search engine crawlers index the real image without issues.
How small should a blur placeholder image be?
Most implementations use placeholders between 20 and 40 pixels wide. At that size, the file is typically under 1 KB, which is small enough to inline as base64 in HTML without meaningfully increasing document size.
Going below 20px doesn’t save much additional weight, and the visual quality of the blur starts to break down. Going above 40px adds bytes without much visual payoff since the image gets blurred anyway.
Can I use blur image loading with responsive images?
Yes. The blur placeholder approach works alongside srcset and the picture element. We use the placeholder as the default src and let the browser load the appropriate responsive variant based on viewport size.
