Урок 36. Обзор урока: Адаптивные изображения: srcset, sizes, picture

📁 Раздел: Адаптивная вёрстка ⏱️ Время изучения: ~75 мин 🎯 Сложность: Средняя
#srcset #sizes #picture #source #media #type #img #object-fit #object-position #contain #fill

⚡ Кратко

Учимся отдавать браузеру подходящее изображение: srcset помогает выбрать файл под ширину и DPR, sizes описывает CSS-размер картинки, <picture> решает art direction и WebP/AVIF-fallback, а object-fit укладывает картинку в блок фиксированного размера.

О чём урок

Учимся отдавать браузеру подходящее изображение: srcset помогает выбрать файл под ширину и DPR, sizes описывает CSS-размер картинки, а <picture> решает art direction и WebP/AVIF с fallback. Отдельно разберём базовое правило резиновой картинки (max-width:100%) и object-fit для блоков фиксированного размера.

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

Ключевые понятия

  • srcset
  • sizes
  • <picture>
  • <source>
  • WebP / AVIF
  • fallback
  • art direction
  • DPR
  • дескрипторы w и x
  • object-fit
  • max-width:100%

Структура урока

📖 Теория

Понятия, правила и практическая логика.

🔖 Справочник

Свойства, условия и короткие примеры.

💻 Примеры

Рабочая HTML/CSS связка.

⚖️ Старый vs Новый

Что ломалось раньше и как писать современнее.

📝 Задания

Практика для самостоятельной проверки.

✅ Решения

Один из корректных вариантов.

🐛 Ошибки

Типовые проблемы адаптива.

🏠 Домашнее задание

Итоговая мини-практика урока.

🔗 Ресурсы

Документация и повторение.

Навигация