How to make the correct sub-loading of images on the site?

Question

css

Good evening Toasters.
Faced with a problem when laying out the next design.
The fact is that the first div on the site, it has the properties width: 100% & height: 100vh;
And loads a picture with a resolution of 1920x1080 minecraft cubes.
The picture weighs 500 kb, and on my relatively fast Internet, when entering the site, it is loaded in jerks.
I can’t imagine what will happen on a mobile gadget or the Internet at a low speed ...
A memory is drawn in my head.
Once, on some resource, I saw how the same, almost, picture loaded in a lower resolution, that is
, pixels were visible, and within a second the pixels normalized to what they should be.
I have a catastrophic desire to have the same effect on my site.
Please tell me, Toasterites, how to implement this and make your life better?
Thank you.
PS. I'm going to eat, I'm hungry....

Answer 1

Save your image in progressive format and that's it.

Answer 2

Make the image a background and use media queries to load different resolutions.

Answer 3

Wrap your div with another div. And already give him a background with a small, light picture. But the problem is something else.