Могу ли я отложить изображение только на мобильном устройстве, но не на компьютере?

Чтобы оптимизировать загрузку изображений для различных устройств и улучшить показатель LCP (Largest Contentful Paint) на мобильных устройствах, вы можете использовать различные методы. Самый эффективный в вашем случае — условно загружать изображение только на десктопных устройствах. Вот несколько подходов для достижения этой цели:

1. Использование атрибутов изображения и мультимедиа: Элемент <picture> в сочетании с атрибутом media позволяет указывать разные изображения для разных размеров области просмотра. Этот метод гарантирует, что изображение загружается только в том случае, если оно соответствует указанным условиям носителя.

<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>

В этом примере первый тег <source> с media = "(max-width: 767px)" имеет пустой srcset, поэтому изображение не будет загружаться на мобильные устройства. Второй тег <source> будет загружать изображение только для областей просмотра шириной более 768 пикселей.

2. Использование JavaScript для условной загрузки: Вы также можете использовать JavaScript для загрузки изображения только на настольных устройствах. Этот метод полезен, если вам нужно больше контроля или вы хотите поддерживать старые браузеры.

<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>

Этот скрипт проверяет ширину области просмотра после загрузки DOM и добавляет изображение в заголовок, только если ширина области просмотра составляет не менее 768 пикселей.

3. Использование CSS с фоновым изображением: Другой подход — использовать CSS для применения изображения в качестве фонового изображения для настольных устройств. Таким образом, изображение не является частью HTML и не будет загружаться на мобильные устройства.

<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>

В этом примере изображение устанавливается в качестве фона только для экранов шириной 768 пикселей или больше.

Выберите метод, который лучше всего соответствует вашим потребностям. Элемент <picture> с атрибутом media — самое современное и простое решение, а методы JavaScript и CSS при необходимости обеспечивают больший контроль.