Pictures in responsive design?

Question

css

I recently mastered a more or less adaptive layout, and decided to try myself in real work. I work with a small web studio. I have to type from a resolution with a width of 1920px and down to mobile, since I receive layouts in this resolution from the designer. Everything turns out not bad, but when I go to test hosting from the phone, it takes a very long time to load, and often the browser cannot withstand such loads, I have an old huawei with not very normal Internet. Everything works fine on my wife's iphone 5s, although it's not fast either. And I came to the conclusion that this is a problem with pictures, very heavy, from 400kb to 1.2mb on average, since I use pictures with hd resolution for backgrounds and they adapt to mobile. Naturally, it turns out a lot, on average 7-8mb of only one picture in the site.
I would like to know if there is clear and easy-to-learn among the many information on this issue, how to deal with pictures for mobile and tablets and where it is located. In general, this area is not easy for me, but web development is very interesting to me and I do not want to stop. Advise resources where you can learn everything, and always Russian-speaking.

Answer 1

https://developers.google.com/speed/pagespeed/insights/
Listen to Google, it will help you.

Answer 2

Video response: https://video.yandex.ru/users/ya-events/view/3222