Next/image component and lazyload preview.

[SalahAdDin]

I was following a tutorial to optimize the images in my portfolio. With the new next/image component the next-optimize-images package is not more required for the blog, but there is still a feature we would like to use: pre-loaded images:

One of lquip-loader or image-trace-loader . lquip shows a blurred image of the main colors first while the image loads (like Google Images). Trace shows an SVG outline of the image before loading the image (like Kent's blog).

We were using the lquip-loader to get a beautiful transition while the images are lazy-loaded:

A very smooth transition between a pixelated image and the last one. Unfortunately, it requires to use of a custom loader and a preview image, a different workflow to be used.

It could be great if we could use this kind of animations with the next/image component.

What do you think?