Изображения

Тег <img> добавляет изображения на страницу. Он самозакрывающийся и требует атрибуты src (путь к файлу) и alt (описание). Alt-текст критичен для доступности — скринридеры читают его вслух для незрячих пользователей.

Тег <img> и его атрибуты:

<img src="path/to/image.jpg" alt="Описание" width="300" height="200">

src (source) — путь к изображению:

• Абсолютный: https://example.com/img/photo.jpg
• Относительный: images/photo.jpg (от текущего HTML-файла)

alt (alternative text) — описание изображения:

• Обязательный атрибут!
• Пустой alt="" — декоративное изображение (скринридер пропустит)
• Описание — информативное изображение

width и height — размеры в пикселях:

• Задают размер BEFORE загрузки (предотвращают «прыжки» layout)
• Необязательны, но полезны для производительности

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

• JPEG (.jpg) — фотографии (сжатие с потерей качества)
• PNG — прозрачность, чёткие линии (логотипы)
• SVG — векторная графика (иконки, логотипы)
• WebP — современный формат (лучшее сжатие)
• AVI — новый (лучшее сжатие, чем WebP)

lazy loading:

• <img loading="lazy"> — загрузка «по требованию"
• Улучшает скорость загрузки страницы

img — как вставка картинки в книгу. src — адрес картины в архиве. alt — подпись под картинкой (незрячий читатель «видит» подпись вслух). width/height — рамка, которая говорит типографии «зарезервируй место».

**Самый простой:**

<img src="photo.jpg" alt="Фотография кота" width="400" height="300">

Базовый img с src, alt и размерами.

**Простой:**

<!-- Декоративная картинка (пустой alt) -->
<img src="decoration.svg" alt="" width="100" height="100">

<!-- Информативная картинка -->
<img src="chart.png" alt="График продаж за 2024 год" width="600" height="400">

<!-- Ленивая загрузка -->
<img src="large-photo.jpg" alt="Пейзаж" loading="lazy" width="800" height="600">

Пустой alt для декоративных, описание для информативных. loading="lazy" для больших изображений.

**Реальный пример:**

<article>
  <h2>Рецепт борща</h2>
  <figure>
    <img
      src="images/borsch.webp"
      alt="Тарелка борща со сметаной и зеленью"
      width="600"
      height="400"
      loading="lazy"
    >
    <figcaption>Классический украинский борщ</figcaption>
  </figure>
  <p>Борщ — вкусный и полезный суп...</p>
</article>

Реальный пример: изображение с figure/figcaption, правильным alt и lazy loading.

**Неправильно:** Не указывать alt

**Почему:** alt — обязательный атрибут. Без него скринридер не сможет описать изображение. Плюс это нарушение стандартов доступности.

**Правильно:** Всегда указывайте alt. Для декоративных картинок — alt="" (пустой). Для информативных — описание.

**Неправильно:** Писать в alt «картинка» или «фото»

**Почему:** Это бесполезная информация. Скринридер и так знает, что это изображение.

**Правильно:** Описывайте СОДЕРЖАНИЕ: «Красный борщ со сметаной», а не «фото еды».

**Неправильно:** Не задавать width и height

**Почему:** Без размеров браузер не знает, сколько места зарезервировать. При загрузке страница «прыгает» (layout shift).

**Правильно:** Задавайте width и height — это предотвращает layout shift и улучшает скорость.

• src — путь к изображению, alt — описание (обязателен!)
• Декоративные: alt="". Информативные: alt="описание"
• width/height предотвращают layout shift
• loading="lazy" для отложенной загрузки
• WebP — современный формат, JPEG — для фотографий

Назад: Вы знаете ссылки (H7) — изображения часто являются элементами, на которые ведут ссылки.

Вперёд: В следующем уроке (H9) вы изучите списки: маркированные, нумерованные и вложенные.