Для встраивания изображения в документ используется элемент <img>, имеющий два обязательных атрибута — src и alt. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив <img> внутрь <a>.
Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выполняющие функцию ссылки. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.
Далее описаны атрибуты элемента <img>, отвечающие за отображение изображений и их характеристики.
alt. Устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке поисковикам и другим автоматизированным системам, которые пока не распознают изображения. В качестве значения атрибута alt служит любая подходящая текстовая строка. Если она содержит пробелы, то её обязательно надо брать в двойные или одинарные кавычки.
height и width. Для изменения размеров изображения средствами HTML предусмотрены атрибуты height и width. Допускается использовать значения в пикселях или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится элемент <img>. В случае отсутствия родительского контейнера, его роль играет окно браузера. Иными словами, width=100% означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного атрибута width или height сохраняет пропорции и соотношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.
Старайтесь задавать размеры всех изображений на веб-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения. Ширину и высоту изображения можно менять как в меньшую, так и в большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Поэтому с осторожностью уменьшайте изображение, т. к. это может вызвать недоумение у читателей, отчего такой маленький рисунок так долго загружается. А вот увеличение размеров приводит к обратному эффекту — размер изображения велик, но файл относительно изображения аналогичного размера загружается быстрее, хотя качество рисунка при этом ухудшается.
src. Адрес графического файла, который будет отображаться на веб-странице. В качестве значения принимается полный или относительный путь к файлу.
Добавление изображения на страницу с учётом этих атрибутов продемонстрировано в примере 1.
Пример 1. Использование <img>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Изображения</title>
</head>
<body>
<img src="image/redcat.jpg" alt="Рыжая кошка" width="500" height="375">
</body>
</html>
Если после добавления изображения оно не отображается на веб-странице, проверьте следующие моменты.
- Имя файла должно писаться с учётом регистра. Операционная система Linux, на базе которой преимущественно устанавливается хостинг, щепетильно относится к именам файлов, поэтому файлы img.png, IMG.png и Img.png воспринимаются как разные. Чтобы указанная особенность не привела к ошибкам с отображением рисунков, всегда задавайте имена файлов в нижнем регистре. Иными словами пишите их маленькими буквами.
- Графические файлы с русскими символами в названиях файлов не всегда корректно отображаются в браузерах. Лучше использовать для этого латинские символы.