HTML

HTML: изображения и медиа

📚 24 вопросовПройти тест →
Лекция

HTML: изображения и медиа

HTML

HTML: изображения и медиа

Введение: как витрина магазина 🖼️

Представьте витрину: хороший визуал сразу объясняет, что внутри.
В вебе изображения и медиа работают так же — они привлекают, объясняют и помогают понять смысл.
💡 Совет: медиа — это не украшение, а часть контента.
✅ Вывод: правильные картинки и медиа делают страницу понятнее и живее.

Проблема: красивые, но бесполезные медиа ❌

Без смысла:
  • картинки долго грузятся;
  • непонятно, что на них;
  • доступность падает.
Со смыслом:
  • медиа объясняют идею;
  • есть описание;
  • производительность не страдает.
✅ Вывод: медиа должны работать на задачу.

Чем помогает и как работает

  • помогает объяснять идею быстрее, чем текстом без визуала;
  • повышает доступность, когда медиа корректно подписаны и размечены;
  • улучшает скорость и UX при правильной загрузке и форматах.
Как это работает:
  1. Определяем роль медиа: контент, иллюстрация, фоновый элемент, видео или аудио.
  2. Подбираем правильные теги и атрибуты (img, alt, picture, video/audio).
  3. Настраиваем адаптивность и производительность (форматы, размеры, lazy).
  4. Проверяем доступность и качество воспроизведения на разных устройствах.
✅ Вывод: медиа работает эффективно только когда есть смысл, доступность и контроль загрузки.

Что такое изображения и медиа

Изображение — визуальная часть контента.
Медиа — видео и аудио, которые дополняют смысл.
✅ Вывод: медиа — это контент, а не декор.

Ключевые термины (простыми словами)

  • img — вставка изображения.
  • alt — текст вместо картинки.
  • figure/figcaption — иллюстрация с подписью.
  • srcset — набор размеров для адаптивности.
  • picture — выбор формата/кадра.
  • video/audio — медиа‑теги.
  • controls — стандартные кнопки управления.
  • loading="lazy" — ленивая загрузка.
✅ Вывод: эти термины — база работы с медиа.

1. img — основное изображение

Назначение: показать картинку в потоке контента.
Простыми словами: img — это основной способ вставить контентное изображение на страницу.
Аналогия: иллюстрация в книге.
Пример:
<img src="/images/hero.jpg" alt="Студент за ноутбуком" />
🔎 Как это происходит на практике:
  1. Добавляю изображение через img в нужное место контента.
  2. Проверяю корректность пути в src и фактическую загрузку файла.
  3. Тестирую отображение на разных ширинах экрана.
Характеристики:
  • ✅ src указывает путь.
  • ✅ alt обязателен.
❗ Когда использовать: когда изображение — часть смысла.
✅ Вывод: img — это стандартная картинка.

2. alt — смысл вместо картинки

Назначение: объяснить, что на изображении.
Простыми словами: alt — это текстовое описание изображения, которое заменяет картинку при недоступности.
Аналогия: подпись под фото.
Пример:
<img src="/images/teacher.jpg" alt="Преподаватель объясняет тему" />
🔎 Как это происходит на практике:
  1. Формулирую короткий и точный смысл изображения.
  2. Добавляю этот текст в alt и избегаю общих фраз.
  3. Проверяю, что без картинки смысл блока остаётся понятным.
Характеристики:
  • ✅ Помогает доступности.
  • ✅ Показывается, если картинка не загрузилась.
❗ Когда использовать: всегда, кроме чисто декоративных картинок (alt="").
✅ Вывод: alt — это смысл и доступность.

3. figure и figcaption

Назначение: связать изображение и подпись.
Простыми словами: figure объединяет медиа и подпись, а figcaption объясняет контекст изображения.
Аналогия: фото с подписью в журнале.
Пример:
<figure>  <img src="/images/course.jpg" alt="Страница курса" />  <figcaption>Главная страница курса</figcaption></figure>
🔎 Как это происходит на практике:
  1. Оборачиваю изображение в figure.
  2. Добавляю figcaption с понятной подписью.
  3. Проверяю, что подпись действительно дополняет контент, а не дублирует его.
Характеристики:
  • ✅ figure объединяет медиа и подпись в один смысловой блок.
  • ✅ figcaption связывает пояснение именно с этим медиа.
❗ Когда использовать: когда у медиа нужна подпись или пояснение в контексте материала.
✅ Вывод: figure нужен, когда есть подпись.

