Docusaurus: Progressive Image Loading

[endiliey]

🚀 Feature

Have you read the Contributing Guidelines on issues?

Yes

Motivation

To improve the user experience. When visiting a page, for example: https://docusaurus.io/en/users
We can see that by default browser will not display the image until it is fully downloaded.

Pitch

Note that Medium did this and they have a very nice image loading effect.
First, load a small blurry image, and then transition to the large image. I found it pretty neat

Look at this codepen for example of loading fortnite wallpaper
https://codepen.io/endiliey/pen/wEzoBJ

Current baseline image loading (which most website does)

Progressive image loading

[jaril]

I’d like to take this on!

[endiliey]

@notjaril it's yours!

I'll check in with you periodically so that we can keep the task updated with the progress.

[endiliey]

You might want to check this out

https://github.com/Paul-Browne/lazyestload.js

[wszgxa]

Hi, @notjaril

Do you still work on this one?

[yangshun]

@notjaril How's your progress for this task? Let us know how we can help. If you are no longer available for this task, just let us know and we can free it up for someone else. Do keep us updated 😄

[NishealJ]

Hi @notjaril, are your working on this?
@yangshun doubt, are we planning this only for users page?

[yangshun]

If we were to do it, it shouldn't be just for users page. But I don't think it's a high-priority for now.