Адаптивные изображения и srcset: обеспечение отзывчивости медиа

Почему просто <img> больше не работает? 💡

Раньше мы просто вставляли изображение — и оно работало. Но сегодня у нас есть:

• Десятки размеров экранов (от 320px до 8K)
• Разные плотности пикселей (1x, 2x, 3x)
• Медленные мобильные сети

Пример «старой школы»:

<img src="cat.jpg" alt="Кот">  <!-- Больше не вариант! -->

Решение: srcset и sizes 🛠️

Браузеру нужен выбор и инструкции. Дадим ему и то, и другое!

Базовый пример с srcset

<img srcset="cat-320w.jpg 320w,
             cat-640w.jpg 640w,
             cat-1024w.jpg 1024w"
     src="cat-1024w.jpg" 
     alt="Кот в адаптивном мире">

• 320w = ширина изображения в пикселях
• Браузер выбирает оптимальный вариант на основе ширины экрана

🔥 Горячий совет: Всегда указывайте src как fallback для старых браузеров!

Добавляем «подсказки» через sizes 📏

Браузер не знает, как изображение будет отображаться в вашем макете. Расскажем ему:

<img srcset="cat-320w.jpg 320w,
             cat-640w.jpg 640w"
     sizes="(max-width: 600px) 100vw,
            (min-width: 601px) 50vw"
     src="cat-640w.jpg"
     alt="Кот с инструкциями">

Разберём sizes: - До 600px — изображение на всю ширину вьюпорта (100vw) - На экранах шире 601px — занимает половину (50vw)

Плотность пикселей: x вместо w 🖥️📱

Для ретин-дисплеев (2x, 3x) используем другой синтаксис:

<img srcset="cat-1x.jpg 1x,
             cat-2x.jpg 2x"
     src="cat-1x.jpg"
     alt="Кот для Retina">

• 1x = стандартная плотность
• 2x = двойная плотность (например, для MacBook Pro)

Оптимизация: форматы нового поколения 🌟

Современные браузеры поддерживают:

• WebP (на 30% меньше веса)
• AVIF (ещё лучше, но пока не везде)

Используем <picture> для прогрессивного улучшения:

<picture>
  <source type="image/avif" srcset="cat.avif">
  <source type="image/webp" srcset="cat.webp">
  <img src="cat.jpg" alt="Кот будущего">
</picture>

Браузер выберет первый поддерживаемый формат!

Практический кейс: адаптивный герой-баннер 🏙️

Собираем все техники вместе:

<picture>
  <!-- Для узких экранов -->
  <source media="(max-width: 768px)" 
          srcset="hero-mobile-400w.webp 400w,
                  hero-mobile-800w.webp 800w"
          sizes="100vw">

  <!-- Для широких экранов -->
  <source media="(min-width: 769px)"
          srcset="hero-desktop-1200w.avif 1200w,
                  hero-desktop-2400w.avif 2400w"
          sizes="80vw">

  <!-- Fallback -->
  <img src="hero-desktop-1200w.jpg"
       srcset="hero-desktop-2400w.jpg 2400w"
       sizes="80vw"
       alt="Главный баннер">
</picture>

Проверяем результат 🕵️

1. DevTools → Network — смотрите, какое изображение загружается
2. Меняйте ширину экрана и обновляйте страницу
3. Проверьте на реальных мобильных устройствах

💡 Если хотите глубже разобрать примеры — Данила Бежин отлично объясняет это в видео про адаптивную графику.

Итоговая схема выбора 🧠