Изображения и альтернативный текст

Чтобы элемент img был полезен, ему нужны два атрибута: src, который говорит, где картинка, и alt, который говорит, что на ней, когда её не видно.

Элемент img

Картинки не хранятся внутри HTML-файла. Страница указывает на них, и браузер загружает каждую как отдельный файл. Указывает элемент <img>. Он пустой, поэтому закрывающего тега у него нет, а его атрибут src хранит адрес изображения, абсолютный или относительный, точно как href у ссылки. Изображения являются замещаемыми элементами: браузер замещает элемент картинкой, и картинка сама определяет свой размер, если ты не укажешь другого.

<img src="images/sourdough.jpg"
     alt="A round sourdough loaf with a dark, cracked crust"
     width="400" height="300">

Атрибуты width и height задают размер изображения в пикселях, без единицы измерения. Ставь в них настоящий размер файла. HTML обычно приходит раньше картинок, поэтому без этих чисел браузер сначала раскладывает текст, а потом сдвигает его вниз, когда загружается каждое изображение, и это раздражает, если ты уже начал читать. С ними браузер с самого начала оставляет нужное место. Чтобы показать изображение меньше или больше, используй CSS, а не меняй эти числа.

Как писать альтернативный текст

Атрибут alt хранит текстовую замену. Экранный диктор читает его вслух, браузер показывает его, если файл не загрузился, а поисковики читают его, чтобы понять картинку. MDN предлагает простую проверку: что потеряется, если изображение не покажется? Напиши это, коротко. Для фото товара опиши то, что нужно знать, чтобы его выбрать. Для диаграммы передай её вывод, например «Продажи выросли втрое с января по март», а не «Столбчатая диаграмма».

• Не начинай с «Изображение…» или «Картинка…». Экранные дикторы и так сообщают, что это изображение.
• Декоративные изображения, например волнистая разделительная линия, получают пустой alt="". Тогда экранные дикторы их пропускают. Совсем не указать alt значит другое: некоторые экранные дикторы прочитают вместо этого имя файла.
• Если изображение является единственным содержимым ссылки, его alt становится текстом ссылки, поэтому опиши, куда ведёт ссылка («Главная»), а не картинку («Логотип с хлебом»).
• Если та же информация уже есть в тексте рядом с изображением, alt="" избавит от повтора.

Иллюстрации и подписи

Когда у изображения есть подпись, оберни обоих в <figure>, а подпись положи в <figcaption>. Так подпись связывается с изображением для вспомогательных технологий, чего обычный абзац под картинкой не делает. У подписи и alt разные задачи: подпись читают все, а alt заменяет изображение, когда его нет. Они не должны просто повторять друг друга. В figure не обязательно картинка: фрагмент кода, таблица или стихотворение тоже могут быть иллюстрацией.

Форматы, data URL и встроенный SVG

Фотографии обычно хранят в JPEG или WebP, плоскую графику с резкими краями в PNG, а рисунки из фигур часто в SVG, текстовом формате, который остаётся чётким при любом размере. Маленькое изображение можно даже записать прямо в src как data URL, начинающийся с data:image/svg+xml,; в упражнениях ниже так и сделано, чтобы ничего не загружалось с других сайтов. SVG можно также написать прямо в HTML элементом <svg>. Дай ему role="img" и дочерний <title>, чтобы у экранных дикторов было для него имя. И наконец, loading="lazy" у изображений далеко внизу длинной страницы говорит браузеру подождать, пока читатель до них не докрутит.

Ещё одно правило от MDN: используй только изображения, на которые у тебя есть права. Картинки из интернета защищены авторским правом, если лицензия не говорит иного, а если указать в src чужой сервер без разрешения (это называется хотлинкингом), владельцу ещё и придётся платить за твой трафик.