I'm wondering if it's acceptable to lazy load a hero image by initially displaying a low-resolution, blurred version while the main image loads. Once the main image is fully loaded, it would replace the low-res image with a smooth transition. I've noticed that Facebook uses a similar approach for their images. Is this a good tactic, or does it cause any issues?
5 Answers
Sure, it's fine to use this method, but make sure to cache the image for quicker access later. Try using 'srcset' to serve different image sizes based on the user's device.
I'm not sure if lazy loading actually speeds things up, but it makes sense to load the main image last. I typically don’t lazy load hero images since they should be visible immediately. Using a blurred placeholder while loading could work fine, just make sure it doesn't cause layout shifts when the main image appears.
Oh, and you can look at a site like caputomodellismo.it to see this technique in action!
You might want to check out options like blurha.sh or thumbhash for implementing placeholders. They can help enhance the initial loading experience.
It is okay, but watch out for the side effects. If the placeholder isn't detailed enough to be considered the Largest Contentful Paint (LCP), you could run into issues with Core Web Vitals. This might not matter for companies like Facebook, but it could impact you.
What you're suggesting isn't really lazy loading. Lazy loading is about loading assets only when needed. Since the hero section shows right away when the page loads, it's immediately required. What you're describing goes more along the lines of using a placeholder or a skeleton loader. Using a smaller resolution image first can help avoid layout shifts, which is great for user experience.
Related Questions
Cloudflare Origin SSL Certificate Setup Guide
How To Effectively Monetize A Site With Ads