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

Для загрузки изображений в уменьшенном размере на мобильных устройствах используют адаптивные изображения с помощью HTML и CSS:

1. Используйте элемент <img> с атрибутом srcset и sizes, чтобы браузер выбирал подходящий размер изображения в зависимости от размера экрана:

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

2. Используйте CSS для ограничения максимальной ширины изображения:

img {
  max-width: 100%;
  height: auto;
}

3. Можно также применять современные форматы изображений (WebP, AVIF) для уменьшения размера файлов.

Таким образом, браузер на мобильном устройстве загрузит оптимальный по размеру файл, что улучшит производительность и снизит трафик.