Responsive design: different images for different screen sizes

Question

Our client wants to have a different banner image on smaller screens than on larger screens. Not just shrink/stretch to fit, but actually substitute a different image. The f

Answer 1

you may use css background in media queries. The images are only loaded if the CSS requires it to be, so if nothing matches the selector then it won't bother loading the image.

This article will surely help you.

Answer 2

I would checkout Zurb Foundation's Interchange for handling responsive images. The best cross browser approach i have found.

http://foundation.zurb.com/docs/components/interchange.html