Next/Image: Animate Transition from blur placeholder to image

[conanbatt]

Currently whenever you use the blur placeholder to improve LCP, the transition to the original image is a bit jarring. Instead, we want to add an animation that blurs/fades in the original image over the blur.

This can be implemented easily with the onLoadedCallback like in this example: https://jagad.dev/posts/custom-image-transition-in-nextjs-with-tailwind-css

However, images are cached in the browser and when the image loads instantly in the browser it would be better to skip the animation altogether. The onLoadingComplete callback happens with a significant delay for cached images. There is an onLoad callback native to the img tag as well, which happens sooner but there is a delay that makes it harder to manage the animation patterns.

Desired behavior

For new images:

1. Blur image loads first
2. When the full image loads, transition the image in

For browser-cached images:

1. Shows full image, without blur and without animation

Actual behavior(based on implementation in market and experimentation)
For new images: (custom transition code) ✅

For browser-cached images:

1. Flickers blurred images
   OR
2. Has a pop-in animation.

Note that for browser-cached images the experience means more layout shifts than necessary.

What is the ideal implementation?

[joakim-roos]

Hi @conanbatt Did you find a solution for this? I'm currently looking for a similar solution. I also find the placeholder blur effect a bit jarring :)

[Jbmanllr]

Hello, wondering if anyone found a solution for this. I havent tried yet, but maybe reading next cache before the rendering in order to set the inital loading state to false instead of true?