Альтернативный текст и подпись для изображений с помощью HTML.

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

Причиной этому могут быть:

1) Некоторые пользователи при просмотре веб-страниц могут принудительно отключать показ изображений на веб-страницах. Обычно это делается с целью экономии трафика при работе на слабом канале Интернет.

2) Пользователи могут просматривать ваш сайт на старых мобильных устройствах.

3) У изображения поменялось имя или адрес, либо было удалено.

4) Вы указали ошибочный путь к изображению.

Во всех этих случаях изображение не будет отображаться на веб-странице.

Что в этом случае вместо него выводить браузеру?

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

Атрибут, который отвечает за создание такого альтернативного текста называется:

alt

Вот пример его использования:

<img src="https://webkyrs.info/images/arrow2.jpg" alt="Альтернативный текст для изображения">

Выглядеть описание изображения с атрибутом alt будет примерно вот так (все будет зависеть от конкретного браузера):

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

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

Создать такую надпись можно с помощью атрибута для тэга img, который называется:

title

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

Давайте рассмотрим пример и посмотрим, как это может работать на практике.

<img src="https://webkyrs.info/images/arrow.jpg" title="Описание для изображения">

[wp-js-fiddle url="//jsfiddle.net/dimachen/HkqS7/1/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Наведите на изображение в следующем примере курсор мыши.

Как правило, поисковые системы использует значение атрибута title для того, чтобы индексировать изображения и выдавать их в результатах поиска в своих разделах "Картинки".

Яндекс.Картинки

http://images.yandex.ru

Google.Картинки

http://www.google.com/imghp?hl=ru

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

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

title и alt

Запомните их и используйте там, где это необходимо.