Как сделать правильную под-загрузку изображений на сайте?

Доброго вечера Тостеровцы.
Столкнулся с заморочкой при верстке очередного дизайна.
Дело в том что первый див на сайте, он имеет свойства width: 100% & height: 100vh;
И подгружает в себя картинку разрешением 1920х1080 кубиков маинкрафта.
Картинка весом в 500 кб, и на моем сравнительно быстром интернете, при заходе на сайт, подгружается рывками.
Не представляю что будет на мобильном гаджете или интернете с маленькой скоростью...
Прорисовывается воспоминание в моей голове.
Как то раз, на каком- то ресурсе видел, как такая же, почти, картинка загрузилась в меньшем разрешении,
Т.е были видны пиксели, и в течении секунды пиксели нормализовались в то, что и должно быть.
Имею желание катастрофическое, иметь у себя на сайте такой же эффект.
Подскажите пожалуйста, Тостеровцы, как реализовать подобное и сделать свою жизнь лучше?
Спасибо.
PS. Пойду пока покушаю, проголодался....