A Discrete CSS Media Queries ?

[hdewantara]

I've recently read these 2 articles: Responsive Web Design by Ethan Marcotte, and also this one by Jason Grigsby's about CSS Media Query for Mobile is Fool’s Gold, and now I got confused. How should I make my site responsive without using % in images

And then I thought, why don't I just making a discrete intervals for that? Say that I have basic webpage with one image in it (as background), and the query for that image would be as follows:

PHP Code:

@media all and (max-width:320px){
    .page{background-image:url('back-300px-wide.jpg');}
}
@media all and (min-width:320px) and (max-width:420px){
    .page{background-image:url('back-370px-wide.jpg');}
}
@media all and (min-width:420px) and (max-width:520px){
    .page{background-image:url('back-470px-wide.jpg');}
}
@media all and (min-width:520px){
    .page{background-image:url('back-570px-wide.jpg');}
} 


So there are 4 images to be prepared, back-300px-wide.jpg is the one with narrowest width, and back-570px-wide.jpg is the largest. And the question is... would a browser - say Safari on iPhone - still loading all 4 of them? Is that query code above a bad idea?

Thanks for any inputs.

Kind regards,
Hendra

[StevenHu]

I would not go that route, making four images for each picture. What about higher-density displays that are coming out? How many more different images will you make then? Besides, there really isn't much difference in bandwidth use between a 300px and 370px image. That's overkill.