Gradually upload images using media queries

Question

If I opened this on a screen with a width of 800 pixels, would both small and large jpg be loaded? or is the browser smart enough to ignore the smaller image?

@media screen and (min-width: 480px) { div { background-image: url(images/small.jpg); } } @media screen and (min-width: 600px) { div { background-image: url(images/big.jpg); } } 

Answer 1

Since both media processes will be executed and both rules use the same selector, the second div rule will take precedence, and only big.jpg will be loaded for any div . When you resize the browser window until the second rule is no longer applied, it should go ahead and load small.jpg .

I made a quick test page with your CSS. The Firebug Net panel checked that big.jpg loads in my normal browser size, and small.jpg only loads after I make the browser window narrow enough.