HTML тег <img>

  • Предыдущая страница <iframe>
  • Следующая страница <input>

Определение и использование

<img> Тег используется для внедрения изображений в веб-страницы.

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

<img> Тег имеет два необходимых атрибута:

  • src - Определяет путь к изображению
  • alt - Если по какой-либо причине изображение не может быть отображено, следует указать альтернативный текст изображения

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

Совет:Чтобы связать изображение с другим документом, просто установите <img> Тег вложен в <a> Внутри тега (см. примеры ниже).

См. также:

Уроки HTML:HTML изображение

Руководство по HTML DOM:Объект Image

Уроки CSS:Настройка стиля изображения

Дополнительное чтение:Как правильно использовать изображения

Пример

Пример 1

В следующем примере мы вставляем в страницу изображение нарциссов, снятое инженерами CodeW3C.com в Шанхайском парке цветов:

<img src="tulip.jpg" alt="Шанхайский парк цветов - тюльпаны" />

Попробуйте сами

Шанхайский цветочный порт - тюльпаны

Пример 2

Другой пример вставки изображения:

<img src="dancer.png" alt="Танцор" width="500" height="749">

Попробуйте сами

Совет:Более подробные примеры предоставлены в нижней части страницы.

Атрибут

Атрибут Значение Описание
alt Текст Определяет альтернативный текст изображения.
crossorigin
  • anonymous
  • use-credentials
 Разрешает использование изображений из третьих сторон, доступных для跨доменного доступа, вместе с изображением (canvas).
height Пиксели Определяет высоту изображения.
ismap ismap Определяет изображение как серверную карту изображений.
loading
  • eager
  • lazy
 Определяет, должен ли браузер немедленно загружать изображение или отложить загрузку до тех пор, пока не будут выполнены某些 условия.
longdesc URL Определяет URL, указывающий на детальное описание изображения.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • unsafe-url
 Определяет информацию о ссылке, которую следует использовать при загрузке изображения.
sizes Размер Определяет размер изображений для различных макетов страниц.
src URL Определяет путь к изображению.
srcset URL-list Определяет список файлов изображений, используемых в различных ситуациях.
usemap #mapname Определяет изображение как клиентскую карту изображений.
width Пиксели Определяет ширину изображения.

Глобальные свойства

<img> Теги также поддерживают Глобальные свойства в HTML.

свойства событий

<img> Теги также поддерживают Свойства событий в HTML.

Более сложные примеры

Пример 3

Выравнивание изображений (используя CSS):

<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:bottom">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:middle">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:top">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:right">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:left">

Попробуйте сами

Пример 4

Добавить рамку к изображению (используя CSS):

<img src="flower.gif" alt="[#1#]" style="border:5px solid black">

Попробуйте сами

Пример 5

Добавить левый и правый отступы к изображению (используя CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:0px 50px">

Попробуйте сами

Пример 6

Добавить верхние и нижние отступы к изображению (используя CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:50px 0px">

Попробуйте сами

Пример 7

Как вставить изображение из другой папки или с другого сайта:

<img src="/photo/flower.gif" alt="Flower" width="180" height="180">
<img src="https://www.codew3c.com/photo/tree.png" alt="Tree" width="150" height="161">

Попробуйте сами

Пример 8

Как добавить гиперссылку на изображение:

<a href="https://www.codew3c.com">
<img src="w3logo.png" alt="codew3c.com" width="400" height="225">
</a>

Попробуйте сами

Пример 9

Как создать изображение-карту с кликабельными областями. Каждая область является гиперссылкой:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

Попробуйте сами

Дополнительное чтение - как правильно использовать изображения

Одной из наиболее заметных особенностей HTML и XHTML является возможность включения изображений в текст документа, как внутренние объекты документа (внутренние изображения), так и как отдельные документы, доступные для загрузки через гиперссылки, или как фон документа.

Рациональное включение изображений в контент документа (статические или анимированные иконки, фотографии, инструкции, иллюстрации и т.д.) делает документ более живым и интересным, а также более профессиональным и информативным, легко читаемым. Также можно сделать изображение визуальным указателем для гиперссылки.

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

Пожалуйста, прочитайте следующую статью, чтобы узнать о двух основных форматах изображений в Интернете: GIF и JPEG, а также как правильно использовать изображения:

Стандартные настройки CSS

Большинство браузеров будут отображать следующие значения по умолчанию <img> Элемент:

img {
  display: inline-block;
}

Попробуйте сами

Поддержка браузеров

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка
  • Предыдущая страница <iframe>
  • Следующая страница <input>