Switch images in desktop and mobile views using CSS: Media queries

To switch images in desktop and mobile view using CSS media queries, you can use the following approach:

HTML:

<img src="desktop-image.jpg" class="desktop-image" alt="Desktop Image">
<img src="mobile-image.jpg" class="mobile-image" alt="Mobile Image">

CSS:

.mobile-image {
  display: none;
}

@media only screen and (max-width: 768px) {
  .desktop-image {
    display: none;
  }
  .mobile-image {
    display: block;
  }
}

In this example, the .desktop-image is displayed by default, and the .mobile-image is hidden. When the screen width is 768px or less ( typical mobile screen width), the .desktop-image is hidden, and the .mobile-image is displayed.

---

Alternatively, you can use the picture element and srcset attribute to achieve the same result:

<picture>
  <source srcset="mobile-image.jpg" media="(max-width: 768px)">
  <img src="desktop-image.jpg" alt="Desktop Image">
</picture>

This approach allows the browser to choose the correct image based on the screen width, without needing to use CSS media queries.

---

You can also use CSS background images and media queries to achieve the same result:

.image-container {
  background-image: url('desktop-image.jpg');
}

@media only screen and (max-width: 768px) {
  .image-container {
    background-image: url('mobile-image.jpg');
  }
}

Note that the image container element should have a fixed height and width for this approach to work.