How can I hide images from the code on mobile?

Hiding images from the code on mobile devices typically involves using CSS media queries to control the display of images based on screen size. Here's how you can achieve this:

1. Using CSS Media Queries:

- The most common method is to use CSS media queries to target mobile devices based on their screen width. You can set the display property of the image to none when the screen size is below a certain threshold.

2. Example CSS Code:

/ Default display for larger screens /
.image-container img {
  display: block; / Or inline, inline-block, etc. as needed /
}

/ Hide images on mobile devices (screen width less than 768px) /
@media (max-width: 768px) {
  .image-container img {
    display: none;
  }
}

- In this example, .image-container is a container element that holds your image. The img selector targets the image within that container. The @media (max-width: 768px) rule applies the display: none; style when the screen width is 768 pixels or less, effectively hiding the image on mobile devices.

3. Alternative: Using the picture Element:

- The picture element allows you to specify different image sources based on media queries. This is useful if you want to load a different, smaller image on mobile instead of hiding it completely.

4. Example Using the picture Element:

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

- In this example, if the screen width is 768 pixels or less, the mobile-image.jpg will be loaded. Otherwise, the desktop-image.jpg will be loaded. If you want to hide the image completely on mobile, you can use a transparent 1x1 pixel image or an empty string for the srcset attribute.

5. Considerations:

- Performance: Hiding images with display: none; still downloads the image, which can impact performance on mobile. Using the picture element or loading smaller images for mobile is more efficient.

- Accessibility: Ensure that hiding images does not negatively impact the user experience. Provide alternative text for images that are hidden, or use other methods to convey the information the image provides.

By using these techniques, you can effectively hide images from the code on mobile devices, improving performance and user experience.

Learn more about this