How to display different images in mobile and desktop devices

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.

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>