In the case below, let's say both images each take 1 second to load... Then currently, the initial pageload time would take a total of 2 seconds, because both are loaded by the browser instead of just the one that is displayed.
<img class="show-for-desktop-only" src="example-desktop.jpg">
<img class="show-for-mobile-only" src="example-mobile.jpg">'...using front-end technologies, is there a way to ensure that only the image that's relevant to the requested media type be part of the initial pageload, so as to reduce the pageload time?
I'd need a solution that would also be useable for videos as well.