Img html: Атрибут src | htmlbook.ru

— журнал «Доктайп»

• 25 января 2023

Справочник

Нейрокекс

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

Синтаксис тега <img>

<img src="url_of_image_file.jpg" alt="alternative_text">

Спецификация HTML

Тег <img> является частью спецификации HTML Living Standard.

Семантический или нет

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

Примеры использования

Базовое использование:

<img src="image.jpg" alt="Красивый закат">

Изменение размера изображения:

<img src="image.jpg" alt="Красивый закат">

Добавление подписи к изображению:

<figure>
  <img src="image.jpg" alt="Красивый закат">
  <figcaption>Прекрасный закат</figcaption>
</figure>

Добавление границы к изображению:

<img src="image. jpg" alt="Красивый закат">

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

<a href="<https://example.com>"><img src="image.jpg" alt="Красивый закат"></a>

Использование нескольких изображений с разным разрешением:

<picture>
  <source media="(min-width: 650px)" srcset="large_image.jpg">
  <source media=""(min-width: 465px)" srcset="medium_image.jpg">
  <img src="small_image.jpg" alt="Красивый закат">
</picture>

Для чего использовать тег <img>

• Для логотипа на веб-странице.
• Для изображения товара на сайте интернет-магазина.
• Для фотографии автора в блоге.
• Для карты на странице контактов.
• Для адреса или контактной информации компании в виде изображения.
• Для графика или диаграммы на веб-сайте.
• Для фотографии клиентов в разделе с отзывами.

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

src — URL файла изображения.

alt — альтернативный текст для изображения.

width — ширина изображения в пикселях.

height — высота изображения в пикселях.

sizes — размеры изображения для отзывчивого дизайна.

srcset — набор изображений для разных размеров устройства.

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

decoding — метод декодирования изображения.

usemap — карта изображений на стороне клиента.

referrerpolicy — указывает, какую информацию о реферере отправлять при получении изображения.

loading — поведение загрузки изображения.

fetchpriority — приоритет выборки изображения.

ismap — изображение в качестве карты изображений на стороне сервера.

Глобальные атрибуты

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

Ограничения

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

Нюансы

• При использовании тега <img> важно убедиться, что файл изображения существует по указанному URL.
• Изменение размера изображения с помощью атрибутов width и height может привести к его искажению, поэтому лучше изменить размер в редакторе перед загрузкой на сайт.

Поддержка браузерами

Тег <img> поддерживается всеми современными браузерами. Актуальная информация — на сaniuse.

Альтернативные теги

• Тег <svg> — для векторной графики.
• Тег <canvas> — для динамических изображений и пользовательских эффектов.
• Теги <figure> и <figcaption> — для добавления подписей к изображениям.

Чем заменить тег

Прямой замены тегу <img> не существует.

Актуальность

Тег <img> актуален и широко используется в разработке.

Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.

Попробовать

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Справочник по HTML

Основные HTML-теги в 2023 году.

• 31 марта 2023

Глобальные атрибуты HTML

Список основных атрибутов, которые подойдут ко всему.

• 29 марта 2023

Как добавить раздел на страницу. Тег <div>

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

• 25 января 2023

Список описаний. Тег <dl>

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

• 25 января 2023

Пункт выпадающего списка. Тег <option>

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

• 25 января 2023

<ul>

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

• 25 января 2023

<video>

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

• 25 января 2023

<datalist>

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

• 25 января 2023

<caption>

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

• 25 января 2023

Как правильно добавить секцию на страницу. Тег <section>

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

• 25 января 2023

HTML/Элемент img

Синтаксис

HTML

XHTML

<img src="..." alt="...">

Описание

Элемент img (от англ. «image» ‒ «изображение») вставляет изображение в документ. Данный элемент должен быть расположен внутри блочного элемента (например, div, p).

Примечание

Из изображения можно сделать гиперссылку — просто вложив img в элемент гиперссылки.

Поддержка браузерами

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

Спецификация

Верс.	Раздел
HTML
2.0	Image: IMG	Перевод
3.2	IMG — inline images
4.01	13.2 Including an image: the IMG element DTD: Transitional Strict Frameset
5.0	4.7.1 The img element
5.1	4.7.5. The img element
XHTML
1. 0	Extensible HyperText Markup Language DTD: Transitional Strict Frameset
1.1	Extensible HyperText Markup Language

Атрибуты

align

Задаёт выравнивание картинки в документе, в том числе и её обтекание текстом.

alt

Текст описания изображения.

border

Устанавливает ширину рамки вокруг изображения.

crossorigin

Определяет то как элемент обрабатывает crossorigin запросы.

height

Устанавливает высоту изображения.

hspace

Устанавливает боковые отступы от изображения.

ismap

Указывает, что изображение является серверной картой-изображением.

longdesc

URL-адрес документа с полным описанием изображения.

lowsrc

Указывает URL-адрес предварительного изображения.

name

Указывает имя изображения.

sizes

Размеры изображения между контрольными точками.

src

Указывает URL-адрес изображения.

srcset

Изображения для использования в различных ситуациях.

usemap

Присоединяет к изображению клиентскую карту-изображения.

vspace

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

width

Устанавливает ширину изображения.

Глобальные атрибуты

accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

Пример использования

Листинг кода

<!DOCTYPE html>
<html>

Элемент img

Элемент IMG (изображение)

Тег используется для включения встроенной графики (обычно значки или небольшая графика) в HTML-документ. Этот элемент НЕ предназначен для встраивания другого текста HTML. Для крупных фигур с подписи и текстовый поток см. элемент FIG.

Пример:

