Как сделать так, чтобы изображение загружалось в уменьшенном размере на мобильных устройствах?

Наиболее эффективные способы:

1. Адаптивная разметка с picture или srcset:

   • Тег <picture> позволяет указать разные источники изображений (<source>) для разных условий (например, ширина окна просмотра).

     <picture>
       <source media="(max-width: 768px)" srcset="image-small.jpg">
       <img src="image-large.jpg" alt="Описание изображения">
     </picture>
     

   • Атрибут srcset тега <img> позволяет указать список изображений с указанием их дескрипторов (ширина или плотность пикселей). Браузер сам выберет наиболее подходящее.

     <img src="image-large.jpg"
          srcset="image-small.jpg 480w,
                  image-medium.jpg 800w,
                  image-large.jpg 1200w"
          sizes="(max-width: 768px) 100vw,
                 (max-width: 1200px) 50vw,
                 33vw"
          alt="Описание изображения">
     

     В sizes указывается размер "слота" изображения в различных условиях, что помогает браузеру выбрать лучшее изображение из srcset.

2. CSS Media Queries с фоновыми изображениями: Если изображение является декоративным и задается через CSS.

   .block {
     background-image: url('image-large.jpg');
   }
   
   @media (max-width: 768px) {
     .block {
       background-image: url('image-small.jpg');
     }
   }
   

3. Серверная логика / CDN с оптимизацией: Сервер может определять тип устройства пользователя (например, по User-Agent или заголовкам запроса, хотя User-Agent не всегда надежен) и отдавать оптимизированное изображение. CDN часто предлагают встроенные функции динамической оптимизации изображений для разных устройств и размеров экрана.

4. JavaScript (менее предпочтительно для начальной загрузки): Можно использовать JavaScript для определения размера экрана и динамической замены src или srcset у тега <img>. Однако это может привести к двойной загрузке (сначала большой, потом маленькой) или задержке отображения изображения, поэтому <picture> и srcset предпочтительнее.

   // Пример (не самый эффективный)
   const img = document.querySelector('img');
   if (window.innerWidth <= 768) {
     img.src = 'image-small.jpg';
   } else {
     img.src = 'image-large.jpg';
   }
   

Комбинация adaptive HTML (<picture>/srcset) и оптимизации на стороне сервера/CDN дает наилучший результат с точки зрения производительности и удобства разработки.