Hello all, please forgive the elementary question. If I have the following css, are both of the images loaded on the smaller device or only the background image for the appropriate media query? I am basically trying to serve a smaller menu sprite to the iPad and a larger sprite to the desktop.


@media only screen and (min-width: 960px) {

bk-head {

background-image: background-image: url(../images/BIGGER-IMAGE.png);

}


}

@media only screen and (min-width: 768px) and (max-width: 959px) {


bk-head {

background-image: background-image: url(../images/SMALLER-IMAGE.png);

}


}