Справочник · HTML

Тег <img>: изображение на странице

Редакция PraktumОбновлено 24 октября 20267 мин чтенияУровень: новичок

Тег <img> вставляет изображение в страницу. Он пустой — закрывающего тега нет. Обязательный минимум — адрес файла в src и текстовая замена в alt. Атрибуты width и height резервируют место, а srcset и loading помогают картинке грузиться быстро на любом экране.

Минимальный пример

<img src="/images/workshop.jpg" alt="Мастер расписывает глиняную чашку"
     width="800" height="533">

Браузер сразу резервирует место 800×533 в пропорции, загружает файл и показывает его. Если файл не загрузится, вместо него появится текст из alt. Его же прочитает скринридер и учтёт поисковик при поиске по картинкам.

Атрибуты тега img

Как писать alt

alt — это то, что человек должен узнать из картинки, если её не видит. Отвечай на вопрос «зачем здесь это изображение».

Не начинай с «картинка» или «фото» — скринридер и так объявит изображение. Если alt совсем не указать, скринридер может прочитать имя файла вроде «IMG_2048.jpg».

width и height: убираем скачок макета

<img src="/images/cover.jpg" alt="Обложка курса" width="1200" height="630">

img {
  max-width: 100%;
  height: auto;
}

Без размеров браузер не знает высоту картинки, пока она не загрузится, и текст под ней сначала встаёт выше, а потом прыгает вниз. Это ухудшает показатель CLS из Core Web Vitals. Атрибуты задают пропорцию, а CSS max-width: 100%; height: auto позволяет картинке сжиматься под экран с сохранением пропорций.

srcset и sizes: картинка под размер экрана

<img src="/images/hero-800.jpg"
     srcset="/images/hero-400.jpg 400w,
             /images/hero-800.jpg 800w,
             /images/hero-1600.jpg 1600w"
     sizes="(max-width: 700px) 100vw, 700px"
     alt="Ученики за ноутбуками на занятии"
     width="1600" height="900">

В srcset перечислены файлы и их реальная ширина (400w). sizes говорит, какой ширины будет картинка в макете: на экране до 700px — во всю ширину окна, иначе 700px. Браузер сам выберет файл с учётом плотности пикселей экрана. Телефон скачает 400 или 800 пикселей вместо 1600 — страница грузится быстрее.

Для иконок фиксированного размера проще дескрипторы плотности: srcset="logo.png 1x, logo@2x.png 2x". Если нужно отдать другой кадр или формат, используй тег picture.

loading="lazy" и главная картинка

<!-- главная картинка первого экрана -->
<img src="/images/hero.jpg" alt="…" width="1600" height="900" fetchpriority="high">

<!-- картинки ниже по странице -->
<img src="/images/step-3.jpg" alt="…" width="800" height="450" loading="lazy">

loading="lazy" откладывает загрузку, пока картинка не приблизится к экрану, и экономит трафик на длинных страницах. Но главной картинке первого экрана lazy вредит: она начнёт грузиться позже и ухудшит LCP. Ей, наоборот, ставят fetchpriority="high".

Какой формат выбрать

Не загружай фото 4000 пикселей в карточку шириной 300. Сожми и уменьши файл до нужного размера — это самая заметная экономия на большинстве сайтов.

Картинка-ссылка и подпись

<a href="/">
  <img src="/favicon.svg" alt="Praktum — на главную" width="40" height="40">
</a>

<figure>
  <img src="/images/flex-axes.png" alt="Главная ось направлена слева направо, поперечная — сверху вниз" width="800" height="400">
  <figcaption>Оси Flexbox при flex-direction: row</figcaption>
</figure>

Если картинка — единственное содержимое ссылки, её alt становится текстом ссылки, поэтому он описывает цель перехода. Подпись к иллюстрации оформляют через figure и figcaption.

img или фон через CSS

Частые ошибки

• Не пишут alt вовсе — скринридер прочитает имя файла.
• Ставят пустой alt у картинки с важной информацией.
• Не указывают width и height, и текст прыгает при загрузке.
• Ставят loading="lazy" главной картинке первого экрана.
• Путают регистр в имени файла: на сервере Photo.JPG и photo.jpg — разные файлы.

Доступность

У каждой картинки должен быть атрибут alt: осмысленный — у содержательной, пустой — у декоративной. Текст на картинке дублируй в alt или, лучше, выноси в HTML. Не передавай важную информацию только изображением — например, ошибки в форме или цены. Для сложных схем и графиков давай текстовое описание рядом.

Поддержка браузерами

img, alt, srcset и sizes поддерживаются всеми браузерами. loading="lazy" работает во всех актуальных браузерах. fetchpriority поддерживают свежие версии Chrome, Safari и Firefox; старые браузеры просто игнорируют атрибут, картинка всё равно загрузится. Форматы AVIF и WebP поддерживаются всеми актуальными браузерами.

<img src="/images/hero.webp" alt="Ученица верстает первую страницу" width="1600" height="900" fetchpriority="high">

<figure>
  <img src="/images/grid.webp" alt="Три колонки карточек одинаковой ширины" width="800" height="450" loading="lazy">
  <figcaption>Сетка из трёх колонок на CSS Grid</figcaption>
</figure>

<img src="/images/wave.svg" alt="" width="1200" height="80">

<style>
  img { max-width: 100%; height: auto; }
</style>