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

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

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

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

     html

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

     html

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

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

   css