Mobile device page loading speed

I’ve a section element of ALB which is built for desktop screen, it has a big and nice background image which is big in size (near 200kb as a JPG). I wan to increase the loading speed in mobile device, so I duplicated this section, and replace the image with a much small size image (around 50kb). Then, I enable “hide in desktop” option of the clone section and “hide in mobile” of the original section. However, I found out that browsers acutally load both sections in the background, although I cannot see the hidden section on frontend. I expect the browser of mobile devices not to load the section with “hide in mobile” option and vice versa.

Is there any option to completely control which elements to be loaded depending on viewers’ decive screen size or device type?

Any comment welcomes. Many thanks.