Изображения
Картинки делают страницу нагляднее: фотографии товаров, схемы, логотипы. Сама картинка — отдельный файл, а HTML лишь говорит браузеру, где её взять и как описать словами.
Тег img
Тег <img> (от image) одиночный. В атрибуте src (source — источник) указывают адрес файла, в alt — текстовое описание:
<img src="/icons/languages/html-css.png" alt="Логотип HTML и CSS">Адрес в src работает так же, как в ссылках: он бывает абсолютным и относительным.
Текст alt
Текст из alt увидит пользователь, если картинка не загрузится, и услышит тот, кто пользуется программой чтения с экрана. Здесь файла нет — и браузер показал описание:
<img src="/no-such-file.png" alt="Чашка капучино с рисунком в виде сердца">Описывайте, что изображено и зачем картинка на странице. Для чисто декоративных картинок пишут пустой alt="" — тогда программа чтения её пропустит.
Размеры
Атрибуты width и height задают ширину и высоту в пикселях:
<img src="/icons/languages/python.png" alt="Python" width="48" height="48">
<img src="/icons/languages/python.png" alt="Python" width="96" height="96">Даже если менять размер в CSS, атрибуты стоит указывать: браузер заранее оставит место под картинку, и текст не будет «прыгать», пока она загружается.
Картинка с подписью
<figure> объединяет картинку с подписью, а <figcaption> — сама подпись:
<figure>
<img src="/icons/languages/javascript.png" alt="Логотип JavaScript" width="80" height="80">
<figcaption>Рис. 1. Логотип языка JavaScript</figcaption>
</figure>Подпись видят все, а alt — только когда картинки нет. Поэтому они не повторяют друг друга.
Форматы и загрузка
| Формат | Для чего |
|---|---|
JPEG (.jpg) | Фотографии |
PNG (.png) | Скриншоты, картинки с прозрачностью |
| WebP, AVIF | Современная замена обоим: файлы меньше при том же качестве |
SVG (.svg) | Иконки и логотипы — рисуются чётко при любом размере |
Атрибут loading="lazy" откладывает загрузку картинки, пока пользователь не прокрутит к ней:
<p style="height: 200px;">Прокрутите вниз...</p>
<img src="/icons/languages/go.png" alt="Логотип Go" width="64" height="64" loading="lazy">Для картинок в начале страницы его не ставят — они нужны сразу.
Картинка-ссылка
Внутрь <a> можно положить картинку — тогда она станет кликабельной:
<a href="https://go.dev">
<img src="/icons/languages/go.png" alt="Сайт языка Go" width="48" height="48">
</a>У такой картинки alt описывает, куда ведёт ссылка, а не что нарисовано.
Частая ошибка
Без alt программа чтения с экрана произносит имя файла — например, «IMG 2041 точка jpg». Не пишите в alt и слова «картинка» или «фото»: это и так понятно. Плохо — alt="фото", хорошо — alt="Анна за стойкой кофейни".