How to prevent a JPEG UHD (2MB) with progressive loading (blur-up) from affecting the LCP in...

Constraint: The image must be ultra-high quality—the challenge is to handle heavy images (at least 4K resolution and high color fidelity).

Context: I am developing an Angular (v19.2, 2025) desktop application, and I use an ExpressJS server to deliver my images via different URLs based on the resolution. I conducted my tests on an Angular 19 app deployed on Firebase with Brotli compression.

User Experience Improvement: To enhance the perceived loading experience, I implement a progressive image loading (blur-up) as follows:

• 
  Step 1: I initially display a low-quality placeholder image (blurred, around 30KB) that occupies about 80% of the viewport. (I use this image with high priority through NgOptimizedImage.)
  
  
• 
  Step 2: Once the placeholder is shown, I trigger the loading of a high-resolution image (2MB), which later replaces the placeholder using a control variable (with an @if()).
  

Tested Approaches to Delay HD Image Loading (to have the LCP calculated on the placeholder):

• 
  Wait for append the high resolution image to the DOM (@if)
  
  
• 
  A “clean” wait by ensuring the placeholder has finished loading before anything else.
  
  
• 
  A “dirty” wait for testing purposes: using setTimeout and requestIdleCallback to delay the injection of the high-resolution image after the placeholder is loaded.
  
  
• 
  Using an approach with fetch() and URL.createObjectURL(blob) to control the downloading of the high-resolution image.
  
  
• 
  A progressive scaling method that starts with a 1px × 1px image and progressively scales it up to the final resolution.
  
  
• 
  A transition involving changes in visibility and opacity (to slip under Lighthouse’s LCP radar).
  
  
• 
  Using (load) of both images
  
  
• 
  play with lazy load image, priority, fetchPriority, ngSrc, ...etc
  

Problem: Even with these techniques and delaying the display of the high-resolution image (up to a 2-second delay), the LCP (Largest Contentful Paint) is ultimately calculated on the high-resolution image because it is the element that occupies the majority of the viewport when it appears.

Question: Is there a method to have the low-quality placeholder be considered the main content for the LCP calculation, thereby preventing the high-resolution image from impacting the metric? Or is this behavior inevitable due to the very definition of LCP (which measures the largest visible element)?

I am open to suggestions or alternative approaches to optimize the user experience while improving the LCP metric, even with the constraint of having to include a 2MB HD image.

Continue reading...