Изображения

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

Содержание



Элемент <img />

Элемент <img /> пустой, поэтому он записывается в виде одиночного тега:

У элемента <img /> есть два обязательных атрибута: alt и src и необязательный атрибут lowsrc. Сейчас мы их и рассмотрим.

Источник изображения — атрибут src

Атрибут src указывает путь к файлу, который добавляется на Web-страницу. Например, так можно добавить на Web-страницу файл «fade.png»:

Понятно, что если путь к файлу не указан, предполагается, что он находится в текущей папке.

Если в текущей папке есть папка «images» с файлом «fade.png», для добавления его на Web-страницу следует написать такой код:

Заменяющий текст — атрибут alt

В среднем, до 25% рисунков не отображается. Обычно это связано с проблемными линиями связи. Для рекламных картинок — баннеров — причина зачастую кроется в перегрузке сервера. Иногда картинка просто отсутствует либо не может быть отображена обозревателем. Во всех таких случаях на месте изображения будет находиться заменяющий текст.

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

Даже после окончания загрузки заменяющий текст играет роль. Он отображается как всплывающая подсказка к картинке.

В атрибуте alt указывается краткое и ёмкое описание изображения. Текста, приведённого в атрибуте, должно быть достаточно для принятия решения о том, следует ли загружать изображение.

Атрибут alt является обязательным и должен присутствовать во всех элементах <img />.

Компактный вариант — атрибут lowsrc

Человек сохраняет заинтересованность в течение 10–15 секунд. Если за эти несколько секунд Вы не сумеете убедить своего посетителя в важности своего ресурса, Вы рискуете этого посетителя потерять.
Для избежания этого неприятного явления Вам необходимо сделать начало страницы максимально интересным и обеспечить его быструю загрузку. То есть, в течение 10 секунд от начала загрузки на странице должны быть элементы, дающее о ней представление, и хотя бы первые абзацы текста.

Немалую роль играет и расположение на таком «быстром» варианте страницы низкокачественных изображений, которые дадут представление о более качественных, но и более объёмных иллюстрациях.

Низкокачественный вариант изображения задаётся атрибутом lowsrc. Как значение этого атрибута указывается путь к файлу с низкокачественной, значит маленькой по объёму версией картинки. Этот вариант будет отображаться до окончания полной загрузки страницы, после чего будет заменён более качественным изображением.

Вы не сможете просмотреть этот эффект на домашнем компьютере, так как высококачественное изображение будет загружено с жёсткого диска за доли секунды.

Использование атрибута lowsrc желательно для больших рисунков, которые будут грузиться несколько минут.

Графические ссылки

Для того, чтобы сделать изображение ссылкой, его необходимо разместить между тегами элемента <a>. Например, таким образом можно сделать ссылку на поисковую службу «Рамблер»:

То есть, мы расположили изображение внутри тегов ссылки.


Похожие материалы:

Оставить комментарий