Как вставить изображение на сайт

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

Для добавления изображения на страницу с HTML разметкой существует специальный тег <img>, но том, как им пользоваться, знают далеко не все. В рамках данной статьи мы приведем инструкции с методами работы с данным инструментов и расскажем, какие атрибуты он поддерживает.

Вставка изображения на страницу в HTML

Как сказано выше, для вставки картинки применяется тег <img>, и разметке HTML он выглядит вот так:

<img src="/img/logo.webp">

Так он обозначен в XHTML:

<img src="/img/logo.webp" />

Разница только в слеше (косой линии), вставляемой в конце. Однако это лишь топорная, быстрая вставка изображения без каких-либо атрибутов.
Так тег используется с рекомендуемым атрибутом alt:

<img src="/img/logo.webp" alt="Логотип">

Таким образом, в момент неполной прогрузки сообщения демонстрируется ссылка на файл.
Далее речь пойдет обо всех возможных атрибутах тега <img>.

Список существующих атрибутов тега <img> в HTML

Помните, чтобы выставить тот или иной атрибут изображению, нужно использовать пробел.
SRC — данный атрибут содержит адрес используемой картинки. Ссылка может быть абсолютной, если изображение находится на вашем сайте, и относительной, в случае, если файл расположен на другом ресурсе. Поддерживаются как распространенные, так и менее популярные форматы, включая стандартные PNG, BMP, JPG и даже Base64.
Вот как выглядит код если нужно применить тег с абсолютным адресом:

<img src="https://example.com/img/logo.webp" />

Вот его вид с относительной ссылкой:

<img src="/img/logo.webp" />
ALT — у этого атрибута задача проста — он показывает текст с подсказкой в случае если изображение не появилось или повредилось:

<img src="/img/logo.webp" alt="Логотип" />
ALIGN — выравнивает изображение в зависимости от расположения текста, но в HTML 5 не поддерживается:

<img src="/img/logo.webp" align="right" />
BORDER — выставляет ширину рамки вокруг картинки. Также не поддерживается в HTML 5. Пример:

<img src="/img/logo.webp" border="2px" />
HEIGHT — выставляет высоту изображения в величинах px, % и т.д:

<img src="/img/logo.webp" height="200px" />
WIDTH — ширина изображения, выставляемая в тех же величинах, что и предыдущие атрибуты:

<img src="/img/logo.webp" width="200px" />
HSPACE — устанавливает горизонтальный отступ:

<img src="/img/logo.webp" hspace="20px" />
VSPACE — определяет вертикальный отступ от картинки:

<img src="/img/logo.webp" vspace="20px" />
В HTML 5, как и некоторые вышеупомянутые атрибуты, не поддерживается.
LONGDESC — содержит ссылку с дополнительным TXT файлом, в котором находится расширенное описание картинки. По аналогии с атрибутом SRC его адрес может быть относительным или абсолютным:

<img src="/img/logo.webp" longdesc="/img/desc-logo.txt" />
CROSSORIGIN — атрибут, с помощью которого использовав кросс-доменный запрос можно вставить картинку, расположенную на любом другом ресурсе. Имеет несколько значений. Пример:

<img src="https://example.com/img/logo.webp" crossorigin="anonymous" />
SRCSET — использование атрубита выводит общий список файлов, который располагается в зависимости от заданных параметров величины, ширины или плотности экрана:

<img src="/img/logo.webp" srcset="/img/logo-min.webp 320w, /img/logo-mid.webp 480w, /img/logo-full.webp 768w" /> <img src="/img/logo.webp" srcset="/img/logo-mid.webp 2x" />

SIZES — регулирует размер картинок, параметры которых указаны в атрибуте srcet:

<img src="/img/logo.webp" srcset="/img/logo-min.webp 320w, /img/logo-full.webp 768w" sizes="(max-width: 600px) 300px, (min-width: 600px) 600px" />

Принцип работы следующий: в случае, если разрешение дисплея, с которого просматривается страница, ниже значения 600 px, задается ширина картинки не более 300 px, и наоборот. Стоит помнить, что описанные атрибуты не имеют поддержки обозревателей на платформах Android, и некорректно отображаются в IE (Internet Explorer).

USERMAP — атрибут связывает картинку с картой, заданной в параметрах <map>:

<img src="/img/logo.webp" usemap="#my_point">
ISMAP — при использовании инструмент связывает картинку с одной из областей серверной карты. Пример использования в HTML:

<a href="/map/ismap.php"> <img src="/img/logo.webp" ismap> </a>

Так тег применяется в XHTML:

<a href="/map/ismap.php"><img src="/img/logo.webp" ismap="ismap" /></a>

Кроме прочего, <map> поддерживает атрибуты Class и iD, и через него напрямую может быть произведено встраивание стилей:

<img src="/img/logo.webp" style="width: 200px; border: 0" />

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

Как вставить изображение (картинку) в таблицу?

Куда бы вы не хотели вставить картинку, принцип работы с кодом будет один и тот же:
<table>
<tbody>
<tr>
<td>Наш логотип:</td>
<td><code><img src="/img/logo.webp" alt="Логотип" />
</code></td>
</tr>
</tbody>
</table>
Как видим, всё просто. Изображение может быть вставлено и в таблицу, и в блок div — во всех случаях алгоритм не меняется.

Как сделать изображение (картинку) ссылкой в HTML?

Если вы хотите, чтобы изображение стало кликабельным и по нажатию осуществлялось перенаправление на страницу вашего или любого другого сайта, следует обернуть её в тег <a>:

<a title="О нас" href="/about"><img src="/img/logo.webp" alt="Логотип" /></a>
Кроме банального перенаправления, изображение может быть использовано как якорь.