Различные типы изображений в Web - содержательные и фоновые изображения
Существует два основных способа добавления изображений в документ: содержательные изображения с помощью элемента img и фоновые изображения, применяемые к элементам с помощью CSS. Когда что использовать зависит от того, что вы хотите делать:
Если изображение является критически важным для содержания документа, например, фотография автора или график, показывающий некоторые данные, то оно должно быть добавлено как элемент img с подходящим альтернативным текстом.
Если изображение присутствует как "украшение", необходимо использовать фоновые изображения CSS. Причина в том, что эти изображения не должны иметь альтернативный текст (какая польза от "круглый зеленый угол с миганием" для слепого?), и имеется значительно больше возможностей, чтобы выполнить оформление изображения в CSS, чем в HTML.
Элемент img и его атрибуты
С помощью элемента img очень легко добавить изображение в документ HTML. Следующий документ HTML (inlineimageexample.html в файле zip) выводит фотографию balconyview.jpg в браузере (при условии, что изображение находится в той же папке, что и документ HTML).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example of an inline image</title>
</head>
<body>
<img src="balconyview.jpg">
</body>
</html>
Если выполнить этот код в браузере, то будет получен вывод, показанный на рисунке 17.1.
Рис. 17.1. Изображение, как оно выводится в браузере
Создание альтернативного текста с помощью атрибута alt
Этот вывод изображения работает прекрасно, однако, он является недопустимым HTML, так как элемент img должен иметь атрибут alt. Этот атрибут содержит текст, который выводится, если изображение недоступно по каким-то причинам. Изображение может быть недоступно, так как его невозможно найти, загрузить или потому что агент пользователя (обычно браузер) не поддерживает изображения. Кроме того, люди с недостатками зрения используют вспомогательные технологии для чтения Web-страниц. Эти технологии считывают содержимое атрибутов alt элементов img своим пользователям. Поэтому важно написать хороший альтернативный текст для описания содержимого изображения и поместить его в атрибут alt.
В сети Web можно найти множество текстов, говорящих о "тегах alt". Это фактически неверно, так как не существует тега (или элемента) с таким именем. Это атрибут элемента img, крайне полезный как для доступности, так и для оптимизации поисковых машин.
Чтобы сделать изображение понятным каждому, необходимо добавить подходящий альтернативный текст, например, в данном случае "View from my balcony, showing a row of houses, trees and a castle" ("Вид с балкона … ")(inlineimageexamplealt.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example of an inline image</title>
</head>
<body>
<img src="balconyview.jpg" alt="View from my balcony, showing a row of houses, trees and a castle">
</body>
</html>
Атрибут alt содержит текст, который должен выводиться, когда изображение недоступно. Информация в атрибуте alt не должна выводиться, когда изображение было успешно загружено и показано; Internet Explorer считает это неправильным, и показывает ее как всплывающую подсказку, когда указатель мыши перемещается на изображение на некоторое время. Это ошибка, так как ведет к тому, что множество людей добавляют информацию об изображении в атрибут alt. Если вы хотите добавить информацию, необходимо использовать вместо этого атрибут title, к рассмотрению которого мы переходим в следующем разделе.