How to display different images in mobile and desktop devices

Question

Hi can anyone tell me how to display differnet banner images in desktop and mobile devices.Here is my code.

HTML:

<div class="row">
    <img src="image\bannerimages\Career.png" class="img-responsive careerpage">
    <h2 class="careerbannertext">LIFE AT TEKNOTRAIT</h2>
    <h2 class="careerbannertext1">Are you fanatically driven and ready to take on some of the best challenges the industry has to offer? </h2>
    <h2 class="careerbannertext2">Come join us,be inspired to do the best work of your life!</h2>       
</div>

Right now in my desktop version it is displaying this image i need to change another image in mobile version.

Answer 1

you can try this one:

<picture>
   <source 
      media="(min-width: 650px)"
      srcset="images/img1.png">
   <source 
      media="(min-width: 465px)"
      srcset="images/img2.png">
   <img src="images/img-default.png" 
   alt="a cute kitten">
</picture>

the image tag is still there so you can put a default image for the other browser that doesnt support the picture tag.

Answer 2

You can use source element by adding a media attribute with the value (orientation: portrait) for mobile devices and (orientation: landscape) for desktop devices.

Example:

<picture>
   <source 
      media="(orientation: landscape)"
      srcset="testlandscape.png">
   <source 
      media="(orientation: portrait)"
      srcset="testportrait.png">
      
 <img src="testlandscape.png" width="100%" height="auto">
</picture>

Answer 3

Use this method instead. I'm still learning it but it's a much better option than the others mentioned here. In addition to being done in HMTL only, it also doesn't download images in the background that aren't needed (eg it won't download the high-resolution desktop image and just hide it, like is done with CSS display: none).

Answer 4

I cannot remove my accepted answer, so please don't use it. The best way is using tag picture with sources, like Ron.Basco post:

<picture>
   <source 
      media="(min-width: 650px)"
      srcset="images/img1.png">
   <source 
      media="(min-width: 465px)"
      srcset="images/img2.png">
   <img src="images/img-default.png" 
   alt="a cute kitten">
</picture>

My original accepted answer, which is not good, because images will be loaded on each device:

 .img-responsive.mobile { display: none; } @media only screen and (max-device-width: 480px) { .img-responsive { display: none; } .img-responsive.mobile { display: block; } }

 <div class="row"> <img src="image\\bannerimages\\Career.png" class="img-responsive careerpage"> <img src="image\\bannerimages\\Career-mobile.png" class="img-responsive careerpage mobile"> <h2 class="careerbannertext">LIFE AT TEKNOTRAIT</h2> ... </div>