Тег Img для вставки изображений в HTML

HTML-код вставки является этапом оптимизации изображений, т. к. может влиять на их отображение, а также на ранжирование как самого изображения, так и всей веб-страницы в поисковой выдаче.

Вставка изображений в HTML

На что может влиять HTML-код изображений?

Наличие и качество оформления картинок на веб-страницах могут повлиять на их восприятие не только живыми пользователями, но и поисковыми роботами. В частности, HTML-код вставки картинки может влиять на:

Релевантность и ранжирование изображения и контента
Это обеспечивается правильным применением атрибутов Alt и Title тега img, а также другими особенностями вставки картинок в HTML-код.
Отображение картинки на веб-странице
Условия, влияющие на отображение картинок, могут отличаться в зависимости от настроек браузера, размеров экрана устройства вывода, скорости передачи данных.

HTML-тег <img>

Для вставки картинки в HTML применяется одинарный тег img с указанием обязательных по стандарту атрибутов src и alt:

<!-- код вставки картинки в HTML: -->
<img src="/image.jpg" alt="[альтернативный текст]" />

После вставки данного тега в HTML-код на веб-странице будет отображено изображение, размещенное по указаному пути (в атрибуте src) в своём реальном геометрическом размере (если он не задан атрибутами width и height тега img или соответствующими CSS-свойствами). Например:

Картинка, вставленная в HTML с помощью тега Img

Тег img является строчным HTML-элементом. Это значит, что он может применяться внутри текста и к нему применимы соответствующие CSS-свойства (такие как text-align и vertical-align), но не применимы свойства для блочных элементов (например, картинку нельзя выровнять по центру с помощью свойства margin: auto).

К HTML-тегу img применяются следующие атрибуты:

Атрибут Src тега <img>

Атрибут src должен содержать прямой или относительный путь к изображению:

<img src="/image.jpg" alt="" />
<!-- или -->
<img src="/seoportal.net/image.jpg" alt="" />

Атрибут Alt тега <img>

В качестве значения атрибута alt указывается альтернативный текст для изображения, отображаемый в случае проблем с отображением самой картинки. Если в альтернативном тексте нет необходимости, то следует оставлять пустое значение атрибута:

<img src="/image.jpg" alt="" />

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

Атрибут Title тега <img>

В качестве значения атрибута title указывается текст, отображаемый при наведении на картинку в качестве всплывающей подсказки:

<img src="/image.jpg" alt="" title="Всплывающая подсказка" />

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

Наведите курсор на изображение

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

Атрибуты Width и Height тега <img>

С помощью атрибутов width (ширина) и height (высота) можно задавать геометрический размер отображения картинки на веб-странице. В HTML5 значение данных атрибутов может указываться в виде положительных чисел, выраженных в пикселях (для обоих атрибутов) или процентах (для атрибута width) от размера родительского элемента:

<img src="/image.jpg" width="100" height="100" alt="" />
<!-- или -->
<img src="/image.jpg" width="100px" height="100px" alt="" />
<!-- или -->
<img src="/image.jpg" width="100%" alt="" />

При применении только одного из указанных атрибутов значение второй величины регулируется автоматически с сохранением пропорций изображения.

Указание размера картинки ускоряет скорость загрузки веб-страницы, сообщая браузеру данную информацию.

Для стилизации изображений на сайте, в том числе для указания их размеров можно применять CSS-свойства:

  • width (ширина),
  • height (высота)
  • max-width (максимальная ширина),
  • max-height (максимальная высота),
  • min-width (минимальная ширина),
  • min-height (минимальная высота).

Для указания размеров картинок на сайте рекомендуется применять CSS-свойства.

Пример указания размера картинки с помощью CSS в HTML-коде:

<img src="/image.jpg" style="width:100px" alt="" />

Атрибут Border тега <img>

Атрибут border должен содержать значение толщины границы вокруг изображения. Стиль и цвет границы определяется посредством CSS:

border-style: solid
border-style: dotted
border-style: dashed
border-style: double

Атрибут border является устаревшим, вместо него следует применять CSS-свойство border или другие соответствующие свойства с префиксом border-.

Атрибут Align тега <img>

Атрибут align применяется для выравнивания картинки относительно текста и других строчных элементов:

align=left
align=left

Атрибут align является устаревшим, вместо него следует применять CSS-свойства.

Как вставить картинку в HTML?

Как вставить картинку в HTML-страницу?

Чтобы добавить картинку в HTML применяется тег img.

Как вставить картинку в таблицу в HTML?

HTML-код вставки изображения в ячейку таблицы может выглядеть следующим образом:

<table>
	<tr>
		<td>
		<img src="/image.jpg" alt="" />
		</td>
	</tr>
</table>

Как вставить картинку в HTML в блокноте?

Для этого достаточно открыть необходимый HTML-файл в блокноте и в нужном месте прописать тег вставки изображения, в атрибуте src которого следует указать путь к файлу.

Как вставить картинку в качестве фона?

Чтобы применить изображение в качестве фона применяются CSS-свойства background и background-image. Тег <img> для таких целей применять не целесообразно.

Как вставить ссылку в картинку?

Для этого необходимо разместить тег <img> в тег a:

<a href="/seoportal.net">
	<img src="/image.jpg" alt="" />
</a>

В результате в качестве анкора ссылки будет применено указанное изображение.

Как вставить картинку по центру?

Чтобы выровнять изображение по центру веб-страницы применяются CSS-свойства.

Т. к. img является строчным HTML-элементом, можно прописать родительскому элементу изображения CSS-свойство text-align со значением center:

<p style="text-align:center">
	<img src="/image.jpg" alt="" />
</p>

Также можно переопределить свойства тега img, сделав его блочным с помощью CSS-свойства display со значением block. В результате к элементу изображения можно применить стандартный способ выравнивания блочных элементов по центру:

<img src="/image.jpg" alt="" style="display:block; margin: auto" />

Ссылки

Автор:
Оцените материал:
5.0/5

Комментарии  

zik123123 +1
Привет прикольно, мне нравится
07.01.2021 15:05 Ответить

Добавить комментарий