4. Адаптивные изображения (srcset, sizes, picture)

Назначение: подбирать оптимальный размер/формат.
Простыми словами: адаптивные изображения позволяют отдавать нужный размер файла под конкретное устройство.
Аналогия: одинаковая картинка в разных размерах.
Пример:
<img  src="/images/hero-800.jpg"  srcset="/images/hero-400.jpg 400w, /images/hero-800.jpg 800w"  sizes="(max-width: 600px) 400px, 800px"  alt="Обложка курса"/>
🔎 Как это происходит на практике:
  1. Готовлю несколько версий картинки по ширине.
  2. Настраиваю srcset и sizes под брейкпоинты.
  3. Проверяю в DevTools, что на мобильном грузится меньший файл.
Характеристики:
  • ✅ srcset предлагает версии изображения разной ширины.
  • ✅ sizes подсказывает браузеру, какой размер нужен в текущем экране.
❗ Когда использовать: для больших картинок и мобильных.
✅ Вывод: адаптивность ускоряет загрузку.

5. picture и выбор формата

Назначение: отдавать современный формат, если поддерживается.
Простыми словами: picture позволяет выбрать лучший формат изображения в зависимости от поддержки браузера.
Пример:
<picture>  <source srcset="/images/hero.avif" type="image/avif" />  <source srcset="/images/hero.webp" type="image/webp" />  <img src="/images/hero.jpg" alt="Обложка курса" /></picture>
🔎 Как это происходит на практике:
  1. Добавляю источники avif/webp через source.
  2. Оставляю fallback-изображение в img.
  3. Проверяю загрузку форматов в разных браузерах.
Характеристики:
  • ✅ source задаёт форматы и условия выбора источника.
  • ✅ img внутри picture работает как fallback.
❗ Когда использовать: когда нужно отдавать modern-форматы с fallback на классический формат.
✅ Вывод: picture даёт максимум качества при минимальном весе.

6. Форматы изображений

Простыми словами: формат файла определяет баланс между качеством изображения и скоростью загрузки страницы.
  • JPEG — фото (много цветов).
  • PNG — прозрачность.
  • SVG — иконки и графика.
  • WebP/AVIF — современная компрессия.
🔎 Как это происходит на практике:
  1. Для фото выбираю JPEG/WebP/AVIF, для графики — SVG/PNG по задаче.
  2. Сравниваю размер и визуальное качество нескольких форматов.
  3. Фиксирую формат, который даёт лучшее соотношение веса и качества.
Характеристики:
  • ✅ Растровые и векторные форматы решают разные задачи.
  • ✅ Формат напрямую влияет на вес файла и качество.
❗ Когда использовать: при выборе типа изображения перед публикацией медиа.
✅ Вывод: формат влияет на скорость и качество.

7. Видео и аудио

Назначение: показать динамический контент.
Простыми словами: video и audio — встроенные медиаплееры HTML для воспроизведения контента.
Пример:
<video controls poster="/images/preview.jpg">  <source src="/video/intro.mp4" type="video/mp4" /></video>
🔎 Как это происходит на практике:
  1. Добавляю тег video/audio с source нужного формата.
  2. Включаю controls, чтобы пользователь мог управлять воспроизведением.
  3. Проверяю работоспособность на десктопе и мобильных устройствах.
Характеристики:
  • ✅ controls даёт стандартные кнопки.
  • ✅ poster — превью до старта.
❗ Когда использовать: когда нужно встроить ролик или звук прямо в страницу.
✅ Вывод: медиа должно быть управляемым.

8. Автовоспроизведение и звук

Простыми словами: автозапуск видео со звуком обычно блокируется, поэтому для autoplay чаще нужен muted.
Правило:
  • Браузеры блокируют autoplay со звуком.
  • Для autoplay обычно нужно muted.
Пример:
<video autoplay muted loop></video>
🔎 Как это происходит на практике:
  1. Настраиваю autoplay только для действительно нужных сценариев.
  2. Для автозапуска добавляю muted и проверяю поведение браузера.
  3. Убеждаюсь, что автозапуск не мешает восприятию страницы.
Характеристики:
  • ✅ autoplay обычно работает только вместе с muted.
  • ✅ Автозапуск должен быть оправдан сценарием и не мешать UX.
❗ Когда использовать: когда нужен автозапуск фоново-демонстрационного видео.
✅ Вывод: без muted автозапуск часто не работает.

9. Preload и loop

