css - Css3 Media Queries image optimisation

Question

hey guys i am quite new to Css3 Media queries, now my question is that suppose i take this css3 for high res

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

body {
    margin: 0px;
    background-image: url(../hq.jpg);
}}

Amd for low res i take this

    @media screen and (max-width: 800px) {

body {
    margin: 0px;
    background-image: url(../bw.jpg);
}}

Now my question is if i load the page in high resolution will it load only the HQ pic or will it also load bw.jpg pic and keep it in memory. And is it worth spending time on image optimisations for different resolutions, for eg. like this one having both hih res and lo res Pic? Thanks.

Answer 1

Certainly Yeah if you have hq pics for your website say full screen and no it won't load on DOM.