Loading time with mobile banner in media query

Question

I have normal banner when loading my page on a computer. However, I'd like to have smaller version (so it loads faster) on mobile (media query). My question: How does it load? Is there any benefit when changing the banner in mobile or page loads all the files either way so it's just a waste of resources? If this doesn't improve loading time, is there any other way to do it?

.banner1 .banner-img{
    background-image:url(../Images/banner1.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}
@media screen and (max-width:768px){
    .banner1 .banner-img{
        background-image:url(../Images/banner2.jpg);
    }
}

Answer 1

From here https://css-tricks.com/the-complete-guide-to-lazy-loading-images/ :

If the CSS rule specifying the background image does not apply to an element in the document, then the browser does not load the background image. If the CSS rule is applicable to an element in the current document, then the browser loads the image.

So your css should work and should improve loading times. You can check it using your browser's devtools. The 'network' tab shows what requests the browser has made, so you can use this to check if it is loading one image or both.