Загружать огромную десктопную картинку на мобильном телефоне — грех против оптимизации и скорости загрузки. Вместо кучи классов в CSS, используй правильный HTML-тег <picture>.
⚡ Идеальное решение для адаптивности:
<picture>
<!-- Если экран смартфона (до 768px), грузим легкую вертикальную фотку -->
<source media="(max-width: 768px)" srcset="mobile-hero.webp">
<!-- Для больших экранов — полноценный баннер -->
<source media="(min-width: 769px)" srcset="desktop-hero.webp">
<!-- Запасной вариант для старых браузеров -->
<img src="desktop-hero.jpg" alt="Главный баннер" loading="lazy">
</picture>
Браузер скачает только один нужный файл, экономя трафик пользователя. А формат
.webp уменьшит вес картинки ещё в пару раз.
