Section ID and Media Queries

On some image-heavy webpages (photography website) I want to load smaller images to mobile devices. I know how to use a combination of media query (code below) and the Section ID (e.g. in a Grid Row). This works in terms of mobiles displaying the correct items, but I have discovered that mobile browsers are still downloading ALL images (ie desktop images too) in the background – which makes the underlying problem worse (page speed). Is there any way around this? thanks

@media only screen and (max-width: 900px) {
/* Add your Mobile Styles here */

#family-promo-homepage-mobile {
display: block;
}
#family-promo-home {
display: none;