Тег <img>

Изображение
  • Категории: Потоковое содержимое, Фразовое содержимое, Встроенное содержимое
  • Контекст:

    Где ожидается встроенное содержимое.

  • Модель:

    Без содержимого.

Тег <img> (сокращение от "image" - изображение) предназначен для вставки изображений. Данный элемент имеет два обязательных атрибута:

  • src - путь до изображения
  • alt - альтернативный текст

Альтернативный текст должен описывать то, что показано на изображении. Это очень важно для пользователей, которые не могут увидеть само изображение в силу каких-либо обстоятельств. Например:

  • У них очень медленное соединение, и они просматривают страницы с отключенными изображениями
  • У них нарушено зрение, и они используют программное обеспечение для преобразования текста в речь
  • У них когнитивные нарушения, и они используют программное обеспечение для преобразования текста в речь
  • Они используют только текстовый браузер
  • Они слушают страницу, читаемую голосовым веб-браузером
  • У них отключены изображения, чтобы сэкономить на загрузке
  • У них проблемы с загрузкой изображений, или источник изображения неверен

Альтернативный текст должен служить функциональной заменой изображению, именно поэтому он является обязательным. Конкретные требования к содержимому alt зависят от функции изображения на странице и его текущего контекста. Чтобы определить подходящую текстовую альтернативу, важно подумать о том, для каких целей изображение было добавлено на страницу:

  • предоставление полезной информации
  • выполнение функции
  • маркировка интерактивных элементов
  • улучшение эстетики
  • дополнение текста
  • декоративный характер
  • и т.д.

В примерах мы рассмотрим некоторые из этих случаев более подробно.

Атрибуты

  • Глобальные атрибуты
  • alt - Замена текста для использования, когда изображения недоступны
  • src - Адрес ресурса
  • srcset - Изображения для использования в различных ситуациях (например, дисплеи с высоким разрешением, маленькие мониторы и т. Д.)
  • sizes - Размеры изображений между точками останова
  • crossorigin - Как элемент обрабатывает запросы на перекрестное происхождение
  • usemap- Название карты изображений для использования
  • ismap - Является ли изображение картой изображений на стороне сервера
  • width - Горизонтальный размер
  • height - Вертикальный размер
  • referrerpolicy - Политика реферера для выборок, инициированных элементом
  • longdesc - URL-адрес, содержащий ссылку на расширенное описание изображения

  • Базовое использование

    Чтобы вставить изображение на страницу достаточно использовать тег <img> и указать путь до него в атрибуте src. Еще одним обязательным атрибутом для изображения является alt, в котором указывается его текстовое описание.

  • Альтернативный текст

    Если по какой-то причине браузер не смог загрузить изображение, то он выведет указанны альтернативный на экран. Для примера давайте намеренно допустим ошибку в пути до изображения.

  • Ширина и высота

    Каждое изображение имеет собственный размер - количество пикселей по горизонтали и вертикали. Именно столько места будет занимать изображение, когда мы вставляем его на страницу.

    Используя атрибуты width и height мы можем управлять шириной и высотой изображения. При этом нам достаточно указать лишь один из размеров, второй будет подсчитан автоматически. Если мы укажем оба размера и их пропорции будут отличаться от исходных размеров изображения, то наше изображение будет искажено.

  • Ссылка или кнопка

    Если изображение используется внутри ссылки <a> или кнопки <button>, которые не имеют своего текстового содержимого, то в качестве альтернативного текста необходимо указывать их назначение.

  • Диаграммы и графики

    Если ваше изображение представляет собой диаграмму, график или другую подобную иллюстрацию, то в качестве альтернативного текста лучшего всего указать подробное описание его данных.

  • Ссылка на описание

    Если ваше изображение имеет описание в самом тексте, то вы можете сослаться на него при помощи атрибута longdesc. В этом случае альтернативный текст можно сократить.

  • Изображение внутри фигуры

    Краткий альтернативный текст может быть использован и в том случае, если ваше изображение располагается внутри тега <figure>, который имеет подробное описание в дочернем теге <figcaption>. Дублировать это описание в атрибут alt не стоит.

  • Изображение в виде текста

    Если ваше изображение содержит только текст и это является его основной целью, то укажите этот текста и в качестве альтернативного.

  • Изображение символа

    Если ваше изображение представляет собой символ, которые не может быть описан при помощи Unicode, то в качестве альтернативного описания достаточно указать его значение. Например, это могут быть изображения смайлов, символов валют и т.д.

    Хотя по возможности, старайтесь избегать таких изображений и используйте Unicode. Если нужного вам символа нет в текущем шрифте, то лучше воспользуйтесь веб-шрифтом.

  • Декоративные изображения

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

  • Контентные изображения

    Очень часто изображения используются внутри контента, чтобы дополнить его тематику или лучше передать атмосферу. Такие изображения могут не описываться в самом тексте, но считать декоративными их тоже нельзя. В этом случае вам нужно описать то, что изображено на картине, как если бы пользователь мог ее увидеть. При этом всегда старайтесь отталкиваться от контекста, в котором находится изображение, чтобы пользователю была понятна цель его размещения.

  • Карта изображения

    Изображение может быть использовано в роли карты изображения. В этом случае у него есть атрибут usemap, который ссылается на элемент <map> с областями <area>. В этом случае альтернативный текст должен присутствовать как у самого изображения, так и у активных областей.

Поделитесь данной записью с друзьями