Bootstrap change image according to device

Question

I want to show different images in different devices (not background image). Is it possible to do using bootstrap 3.x like the following?

For large screen

Answer 1

After @EIChapo's comment on this 2 years back question, I have search and read a lot of articles for this solution. As all modern browser except IE supports <picture> tag when I'm posting this answer. There is a bulletproof solution based on Dave Newton's article.

What we need to do is as following:

<picture alt="fancy pants">
    <!-- loaded by browsers that support picture and that support one of the sources -->
    <source srcset="big.jpg 1x, big-2x.jpg 2x, big-3x.jpg" type="image/jpeg" media="(min-width: 40em)" />
    <source srcset="med.jpg 1x, med-2x.jpg 2x, big-3x.jpg" type="image/jpeg" />

    <!-- loaded by IE 8+, non-IE browsers that don’t support picture, and browsers that support picture but cannot find an appropriate source -->
    <![if gte IE 8]>
    <object data="fallback.jpg" type="image/jpeg"></object>
    <span class="fake-alt">fancy pants</span>
    <![endif]>

    <!-- loaded by IE 6 and 7 -->
    <!--[if lt IE 8]>
    <img src="fallback.jpg" alt="fancy pants" />
    <![endif]-->
</picture>

.fake-alt {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

Answer 2

Try this:

<div class="row">
    <div class="col-xs-12 hidden-sm hidden-md hidden-lg">  
        <img class="img-responsive" src="layouts/layouts.PNG" />    <!--Mobile-->
    </div>
    <div class="hidden-xs col-sm-12 hidden-md hidden-lg">
        <img class="img-responsive" src="layouts/05.png" />   <!--Tab-->
    </div>
    <div class="hidden-xs hidden-sm col-md-12 hidden-lg">
        <img class="img-responsive" src="layouts/06.png" />   <!--Desktop-->
    </div>
    <div class="hidden-xs hidden-sm hidden-md col-lg-12">
        <img class="img-responsive" src="layouts/Layout_100.png" />  <!--Large-->
    </div>
</div>

Hope this may helpful!!

Answer 3

If you want to load only the image relevant to the screen-size, I think the best way is with javascript. Create versions of your photos, and in this case the script looks for an img with "600x400" in the filename, and replaces it with "1200x800" when the screensize is bigger than 767px.

DEMO: http://www.bootply.com/Y8XECJpGjS#

Javascript

if ($(window).width() > 767) {
    $("img[src$='600x400']").each(function() {
        var new_src = $(this).attr("src").replace('600x400', '1200x800'); 
        $(this).attr("src", new_src); 
    });
}

HTML

<div class="thumbnail">
  <img src="//placehold.it/600x400">
</div>

NOTE: this example uses placehold.it images, but obviously you will create your own image versions, include something to identify them in the filename (i.e. 600px, small, v1, etc), and then use that unique string as the find/replace strings in the script. i.e. If your filenames are photo-small.jpg, photo-mediumd.jpg, photo-large.jpg, then the script looks for "small" and replaces with "medium" or "large" where appropriate.

NOTE: once the image loads, that's it - it does not dynamically change image out as you change the screensize. There is surely a solution that does that, but overkill if not needed.

Answer 4

Use the <img> tag and provide other images in the srcset attribute

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

It is described in detail here:

https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/