Bootstrap 3 will a hidden div still load the images

Question

I am building a responsive website with a large carousel with multiple images on the front page.

I want to make a different size of image for each device. And I want to ensure that only the right image for that device is downloaded to save bandwidth for mobile users.

I can make bootstrap show only the right images by doing something like this:

<img src=" http://placehold.it/1700x700" alt="Placeholder" class="visible-lg"/>
<img src=" http://placehold.it/1100x700" alt="Placeholder" class="visible-md"/>
<img src=" http://placehold.it/900x700" alt="Placeholder" class="visible-sm"/>
<img src=" http://placehold.it/768x700" alt="Placeholder" class="visible-xs"/> 

If I load this on a xs device, will it still download all the 4 images, or just the bottom one? What's the best practice to ensure it only downloads the right ones?

Really appreciate your help as always.

Answer 1

Your example will load all four images, which is a real pain for mobile device users (and extra demand on your server). Responsive images is one of the few areas where there isn't an widely-agreed "best solution" in place, and most developers will just shrug when pressed for an answer.

I've found that the 1.5x Hack works pretty well in most use cases:

http://alistapart.com/article/mo-pixels-mo-problems (at the end, but worth reading all the way through).

Answer 2

Have a look at "responsiveimages.org" as they are trying to solve this very problem and a proper solution is better than a hack. It's a bit late to answer but since I was trying to solve the same problem I thought I'd post what I'm doing :-)