Sprites and Responsive Layout

[shinck]

Hello all,

I am putting together a mobile site that I would like displays well should anyone stumble upon it while on their tablet and/or computer.

I set up two sprites, one for small icons/buttons for mobile phones, the other for default sized icons/buttons.

I visited the page on my phone and it took a bit to download, even once all of the “mobile” icons/buttons were visible, so I asked myself what else it was pulling down.

If I created the page with media queries, when the page is requested, will it only download the images needed for the css within the media query that is true?

Or will it go ahead and download images from css statements in other media queries as well???

Does this make sense?

[arawde]

My understanding is that any element within the dom which has an initially declared image within the CSS will start downloading, despite any media queries. Of course, I could be mistaken.

[shinck]

Thanks arawde for your reply, if that’s true than its less than ideal for me.

The site is a mobile site first and foremost and so file size is pretty crucial. I really don’t want the people visiting on their phones to be downloading images meant for those using tablets and pc’s.

If anyone has a good link to share on how to handle delivering only the images needed for specific media queries or the likes I would be very grateful.

[Author]

Posts