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>