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 full-size image is fairly complex -- several people, two logos, and some decorative text -- and so for the smaller image they want to crop out some of the people, drop the logos, etc. So they want the biggest, most complex image for desktops, a smaller simpler image for mid-size devices, and then smaller and simpler still for the smallest.
What is the best way to do this?
My first thought is to include all three images, and use @media min/max widths to make two of them invisible at any given size. Like:
@media (max-width: 400px) { .smallimg {display: block} .midimg {display: none} .bigimg {display: none} }
@media (min-width: 401px) and (max-width: 700px) { .smallimg {display: none} .midimg {display: block} .bigimg {display: none} }
@media (min-width: 701px) { .smallimg {display: none} .midimg {display: none} .bigimg {display: block} }
This ought to work but it would download all three images every time, which seems rather a waste of bandwidth.
I could change the images from img tags to css background images. Would that be better? Would that avoid downloading all three or would it still do that?
I was thinking of writing some JavaScript to dynamically update the URL in the img tag based on the screen size, but that seems like a bunch of complexity.
I briefly thought of making the logos and text separate images and breaking the actual picture into pieces and then trying to assemble them all as overlapping images. But that sounds like a lot of work to get right, and then I'd have to make sure it looks right at all possible sizes, not so easy to just shrink or stretch, etc. And while it's probably do-able in this particular case, I'd prefer a general solution that I can use in the future.
Anybody done something like this and have some ideas about the best way to do it?
