How to load the mobile version of a page without the desktop version in the background (and vice versa)

[MSGroup]

Let’s say your designer wants your homepage to be fairly image heavy. Then let’s say they want to use DIFFERENT images for desktop and mobile.

You appease them and make this work. But now your homepage is slow (makes sense, right? It’s loading both sets of images but only displaying one set). You lazy load and compress but your home page takes SIX SECONDS to load. The rest of your site loads in just under two. This can only be having a negative impact on SEO.

You won’t convince your designer to cut the images. What do you do?

My immediate thought is to look for a way of only loading the content relevant to that screen size. Sure, it won’t reshuffle itself on desktop when you drag your Chrome window to the size of a phone. But who cares? We’re the only peope who do that anyway. Is this possible?

Do you have any better ideas?

[TucsonAZWebDesign]

I certainly wouldn't use 2 sets of images. I typically use a framework like bootstrap or materialize and would just use the image class fluid. However when I'm working on a clients and they have some super annoying theme that I don't want to add any unnecessary additional plugins, or if the framework would cause any complications i'll just use the responsive CSS rules of max and min width and specify different optimized images at certain breakpoints:

https://www.w3schools.com/css/css_rwd_mediaqueries.asp