Назначение: управлять загрузкой и повтором.
Простыми словами: preload управляет объёмом предзагрузки медиа, а loop задаёт повтор воспроизведения.
Пример:
<video preload="metadata" loop></video>
🔎 Как это происходит на практике:
  1. Выбираю preload по сценарию: none/metadata/auto.
  2. Включаю loop только там, где это логично по контексту.
  3. Проверяю влияние настроек на скорость загрузки страницы.
Характеристики:
  • ✅ preload регулирует объём загрузки до старта.
  • ✅ loop включает циклическое воспроизведение без ручного повтора.
❗ Когда использовать: когда нужно балансировать трафик, скорость старта и UX медиа.
✅ Вывод: preload помогает балансу между скоростью и трафиком.

10. Ленивая загрузка

Простыми словами: loading="lazy" откладывает загрузку изображения до момента, когда оно почти попало в экран.
Пример:
<img src="/images/card.jpg" alt="Карточка" loading="lazy" />
🔎 Как это происходит на практике:
  1. Добавляю loading="lazy" на изображения вне первого экрана.
  2. Оставляю критичные hero-изображения без lazy.
  3. Сравниваю метрики скорости до и после настройки.
Характеристики:
  • ✅ loading="lazy" откладывает загрузку вне первого экрана.
  • ✅ Критичный контент лучше оставлять без lazy.
❗ Когда использовать: для второстепенных изображений ниже первого экрана.
✅ Вывод: loading="lazy" ускоряет первую загрузку страницы.

11. Производительность медиа

Простыми словами: производительность медиа — это контроль размера файлов, форматов и порядка загрузки.
  • Сжимайте изображения.
  • Используйте современные форматы.
  • Загружайте по мере необходимости.
🔎 Как это происходит на практике:
  1. Сжимаю медиа перед загрузкой в проект.
  2. Подбираю современный формат и адаптивные размеры.
  3. Измеряю влияние на LCP/время загрузки и корректирую настройки.
Характеристики:
  • ✅ Вес и формат медиа сильно влияют на скорость страницы.
  • ✅ Оптимизация медиа улучшает LCP и общее восприятие сайта.
❗ Когда использовать: всегда при подготовке изображений, видео и аудио к публикации.
✅ Вывод: скорость = лучшая конверсия.

12. Контент vs фон

Простыми словами: если изображение несёт смысл — это контентный img; если только декор — это CSS-фон.
  • Контентная картинка — через img.
  • Декор — через CSS background-image.
🔎 Как это происходит на практике:
  1. Определяю, влияет ли изображение на смысл материала.
  2. Для смысловых изображений использую img + alt.
  3. Для декоративных элементов использую background-image в CSS.
Характеристики:
  • ✅ Смысловые изображения размещают в HTML через img + alt.
  • ✅ Декоративные изображения логичнее задавать через CSS background.
❗ Когда использовать: при выборе способа вставки изображения в интерфейс.
✅ Вывод: если картинка несёт смысл — это img с alt.

Часто спрашивают на собеседованиях

  • Зачем нужен alt? Для доступности и смыслового описания.
  • Когда использовать picture? Когда нужно выбирать формат или размер.
  • Почему не autoplay со звуком? Браузеры блокируют.
  • Что такое loading="lazy"? Ленивая загрузка изображений.
✅ Вывод: это базовые вопросы по медиа.

Типичные ошибки

Ошибка 1: Нет alt

❌ Неправильно: доступность падает.
✅ Правильно: всегда задавать текст.

Ошибка 2: Большие картинки без srcset

❌ Неправильно: долго грузится.
✅ Правильно: адаптивные изображения.

Ошибка 3: Видео без controls

❌ Неправильно: пользователь не может управлять.
✅ Правильно: controls или свои кнопки.

Ошибка 4: Картинка как фон, хотя это контент

❌ Неправильно: нет alt.
✅ Правильно: использовать img.

Best Practices

  • Всегда пишите смысловой alt.
  • Используйте picture и современные форматы.
  • Добавляйте loading="lazy" для второстепенных картинок.
  • Сжимайте медиа.
  • Разделяйте контент и декор.

Заключение

Ключевые мысли

🎯 Медиа — это контент, а не украшение.
🎯 alt и адаптивность — основа качества.
🎯 Быстрые медиа повышают UX и конверсию.
Делайте медиа осмысленным — и страница станет живой.
🎯

Проверьте знания

Закрепите материал — пройдите тест по теме «HTML: изображения и медиа»

Пройти тест →