I currently have a standard size banner that loads when my page is accessed on a computer. However, I would like to optimize the loading speed by having a smaller version specifically for mobile devices using a media query. My main question is how does this affect loading time? Will changing the banner for mobile actually make a difference or will it still load all the files regardless, making it a waste of resources? If optimizing the banner doesn't improve loading time, are there any alternative methods to achieve this?
.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);
}
}