Can I defer an image on mobile only but not on desktop?

I have an image that loads in my header on mobile. This is a full width image that sits at the top of the page, meaning I cannot defer it as it contributes to the LCP on desktop.

However, on mobile this image has a "display:none" class as it isn't needed to help speed up mobile page load. I am getting the Google Pagespeed warning on mobile to defer this image.

Is there a way to correctly not load this image at all on mobile devices, a better route than to display:none? Or is there a way to defer the image on mobile only so it doesn't affect the LCP score for desktop?

Current code is

<img class="full-width-scroller-bg-image desktop-only" src="<?php echo $thumb;?>" width="1920px" height="1080px" alt="Image alt tag"/>

Thanks

Solution

To optimize the loading of images for different devices and improve your LCP (Largest Contentful Paint) score on mobile, you can use various techniques. The most effective one in your case is to conditionally load the image only on desktop devices. Here are some approaches to achieve this:

1. Using picture and media attributes: The <picture> element combined with the media attribute allows you to specify different images for different viewport sizes. This method ensures that the image is only loaded when it meets the specified media conditions.

<picture>
  <source media="(max-width: 767px)" srcset="">
  <source media="(min-width: 768px)" srcset="<?php echo $thumb;?>">
  <img src="<?php echo $thumb;?>" alt="Image alt tag" width="1920" height="1080">
</picture>

In this example, the first <source> tag with media="(max-width: 767px)" has an empty srcset, so no image will be loaded on mobile devices. The second <source> tag will load the image only for viewports wider than 768px.

2. Using JavaScript for Conditional Loading: You can also use JavaScript to load the image only on desktop devices. This method is useful if you need more control or want to support older browsers.

<script>
  document.addEventListener("DOMContentLoaded", function() {
    if (window.innerWidth >= 768) {
      var img = document.createElement('img');
      img.src = "<?php echo $thumb;?>";
      img.alt = "Image alt tag";
      img.width = 1920;
      img.height = 1080;
      img.classList.add('full-width-scroller-bg-image', 'desktop-only');
      document.querySelector('header').appendChild(img);
    }
  });
</script>

This script checks the viewport width after the DOM has loaded and appends the image to the header only if the viewport is at least 768px wide.

3. Using CSS with background-image: Another approach is to use CSS to apply the image as a background image for desktop devices. This way, the image is not part of the HTML and won't be loaded on mobile devices.

<style>
  .full-width-scroller-bg-image {
    display: none;
  }
  
  @media (min-width: 768px) {
    .full-width-scroller-bg-image {
      display: block;
      width: 1920px;
      height: 1080px;
      background-image: url("<?php echo $thumb;?>");
      background-size: cover;
    }
  }
</style>

<div class="full-width-scroller-bg-image"></div>

In this example, the image is only set as a background for screens 768px wide or larger.

Choose the method that best fits your needs. The <picture> element with the media attribute is the most modern and straightforward solution, while JavaScript and CSS methods provide more control if needed.