How to display different images in mobile and desktop devices

How to display different images in mobile and desktop devices. Changing Image depending on Mobile or Desktop HTML & CSS. If you use the Neve theme and have an image as banner for your page. It looks great on desktop but too big on mobile. I would like to Change image on mobile version.

HTML

<picture>
   <source media="(min-width:768px)" srcset="img/banner.jpg">
   <source media="(max-width:767px)" srcset="img/mobile-banner.jpg">
   <img src=""img/banner.jpg alt="">
</picture>

Responsive images will automatically adjust to fit the size of the any screen. Resize the browser window to see the responsive effect.

Basically create 2 alternate image versions.

1. Large landscape oriented image that will only display on desktop, hidden from mobile view.
2. I want to target and control the size of a specific image when changing between desktop, tablet and mobile.

Another trick would be to have two img tags, and hide one depending on the device.

Trying to change the image depending on if the user is on mobile or desktop version. Used two different images, the one with an “m” in the end is a mini-version which is for mobile, and the other is for desktop.

#HTML

<img id="img1" src="images/arts/IMG_1447.png" alt="">
<img id="img2" src="images/arts/IMG_1447m.png" alt="">

#CSS

#img1 {display:block;}
#img2 {display:none}

@media all and (max-width: 499px) {
    #img1 {display: none;}
    #img2 {display: block;}
}

1. Include the above HTML line of image tag.
2. Write the above CSS for hide and show the image.

Changing Image depending on Mobile or Desktop using media query.

<picture>
   <source media="(min-width: 768px)" srcset="images/img1.png">
   <source media="(max-width: 767px)" srcset="images/img2.png">
   <img src="images/img-default.png" alt="">
</picture>