Generate blurred placeholder image before real image loads?

cyrilwanner / next-optimized-images

🌅 next-optimized-images automatically optimizes images used in next.js projects (jpeg, png, svg, webp and gif).

MIT License

2.21k stars 93 forks source link

Generate blurred placeholder image before real image loads? #213

Open dpyzo0o opened 4 years ago

dpyzo0o commented 4 years ago

Hi folks, I would like to implement the blurred image placeholder feature just like what gatsby-image does. I read through the docs and I could get the blurred image using lqip query params. The problem is I don't have the width/height info of the image, therefore I cannot make the blurred image the same size as the real image. I read some source code from gatsby-image and it turns out they have access to the aspect-ratio of the processed image, code here.

Can someone help me?

maxwolfs commented 3 years ago

Hi, you can checkout @tilman's repo: Intersection-Placeholder, that is working with the canary of next-optimized-images.