Браузеры, которые не могут отображать встроенные изображения, игнорируют элемент IMG если он не содержит атрибут ALT. Обратите внимание, что некоторые браузеры могут отображать (или печатать) связанную графику, но не встроенную графику. Если изображение необходимо, вы можете создать ссылку на него, а не поставить его в очередь.

Разрешенные атрибуты

ID

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

LANG

Это одна из сокращений стандартного языка ISO, например «en.uk» для варианта английского языка, на котором говорят в Соединенном Королевстве. Он может использоваться синтаксическими анализаторами для выбора конкретных вариантов языка для кавычки, лигатуры и правила расстановки переносов и т. д. Язык Атрибут состоит из двухбуквенного кода языка из ISO 639., необязательно, за которым следует точка и двухбуквенный код страны из ISO 3166.

CLASS

Это разделенный пробелами список токенов SGML NAME, который используется для подкласса имен тегов. По соглашению имена классов интерпретируется иерархически, с наиболее общим классом слева и наиболее конкретный справа, где классы разделены период. Атрибут CLASS чаще всего используется для присоединения другого стиль к некоторому элементу, но рекомендуется, чтобы там, где практичный класс имена должны быть выбраны на основе семантики элемента, так как это разрешат другие виды использования, такие как ограничение поиска по документам сопоставление имен классов элементов. Правила выбора класса имена выходят за рамки этой спецификации.

SRC (Источник)

Атрибут SRC указывает URI для изображения быть вложенным. Его синтаксис такой же, как и у атрибута HREF тег <А>. СРК обязателен.

MD

Задает дайджест сообщения или криптографическую контрольную сумму для связанная графика, указанная атрибутом SRC. Он используется, когда вы хотите быть уверены, что изображение действительно то же самое, что и задуман автором и никак не изменен. Например, MD=»md5:jV2OfH+nnXHU8bnkPAad/mSQlTDZ», который указывает контрольную сумму MD5. кодируется как строка символов base64. Атрибут MD обычно разрешено для всех элементов, поддерживающих ссылки на основе URI.

WIDTH

Дополнительная предлагаемая ширина изображения. По умолчанию это дается в пикселях.

ВЫСОТА

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

ЕДИНИЦЫ

Этот необязательный атрибут определяет единицы измерения ширины и атрибуты высоты. Это одно из: единиц = пикселей (по умолчанию) или unit=en (половина кегля).

ВЫРАВНИВАНИЕ

Принимать значения ВЕРХ, СРЕДНИЙ или НИЖНИЙ, определяя следует ли выравнивать верхнюю, среднюю или нижнюю часть изображения. с базовой линией для текстовой строки, в которой появляется элемент IMG.

При ALIGN=LEFT графика будет перемещаться вниз и вверх к текущему левое поле, а последующий текст будет обтекать правую сторону графика. Аналогично для ALIGN=RIGHT графика выравнивается с текущим правое поле и, и текст обтекает левое. Неуместно используйте эту функцию для больших изображений, так как они лучше всего представлены с помощью элемент ФИГ.

ALT (альтернативный текст)

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

ISMAP

Карта изображений — это графическая карта, с помощью которой пользователи могут прозрачно перемещаться от одного информационного ресурса к другому. Атрибут ISMAP идентифицирует изображение как карту изображения. IMG-элемент затем может использоваться как часть метки для гипертекстовой ссылки (см. анкерный элемент). Когда пользователь нажимает на изображение, местоположение нажимается отправляется на сервер, указанный гипертекстовой ссылкой.

Например:

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

• Сервер может разрешить загрузку и обработку карты изображения локально. Это должно работать с устаревшими документами, созданными с использованием более ранних версии HTML.
• Использование формата изображения, который включает горячие зоны изображения как часть формат файла.
• Элемент FIG обеспечивает клиентские карты изображений как унифицированную часть описания рисунка. Он предлагает ряд преимуществ по сравнению с IMG, включая подписи, разметку в замещающем тексте и текстовое обтекание рисунков.

img HTML — W3schools

by

Тег HTML

Для отображения изображения на веб-странице используется тег HTML . Это пустой тег без закрывающего тега. Пустой тег в HTML обычно содержит только атрибуты.

Атрибуты:

Источник:

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

Пример:

 

<голова>


<тело>


 

Вывод:

Объяснение:

В приведенном выше примере атрибут «src» тега HTML используется для отображения изображения «img_girl.jpg». Поскольку высота и ширина изображения не указаны, следовательно, изображение отображается в полном размере.

alt:

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

Пример:

 

<голова>


<тело>
 
Изображение
 


 

Вывод:

Объяснение:

В приведенном выше примере «src» Атрибут тега используется для отображения файла «girl.jpg », а атрибут «alt» тега используется для указания альтернативного текста для изображения. Теперь, поскольку изображения не существует, отображается значение атрибута alt.

ширина:

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

Пример:

 

<голова>


<тело>
 
Изображение
 

Вывод:

Объяснение:

В приведенном выше примере атрибут «src» элемента используется для отображения изображения «girl.jpg» и Атрибут «alt» тега используется для указания альтернативного текста для изображения. Поскольку ширина изображения указана, поэтому изображение отображается с указанной шириной. Соответственно изменяется и высота изображения.

высота:

Используется для указания высоты изображения. Это также обычно не требуется, поскольку разработчики обычно используют CSS для достижения всех этих целей.

Пример:

 

<голова>


<тело>
 
Изображение
 


 

Вывод:

Объяснение:

В приведенном выше примере атрибут «src» тега используется для отображения «девушки. jpg» и «alt Атрибут тега используется для указания альтернативного текста для изображения. Поскольку указаны и ширина, и высота изображения, следовательно, изображение отображается в указанном размере.

Чтобы получить изображение из другого каталога/папки:

Пример:

 

<голова>


<тело>
 
Изображение
 


 

Вывод:

Объяснение: