Изображение html теги: Тег | htmlbook.ru

Leave a Comment / Html / By /

Содержание

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
1.0+1.0+1.0+1.0+1.0+1.0+1.0+

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

HTML:3.24.015.0XHTML:1.01.1

Описание

Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border=»0″ в тег <img>.

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

Синтаксис

HTML
<img src="URL" alt="альтернативный текст">
XHTML
<img src="URL" alt="альтернативный текст" />

Атрибуты

align
Определяет как рисунок будет выравниваться по краю и способ обтекания текстом.
alt
Альтернативный текст для изображения.
border
Толщина рамки вокруг изображения.
height
Высота изображения.
hspace
Горизонтальный отступ от изображения до окружающего контента.
ismap
Говорит браузеру, что картинка является серверной картой-изображением.
longdesc
Указывает адрес документа, где содержится аннотация к картинке.
lowsrc
Адрес изображения низкого качества.
src
Путь к графическому файлу.
vspace
Вертикальный отступ от изображения до окружающего контента.
width
Ширина изображения.
usemap
Ссылка на тег <map>, содержащий координаты для клиентской карты-изображения.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег IMG</title>
 </head>
 <body> 

  <p><a href="lorem.html"><img src="images/girl.png" 
  alt="lorem"></a>
  Lorem ipsum dolor sit amet...</p>

 </body>
</html>

Изображение в качестве ссылки | htmlbook.ru

Кроме текста, в качестве ссылок можно использовать и рисунки. Изображение в этом случае надо поместить между тегами <a> и </a>, как показано в примере 1.

Пример 1. Создание рисунка-ссылки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ссылка</title>
 </head>
 <body> 
   <p><a href="sample.html"><img src="images/sample.gif" 
   alt="Пример"></a></p>
 </body> 
</html>

Атрибут href тега <a> задает путь к документу, на который указывает ссылка, а src тега <img> — путь к графическому файлу.

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

Чтобы убрать рамку, следует у тега <img> установить атрибут border=»0″ (пример 2).

Пример 2. Удаление рамки вокруг изображения

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ссылка</title>
 </head>
 <body>
   <p><a href="sample.html"><img src="images/sample.gif" 
   border="0" alt="Пример"></a></p>
 </body> 
</html>

Можно также воспользоваться CSS, чтобы убрать рамку для всех изображений, которые являются ссылками. Для этого применяется стилевое свойство border cо значением none (пример 3).

Пример 3. Использование CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ссылка</title>
  <style type="text/css">
    A IMG { border: none; }
  </style>
 </head>
 <body>
  <p><a href="sample.html"><img src="images/sample.gif" 
  alt="Пример"></a></p>
 </body>
</html>

Конструкция A IMG определяет контекст применения стилей — только для тега <img>, который находится внутри контейнера <a>. Поэтому изображения в дальнейшем можно использовать как обычно.

Атрибут width | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
1.0+1.0+1.0+1.0+1.0+1.0+1.0+

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

HTML:3.24.015.0XHTML:1.01.1

Описание

Для изменения размеров изображения средствами HTML предусмотрены атрибуты height и width. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится тег <img>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного атрибута width или height сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.

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

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

Синтаксис

HTML
<img>
XHTML
<img />

Значения

Любое целое положительное число в пикселах или процентах.

Значение по умолчанию

Исходная ширина изображения.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег IMG, атрибут width</title>
 </head>
 <body>

  <p><img src="images/sample.gif"
    alt=""></p>

 </body>
</html>

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
1.0+1.0+1.0+1.0+1.0+1.0+1.0+

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

HTML:3.24.015.0XHTML:1.01.1

Описание

Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border=»0″ в тег <img>.

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

Синтаксис

HTML
<img src="URL" alt="альтернативный текст">
XHTML
<img src="URL" alt="альтернативный текст" />

Атрибуты

align
Определяет как рисунок будет выравниваться по краю и способ обтекания текстом.
alt
Альтернативный текст для изображения.
border
Толщина рамки вокруг изображения.
height
Высота изображения.
hspace
Горизонтальный отступ от изображения до окружающего контента.
ismap
Говорит браузеру, что картинка является серверной картой-изображением.
longdesc
Указывает адрес документа, где содержится аннотация к картинке.
lowsrc
Адрес изображения низкого качества.
src
Путь к графическому файлу.
vspace
Вертикальный отступ от изображения до окружающего контента.
width
Ширина изображения.
usemap
Ссылка на тег <map>, содержащий координаты для клиентской карты-изображения.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег IMG</title>
 </head>
 <body> 

  <p><a href="lorem.html"><img src="images/girl.png" 
  alt="lorem"></a>
  Lorem ipsum dolor sit amet...</p>

 </body>
</html>

HTML-изображения

HTML-изображения добавляются на веб-страницы с помощью элемента <img>. Использование графики делает веб-страницы визуально привлекательнее. Изображения помогают лучше передать суть и содержание веб-документа.

Элементы <map> и <area> позволяют создавать карты-изображения с активными областями.

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

1. Элемент <img>

Элемент <img> представляет изображение и его резервный контент, который добавляется с помощью атрибута alt. Так как элемент <img> является строчным, то рекомендуется располагать его внутри блочного элемента, например, <p> или <div>.

Элемент <img> имеет обязательный атрибут src, значением которого является абсолютный или относительный путь к изображению:

<img src="image.png" alt="Пример кода">

Для элемента <img> доступны следующие атрибуты:

Таблица 1. Атрибуты элемента <img>
АтрибутОписание, принимаемое значение
altАтрибут alt добавляет альтернативный текст для изображения. Выводится на месте появления изображения до его загрузки или при отключенной графике, а также выводится всплывающей подсказкой при наведении курсора мыши на изображение.
Синтаксис: alt="описание изображения".
crossoriginАтрибут crossorigin позволяет загружать изображения с ресурсов другого домена с помощью CORS-запросов. Изображения, загруженные в холст с помощью CORS-запросов, могут быть использованы повторно. Допускаемые значения:
anonymous — Cross-origin запрос выполняется с помощью HTTP-заголовка, при этом учетные данные не передаются. Если сервер не даёт учетные данные серверу, с которого запрашивается контент, то изображение будет испорчено и его использование будет ограничено.
use-credentials — Cross-origin запрос выполняется с передачей учетных данных.
Синтаксис: crossorigin="anonymous".
heightАтрибут height
задает высоту изображения в px.
Синтаксис: height="300".
ismapАтрибутismap указывает на то, что картинка является частью изображения-карты, расположенного на сервере (изображение-карта — изображение с интерактивными областями). При нажатии на изображение-карту координаты передаются на сервер в виде строки запроса URL-адреса. Атрибут ismap допускается только в случае, если элемент <img> является потомком элемента <a> с действительным атрибутом href.
Синтаксис: ismap.
longdescURL расширенного описания изображения, дополняющее атрибут alt.
Синтаксис: longdesc="http://www.example.com/description.txt".
srcАтрибут src задает путь к изображению.
Синтаксис: src="flower.jpg".
sizesЗадаёт размер изображения в зависимости от параметров отображения. Работает только при заданном атрибуте srcset. Значением атрибута является одна или несколько строк, указанных через запятую.
srcsetСоздаёт список источников для изображения, которые будут выбраны, исходя из разрешения экрана. Может использоваться вместе или вместо атрибута src. Значением атрибута является одна или несколько строк, разделенных запятой.
<img src="flower.jpg"
     srcset="
       img/flower-mobile.jpg 320w,
       img/flower-wide-mobile.jpg 480w,
       img/flower-tablet.jpg 768w,
       img/flower-desktop.jpg 1024w,
       img/flower-hires.jpg 1280w"
    
     alt="Роза в моём саду">
usemapАтрибут usemap определяет изображение в качестве карты-изображения. Значение обязательно должно начинаться с символа #. Значение ассоциируется со значением атрибута name или id элемента <map> и создает связь между элементами <img> и <map>. Атрибут нельзя использовать, если элемент <map> является потомком элемента <a> или <button>.
Синтаксис: usemap="#mymap".
widthАтрибут width задает ширину изображения в px.
Синтаксис: width="500".
1.1. Адрес изображения

Адрес изображения может быть указан полностью (абсолютный URL), например: url(http://anysite.ru/images/anyphoto.png)

Или же через относительный путь от документа или корневого каталога сайта:

  • url(../images/anyphoto.png) — относительный путь от документа,
  • url(/images/anyphoto.png) — относительный путь от корневого каталога.

Это интерпретируется следующим образом:

  • ../ — означает подняться вверх на один уровень, к корневому каталогу,
  • images/ — перейти к папке с изображениями,
  • anyphoto.png — указывает на файл изображения.
1.2. Размеры изображения

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

1.3. Форматы графических файлов
  • Формат JPEG (Joint Photographic Experts Group). Изображения JPEG идеальны для фотографий, они могут содержать миллионы различных цветов. Сжимают изображения лучше GIF, но текст и большие площади со сплошным цветом могут покрыться пятнами.
  • Формат GIF (Graphics Interchange Format). Идеален для сжатия изображений, в которых есть области со сплошным цветом, например, логотипов. GIF-файлы позволяют установить один из цветов прозрачным, благодаря чему фон веб-страницы может проявляться через часть изображения. Также GIF-файлы могут включать в себя простую анимацию. GIF-изображения содержат всего лишь 256 оттенков, из-за чего изображения выглядят пятнистыми и нереалистичного цвета, как плакаты.
  • Формат PNG (Portable Network Graphics). Включает в себя лучшие черты GIF- и JPEG-форматов. Содержит 256 цветов и дает возможность сделать один из цветов прозрачным, при этом сжимает изображения в меньший размер, чем GIF-файл.
  • Формат APNG (Animated Portable Network Graphics). Формат изображения, основанный на формате PNG. Позволяет хранить анимацию, а также поддерживает прозрачность.
  • SVG (Scalable Vector Graphics). SVG-рисунок состоит из набора геометрических фигур, описанных в формате XML: линия, эллипс, многоугольник и т.п. Поддерживается как статичная, так и анимированная графика. Набор функций включает в себя различные преобразования, альфа-маски, эффекты фильтров, возможность использования шаблонов. Изображения в формате SVG могут изменяться в размере без снижения качества.
  • Формат BMP (Bitmap Picture). Представляет собой несжатое (оригинальное) растровое изображение, шаблоном которого является прямоугольная сетка пикселей. Bitmap-файл состоит из заголовка, палитры и графических данных. В заголовке хранится информация о графическом изображении и файле (глубина пикселей, высота, ширина и количество цветов). Палитра указывается только в тех Bitmap-файлах, которые содержат палитровые изображения (8 и менее бит) и состоят не более чем из 256 элементов. Графические данные представляют саму картинку. Глубина цвета в данном формате может быть 1, 2, 4, 8, 16, 24, 32, 48 бит на пиксель.
  • Формат ICO (Windows icon). Формат хранения значков файлов в Microsoft Windows. Также, Windows icon, используется как иконка на сайтах в интернете. Именно картинка такого формата отображается рядом с адресом сайта или закладкой в браузере. Один ICO-файл содержит один или несколько значков, размер и цветность каждого из которых задаётся отдельно. Размер значка может быть любым, но наиболее употребимы квадратные значки со сторонами 16, 32 и 48 пикселей.

2. Элемент <map>

Элемент <map> служит для представления графического изображения в виде карты с активными областями. Активные области определяются по изменению вида курсора мыши при наведении. Щелкая мышью на активных областях, пользователь может переходить к связанным документам.

Для элемента доступен атрибут name, который задает имя карты. Значение атрибут name для элемента <map> должно соответствовать имени в атрибуте usemap элемента <img>:

<img src="url" usemap="#имя_карты">
<map name="имя_карты">
...
</map>

Элемент <map> содержит ряд элементов <area>, определяющих интерактивные области в изображении карты.

3. Элемент <area>

Элемент <area> описывает только одну активную область в составе карты изображений на стороне клиента. Если одна активная область перекрывает другую, то будет реализована первая ссылка из списка областей.

<map name="имя_карты">
<area атрибуты>
</map>
Таблица 2. Атрибуты элемента <area>
АтрибутКраткое описание
altЗадает альтернативный текст для активной области карты.
coordsОпределяет позицию области на экране. Координаты задаются в единицах длины и разделяются запятыми:
для круга — координаты центра и радиус круга;
для прямоугольника — координаты верхнего левого и правого нижнего углов;
для многоугольника — координаты вершин многоугольника в нужном порядке, также рекомендуется указывать последние координаты, равные первым, для логического завершения фигуры.
downloadДополняет атрибут href и сообщает браузеру, что ресурс должен быть загружен в момент, когда пользователь щелкает по ссылке, вместо того, чтобы, например, предварительно открыть его (как PDF-файл). Задавая имя для атрибута, мы таким образом задаем имя загружаемому объекту. Разрешается использовать атрибут без указания его значения.
hrefУказывает URL-адрес для ссылки. Может быть указан абсолютный или относительный адрес ссылки.
hreflangОпределяет язык связанного веб-документа. Используется только вместе с атрибутом href. Принимаемые значения — аббревиатура, состоящая из пары букв, обозначающих код языка.
mediaОпределяет, для каких типов устройств файл будет оптимизирован. Значением может быть любой медиа-запрос.
relДополняет атрибут href информацией об отношении между текущим и связанным документом. Принимаемые значения:
alternate — ссылка на альтернативную версию документа (например, печатную форму страницы, перевод или зеркало).
author — ссылка на автора документа.
bookmark — постоянный URL-адрес, используемый для закладок.
help — ссылка на справку.
license — ссылка на информацию об авторских правах на данный веб-документ.
next/prev — указывает связь между отдельными URL. Благодаря этой разметке Google может определить, что содержание данных страниц связано в логической последовательности.
nofollow — запрещает поисковой системе переходить по ссылкам на данной странице или по конкретной ссылке.
noreferrer — указывает, что переходе по ссылке браузер не должен посылать заголовок HTTP-запроса (Referrer), в который записывается информация о том, с какой страницы пришел посетитель сайта.
prefetch — указывает, что целевой документ должен быть кэширован, т.е. браузер в фоновом режиме загружает содержимое страницы к себе в кэш.
search — указывает, что целевой документ содержит инструмент для поиска.
tag — указывает ключевое слово для текущего документа.
shapeЗадает форму активной области на карте и ее координаты. Может принимать следующие значения:
rect — активная область прямоугольной формы;
circle — активная область в форме круга;
poly — активная область в форме многоугольника;
default — активная область занимает всю площадь изображения.
targetУказывает, куда будет загружен документ при переходе по ссылке. Принимает следующие значения:
_self — страница загружается в текущее окно;
_blank — страница открывается в новом окне браузера;
_parent — страница загружается во фрейм-родитель;
_top — страница загружается в полное окно браузера.
typeУказывает MIME-тип файлов ссылки, т.е. расширение файла.

4. Пример создания карты-изображения

Рис. 1. Пример разметки изображения для создания карты
  1. Размечаем исходное изображение на активные области нужной формы. Координаты областей можно вычислить с помощью программы для обработки фотографий, например, Adobe Photoshop или Paint.
  2. Задаем имя карты, добавив ее в элемент <map> с помощью атрибута name. Это же значение присваиваем атрибуту usemap элемента <img>.
  3. Добавляем ссылки на веб-страницы или части веб-документа для каждой активной области, по которым пользователь будет переходить при нажатии курсором мыши на активную область изображения.
<img src="https://html5book.ru/wp-content/uploads/2014/12/flowers_foto.jpg" alt="flowers_foto" usemap="#flowers">
<map name="flowers">
<area shape="circle" coords="70,164,50" href="https://ru.wikipedia.org/wiki/Гербера" alt="gerbera" target="_blank"> 
<area shape="poly" coords="191,13,240,98,143,98,191,13" href="https://ru.wikipedia.org/wiki/%C3%E8%E0%F6%E8%ED%F2" alt="hyacinth" target="_blank"> 
<area shape="circle" coords="318,93,50" href="https://ru.wikipedia.org/wiki/Ромашка" alt="camomiles" target="_blank"> 
<area shape="circle" coords="425,129,45" href="https://ru.wikipedia.org/wiki/Нарцисс_(растение)" alt="narcissus" target="_blank"> 
<area shape="rect" coords="480,3,572,89" href="https://ru.wikipedia.org/wiki/Тюльпан" alt="tulip" target="_blank"> 
</map>
Рис. 2. Пример создания карты-изображения, при нажатии курсора мыши на цветок осуществляется переход на страницу с описанием

— HTML | MDN

HTML-элемент <img> встраивает изображение в документ. Это замещаемый элемент.

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Приведённый выше пример показывает очень простое использование элемента <img>. Атрибут src обязателен и содержит путь к изображению, которое вы хотите встроить в документ. Атрибут alt содержит текстовое описание изображения, которое не обязательно, но невероятно полезно для доступности — программы чтения с экрана читают это описание своим пользователям, так они знают какое изображение показано, и так же оно отображается на странице, если изображение не может быть загружено по какой-либо причине.

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

  • управление Referrer/CORS в целях безопасности. Смотрите ниже атрибуты crossorigin и referrerpolicy;
  • настройка внутреннего размера (en-US) с использованием width и hight, которые полезны, когда вы хотите задать пространство занимаемое изображением, чтобы обеспечить стабильность макета страницы перед его загрузкой;
  • адаптивные изображения рекомендуется использовать с атрибутами sizes и srcset (смотрите также элемент <picture> и наше руководство «Адаптивные изображения»).

Стандарт HTML не содержит списка форматов изображений, которые должны поддерживаться. Поэтому разные пользовательские агенты поддерживают разные наборы форматов.

Firefox

Форматы изображений, поддерживаемые Firefox:

Если ошибка происходит во время загрузки или отрисовки изображения и обработчик события onerror был настроен на обработку события error (en-US), тогда этот обработчик события будет вызван. Это может произойти в ряде ситуаций, в том числе когда:

  • атрибут src пустой или null;
  • указанный URL в атрибуте src совпадает с URL страницы, на которой в данный момент находится пользователь;
  • указанное изображение каким-то образом повреждено, что препятствует его загрузке;
  • метаданные указанного изображения повреждены таким образом, что невозможно получить его размеры, и в атрибутах элемента <img> не было указано никаких размеров;
  • указанное изображение имеет формат, который не поддерживается пользовательским агентом.

К этому элементу применимы глобальные атрибуты.

alt

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

Примечание: Браузеры не всегда отображают изображение на которое ссылается элемент. Это относится к неграфическим браузерам (включая те, которые используются людьми с нарушениями зрения), если пользователь решает не отображать изображения, или если браузер не может отобразить изображение, потому что оно имеет неверный или неподдерживаемый тип. В этих случаях браузер может заменить изображение текстом записанным в атрибуте alt элемента. По этим и другим причинам вы должны по возможности предоставлять полезное описание в атрибуте alt.

Примечание: Пропуст этого атрибута в целом указывает, что изображение является ключевой частью контента и текстовый эквивалент не доступен. Установка этого атрибута в значение пустой строки (alt="") указывает, что это изображение не является ключевой частью контента (декоративное), и что невизуальные браузеры могут пропустить его при рендеринге (en-US).

crossorigin

Этот атрибут указывает, следует ли использовать CORS при загрузке изображения или нет. Изображения с включённой поддержкой CORS могут быть повторно использованы в элементе <canvas> не будучи «испорченными». Допустимые значения:

  • anonymous: Запрос cross-origin (т.е. с HTTP-заголовком Origin) выполняется, но параметры доступа не передаются (т.е. нет cookie, не используется стандарт X.509 или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (не устанавливая HTTP-заголовок Access-Control-Allow-Origin), изображение будет «испорчено» и его использование будет ограничено;
  • use-credentials: Запрос cross-origin (т.е. с HTTP-заголовком Origin) выполняется вместе с передачей параметров доступа (т.е. есть cookie, используется стандарт X.509 или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (посредством HTTP-заголовка Access-Control-Allow-Origin), изображение будет «испорчено» и его использование будет ограничено.

Если этот атрибут не задан, то CORS при загрузке изображения не используется (т.е. без отправки HTTP-заголовка Origin), ограничивая его использование в элементе <canvas>. Если задан неправильно, то он обрабатывается так, как если бы использовалось значение anonymous. Для получения дополнительной информации смотрите «Настройки атрибутов CORS».

decoding

Предоставляет рекомендации браузеру по декодированию изображения. Допустимые значения:

  • sync: Декодировать изображение синхронно для одновременного отображения с другим контентом;
  • async: Декодировать изображение асинхронно, чтобы уменьшить задержку отображения другого контента;
  • auto: Режим по умолчанию, который указывает на отсутствие предпочтений к режиму декодирования. Браузер решает, что лучше для пользователя.
height
Внутренняя высота (см. Внутренний размер (en-US)) изображения в пикселях.
importance

Указывает сравнительную важность ресурса. Приоритет выбирается с помощью значений:

  • auto: Указывает на отсутствие предпочтений. Браузер может использовать собственную эвристику для определения приоритета изображения;
  • high: Указывает браузеру, что изображение имеет высокий приоритет;
  • low: Указывает браузеру, что изображение имеет низкий приоритет.
intrinsicsize
Этот атрибут говорит браузеру игнорировать действительный внутренний размер (en-US) изображения и делать вид, что это размер, указанный в атрибуте. В частности, изображение будет растровым в этих измерениях, а narutalWidth/naturalHeight изображения будут возвращать значения, указанные в этом атрибуте. Объяснение, примеры.
ismap

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

Примечание: Этот атрибут разрешён, только если элемент <img> является потомком элемента <a> с валидным (соответствующий требованиям) атрибутом href.

loading

Указывает на то, как браузер должен загрузить изображение:

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

Примечание: Загрузка откладывается только тогда, когда включён JavaScript. Это анти-трэкинг мера. Если бы пользовательский клиент поддерживал опцию отложенной загрузки изображения при отключённом JavaScript, то сайт имел бы возможность отслеживать приблизительную позицию области просмотра в течение сессии пользователя, размещая изображения на странице таким образом, чтобы сервер мог отслеживать, сколько изображений загружено и когда.

referrerpolicy

Строка, указывающая, какой реферер (referrer) использовать при выборке ресурсов:

  • no-referrer: Заголовок Referer не будет отправлен;
  • no-referrer-when-downgrade: Заголовок Referer не отправляется, когда происходит переход к источнику без TLS (HTTPS). Это поведение по умолчанию для пользовательских агентов, если не указано иное;
  • origin: Заголовок Referer будет содержать схему адресации ресурса (HTTP, HTTPS, FTP и т.д), хост и порт;
  • origin-when-cross-origin: Переход на другие источники ограничит включённые реферальные данные схемой адресации ресурса, хостом и портом, в то время как переход из того же источника будет включать полный путь реферала;
  • unsafe-url: Заголовок Referer будет включать источник и путь, но не фрагмент URL, пароль или имя пользователя. Этот метод небезопасен, потому что будет утечка источников и путей от ресурсов, защищённых TLS, к незащищённым источникам.
sizes

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

  1. Условия мёда-запроса. Оно должно быть пропущено для последнего элемента.
  2. Значения размера источника.

Значения размера источника устанавливаются исходя из предполагаемых размеров изображения. Пользовательские агенты используют текущий размер источника, чтобы выбрать один из источников, предоставленных атрибутом srcset, если эти источники описываются с помощью дескриптора ширины ‘w‘ (сокращение от width). Выбранный размер источника влияет на внутренний размер (en-US) изображения (отображаемый размер изображения, если не применены стили CSS). Если атрибут srcset отсутствует или не содержит значений с дескриптором ‘w‘, то атрибут sizes не будет иметь никакого эффекта.

src
URL изображения. Этот атрибут является обязательным для элемента <img>. В браузерах, поддерживающих srcset, src обрабатывается как изображение-кандидат с дескриптором плотности пикселей 1x, если только изображение с этим дескриптором уже не определено в srcset или если srcset не содержит дескрипторы ‘w‘.
srcset

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

  1. URL изображения.
  2. Необязательного, пробела, сопровождаемого:
    • дескриптором ширины или положительным целым числом, за которым сразу же следует ‘w‘. Дескриптор ширины делится на размер источника, полученный из атрибута sizes, для расчёта эффективной плотности пикселей;
    • дескриптором плотности пикселей, который является положительным числом с плавающей точкой за которым сразу же следует ‘x‘.

Если не указано ни одного дескриптора, то источнику присваивается дескриптор по умолчанию: 1x.

Нельзя смешивать дескрипторы ширины с дескрипторами плотности пикселей в одном атрибуте srcset. Повторение дескрипторов (например, два источника в одном srcset с одинаковым дескриптором ‘2x‘) так же является недопустимым.

Пользовательские агенты выбирают любой из доступных источников на своё усмотрение. Это предоставляет им значительную свободу действий для адаптации их выбора на основе таких вещей, как предпочтения пользователя или пропускная способность. Смотрите наше руководство «Адаптивные изображения» для примера.

width
Внутренняя ширина (см. Внутренний размер (en-US)) изображения в пикселях.
usemap

Неполный URL (начиная с ‘#‘) карты-изображения, связанной с элементом.

Примечание: вы не можете использовать этот атрибут, если элемент <img> является потомком элемента <a> или <button>.

Устаревшие атрибуты

align Этот API вышел из употребления и его работа больше не гарантируется.

Выравнивание изображения относительно окружающему его контексту. Этот атрибут больше не должен быть использован — вместо этого используйте CSS-свойства float и/или vertical-align. Вы можете так же использовать CSS-свойство object-position для позиционирования изображения внутри границ элемента <img>. Допустимые значения:

  • top: Аналог vertical-align: top или vertical-align: text-top;
  • middle: Аналог vertical-align: -moz-middle-with-baseline;
  • bottom: Отсутствует значение по умолчанию, аналог vertical-align: unset или vertical-align: initial;
  • left: Аналог float: left;
  • right: Аналог float: right.
border Этот API вышел из употребления и его работа больше не гарантируется.
Ширина рамки вокруг изображения. Вы должны использовать CSS-свойство border вместо этого атрибута.
hspace Этот API вышел из употребления и его работа больше не гарантируется.
Отступ слева и справа от изображения в пикселях. Вы должны использовать CSS-свойство margin вместо этого атрибута.
longdesc Этот API вышел из употребления и его работа больше не гарантируется.

Ссылка на более подробное описание изображения. Возможными значениями являются URL или id элемента.

name Этот API вышел из употребления и его работа больше не гарантируется.
Имя для элемента. Вы должны использовать атрибут id вместо этого атрибута.
vspace Этот API вышел из употребления и его работа больше не гарантируется.
Отступ сверху и снизу от изображения в пикселях. Вы должны использовать CSS-свойство margin вместо этого атрибута.

<img> является замещаемым элементом; по умолчанию он имеет значение свойства display равное inline, но его размеры по умолчанию определяются внутренними значениями (см. внутренний размер (en-US)) встроенного изображения. Вы можете установить на изображение такие свойства, как border/border-radius, padding/margin, width/height и так далее.

Однако, часто бывает полезно установить для изображений свойство display в значение block, так что вы имеете максимальный контроль над стилизацией (например, margin: 0 auto не работает на изображениях с display: inline, легче размещать изображения в контексте с окружающими элементами, когда они являются блочными).

У <img> нет базовой линии, когда изображения используются в ситуации со строчным форматированием (display: inline) вместе с vertical-align: baseline, нижняя граница изображения будет размещена на базовой линии контейнера.

Вы можете использовать свойство object-position для позиционирования изображения внутри границ элемента <img> и свойством object-fit регулировать размеры изображения внутри этих границ (например, должно ли изображение помещаться в границы элемента или заполнить элемент полностью, даже если потребуется обрезка).

В зависимости от типа, изображение может иметь собственную (внутреннюю) ширину и высоту. Для некоторых типов изображений тем не менее внутренние размеры (en-US) не обязательны. SVG-изображения, например, могут не иметь внутренних размеров, если для корня их элемента <svg> не заданы width и height.

Альтернативный текст

Следующий простой пример встраивает изображение с альтернативным текстом в страницу для улучшения доступности.

<img src="https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg"
     alt="Логотип MDN - изображение динозавра с текстом MDN web docs">

Изображение-ссылка

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

<a href="https://developer.mozilla.org">
  <img src="https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg"
       alt="Посетить сайт MDN">
</a>

Использование атрибута srcset

В этом примере мы добавляем атрибут srcset, содержащий ссылку на версию логотипа в высоком разрешении; оно будет загружено вместо изображения в src на устройствах с высоким разрешением. Изображение указанное в атрибуте src, считается 1x кандидатом в пользовательских агентах, которые поддерживают srcset.

 <img src="mdn-logo-sm.png"
      alt="MDN"
      srcset="mdn-logo-HD.png 2x">

Использование атрибутов srcset и sizes

Атрибут src игнорируется в пользовательских агентах, которые поддерживают srcset, когда добавлены дескрипторы ‘w‘. Когда условие медиавыражения (max-width: 600px) совпадает с состоянием устройства, будет загружено изображение шириной 200px (оно то самое, которое наиболее близко соответствует 200px, указанным в медиавыражении), иначе будет загружено другое изображение.

 <img src="clock-demo-thumb-200.png"
      alt="Часы"
      srcset="clock-demo-thumb-200.png 200w,
          clock-demo-thumb-400.png 400w"
     >

Создание значимых альтернативных описаний

Значение атрибута alt должно чётко и кратко описывать содержимое изображения. Он не должен описывать наличие самого изображения или название файла изображения. Если атрибут alt намеренно пропущен, потому что изображение не имеет текстового эквивалента, рассмотрите альтернативные способы представления содержимого, которое изображение пытается передать.

Плохо
<img alt="image" src="penguin.jpg">
Хорошо
<img alt="Пингвин на пляже." src="penguin.jpg">

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

Атрибут title

Атрибут title не является приемлемой заменой атрибута alt. Кроме того, избегайте повторения значения атрибута alt в атрибуте title, объявленном на том же изображении.

Атрибут title также не должен использоваться в качестве подписи, сопровождающей альтернативное описание изображения. Если изображению нужна подпись, используйте элемент <figure> вместе с элементом <figcaption>.

BCD tables only load in the browser

Картинки в HTML – шпаргалка для новичков

Прежде, чем ответить на вопрос «как вставить картинку в HTML?», следует отметить, что перегружать веб-страницы огромным количеством графического материала не стоит, поскольку это не только улучшит визуальное восприятие ресурса пользователем, но и увеличит время загрузки страницы.

При создании веб-сайтов чаще всего используют графические форматы PNG, GIF и JPEG, а для дизайнерских работ с изображениями — графический редактор Adobe Photoshop, обладающий богатыми возможностями для сжатия и изменения размера изображений без потери качества, что является невероятно важным для веб-разработки.

Для того чтобы вставить изображение на HTML-страницу, используется одиночный простой тег:

где xxx — адрес изображения. В том случае, если картинка находится в одной директории со страницей, тег будет выглядеть как:

<img src=”image.png”>

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

Он показывается на месте картинки в момент его недоступности, загрузки или в режиме работы браузера «без картинок». Добавляется он с помощью атрибута alt тега <img>.

Пример добавления альтернативного текста к графическому файлу:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Альтернативный текст</title>
</head>
<body>
<p><img src="images/example.png" alt="Альтернативный текст"></p>
</body>
</html>

Для того чтобы изменить размеры отображения графического файла, используют теги height и width, где height — высота, а width — ширина, измеряемые в пикселях.

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

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

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

Данные параметры можно указать как в пикселях (размер картинки постоянен и не зависит от разрешения экрана пользователя), так и в процентах (размер картинки зависит от разрешения экрана).

Например:

<img src=”example.png” width=”60” height=”40”>

или

<img src=”example.png” width=”50%” height=”10%”>

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

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

Как и ко многим тегам HTML, к применим атрибут align, который выполняет выравнивание изображения:

<img src=”example.png” align=”top”> — картинка располагается выше текста;
<img src=”example.png” align=”bottom”> — картинка располагается ниже текста;
<img src=”example.png” align=”left”> — картинка располагается слева от текста;
<img src=”example.png” align=”right”> — картинка располагается справа от текста.

В HTML для создания ссылки используется тег <a>:

<a href=”адрес вашей ссылки”>Имя ссылки</a>

Для того чтобы задать графическую ссылку, необходимо всего лишь объединить тег изображения с тегом ссылки.

Делается это следующим образом:

<a href=”адрес ссылки”><img src=”адрес картинки”></a>

Как видите, графическая вставка может быть ссылкой и при клике переадресовывать на любой адрес, записанный в полном или сокращённом варианте.

Изображение можно не только вставлять на страницу в качестве видимого объекта, но и сделать фоновым. Для определения картинки как фона необходимо в теге прописать атрибут background=”xxx”, где xxx — адрес картинки, указанный таким же способом, как в примерах выше.

Для примера зададим такую текстурную картинку в роли фоновой:

Сохраните изображение в папке с заготовленной заранее страницей и пропишите следующие строки:

<html>
<head><title>Страница с фоновой картинкой</head></title>
<body background=”image.jpg”>
<h2> Фон с текстом. </h2>
</body>
</html>

Фоновая картинка на странице задана.

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

Желаем удачи!

HTML-тег img


Пример

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

Девушка в куртке

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

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

Тег используется для встраивания изображения в страницу HTML.

Изображения технически не вставляются на веб-страницу; картинки связаны с веб-страницами. Тег создает пространство хранения для указанного изображения.

Тег имеет два обязательных атрибута:

  • src — Указывает путь к образу
  • alt — Задает альтернативный текст для изображения, если изображение для некоторых причина не может быть отображена

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

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

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

Элемент
Есть Есть Есть Есть Есть

Атрибуты

Атрибут Значение Описание
альтернативный текст Задает альтернативный текст для изображения
перекрестное происхождение анонимный
учетные данные		 Разрешить изображения со сторонних сайтов, которые позволяют использовать доступ из разных источников с холстом
высота пикселей Задает высоту изображения
ismap ismap Задает изображение как карту изображений на стороне сервера.
загрузка нетерпеливый
ленивый		 Указывает, должен ли браузер загружать изображение немедленно или откладывать загрузка изображений до тех пор, пока не будут выполнены некоторые условия
longdesc URL Задает URL-адрес подробного описания изображения.
ссылка на политику no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
unsafe-url		 Указывает, какую информацию о реферере использовать при выборке изображения
размеры размеры Задает размеры изображений для разных макетов страниц
src URL Задает путь к изображению
srcset URL-список Определяет список файлов изображений для использования в различных ситуациях.
использовать карту #mapname Задает изображение как карту изображений на стороне клиента
ширина пикселей Определяет ширину изображения

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

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

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.

Другие примеры

Пример

Выровнять изображение (с помощью CSS):

Смайлик
Смайлик
Смайлик
Смайлик
Смайлик

Попробуй сам »

Пример

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

Смайлик

Попробуй сам »

Пример

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

Смайлик

Попробуй сам »

Пример

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

Смайлик

Попробуй сам »

Пример

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

Stickman
Лампа

Попробуй сам »

Пример

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


W3Schools.com

Попробуй сам »

Пример

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


Компьютер
<площадь shape = "rect" coords = "290 172 333 250" alt = "Телефон" href = "phone.htm">
Чашка кофе

Попробуй сам »

Связанные страницы

Учебное пособие по HTML: изображения в формате HTML

Ссылка на HTML DOM: объект изображения

Учебное пособие по CSS: стили изображений

Настройки CSS по умолчанию

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


HTML img src Атрибут

❮ HTML-тег

Пример

Изображение размечено следующим образом:

Девушка в куртке

Попробуй сам »

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

Обязательный атрибут src указывает URL-адрес изображения.

Есть два способа указать URL-адрес в src атрибут:

1. Абсолютный URL — ссылки на внешнее размещенное изображение. на другом сайте. Пример: src = «https://www.w3schools.com/images/img_girl.jpg».

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

2. Относительный URL — ссылки на изображение, размещенное в веб-сайт. Здесь URL-адрес не включает имя домена. Если URL начинается без косой черты он будет относиться к текущей странице. Пример: src = «img_girl.jpg». Если URL-адрес начинается с косой черты, он будет относиться к домену. Пример: src = «/ images / img_girl.jpg «.

Совет: Почти всегда лучше использовать относительные URL-адреса. Они не сломается, если поменять домен.

Примечание: А сломано значок ссылки и текст alt отображаются, если браузер не может найти изображение.

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

Атрибут
src Есть Есть Есть Есть Есть

Синтаксис

Значения атрибутов

Значение Описание
URL URL-адрес изображения.

Возможные значения:

  • Абсолютный URL — указывает на другой веб-сайт (например, src = «http://www.example.com/image.gif»)
  • Относительный URL — указывает на файл на веб-сайте (например, src = «image.gif»)
❮ HTML-тег

HTML-тег изображения


Пример

Как использовать тег :




Цветы

Попробуй сам »

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

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

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

Элемент содержит два тега: один или несколько теги и один тег .

Браузер будет искать первый элемент , в котором медиа-запрос соответствует текущей ширине области просмотра, а затем отобразит правильное изображение (указывается в атрибуте srcset). Элемент обязателен как последний дочерний элемент , как резервный вариант, если ни один из исходных тегов не совпадает.

Совет: Элемент работает «аналогично»

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую элемент.

Элемент
<картинка> 38.0 13,0 38,0 9,1 25,0

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

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

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.

Связанные страницы

Учебное пособие по HTML: HTML Element

Учебное пособие по CSS: адаптивный дизайн CSS — изображения



HTML-теги. Руководство по добавлению изображений в ваши веб-документы »

Использование тега

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

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

Inline vs. Block

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

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

  
Такое сочетание текста и изображения плохо смотрится в большинстве браузеров.
Эта комбинация текста и изображения плохо смотрится в большинстве браузеров.

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

  

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

 

Вот еще текст под изображением.
Это текст, который появляется над изображением.
Вот еще текст под изображением.

Лучшим и более систематическим способом решения проблемы встроенного изображения является преобразование изображений в блочные элементы с помощью CSS.

  img {
  дисплей: блок;
}
  
  

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

Вот еще текст под изображением.

# block-img img {
display: block;
}

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

Вот еще текст под изображением.

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

Адаптивные изображения

Важно убедиться, что изображения отображаются правильно на экранах различной ширины и размеров окон. Один из самых простых способов сделать это — использовать CSS для установки ширины (или максимальной ширины ) на 100% .Это гарантирует, что изображение никогда не будет слишком большим для своего контейнера. При использовании в сочетании с системой гибкой сетки это оптимизирует размер отображаемых изображений для экрана различной ширины.

  img {
 ширина: 100%;
 высота: авто;
}

# responsive-width img {
width: 100%;
высота: авто;
}

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

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

Устаревшие атрибуты

Элемент был частью спецификации HTML почти с самого начала и был жизненно важной частью дизайна страниц на основе HTML еще до появления современных браузеры, CSS3 или семантическая разметка. Из-за этой истории существует большое количество устаревших (больше не используемых) атрибутов, которые ранее использовались с элементом .

Многие устаревшие атрибуты связаны с макетом и позиционированием, другие — с поведением браузера. В большинстве случаев CSS является предпочтительным методом для достижения этих эффектов макета. В других случаях JavaScript — лучший способ добиться желаемых результатов.

Устаревшие атрибуты отмечены ниже красным. Там, где это возможно, мы предоставили дополнительную информацию о том, как достичь желаемого эффекта с использованием современных стандартов.

Дополнительные сведения об устаревших тегах и других изменениях в спецификации HTML см. В нашей статье о HTML5.

Адам — ​​технический писатель, специализирующийся на документации и руководствах для разработчиков.

HTML-изображение — javatpoint

HTML-тег img используется для отображения изображения на веб-странице. Тег HTML img — это пустой тег, который содержит только атрибуты, закрывающие теги не используются в элементе изображения HTML.

Давайте посмотрим на пример изображения HTML.

Пример изображения HTML

Проверить это сейчас

Выход:

Атрибуты HTML-тега img

src и alt — важные атрибуты HTML-тега img.Все атрибуты HTML-тега изображения приведены ниже.

1) SRC

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

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

2) альтернативный

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

3) ширина

Это необязательный атрибут, который используется для указания ширины отображения изображения. Сейчас это не рекомендуется. Вы должны применить CSS вместо атрибута ширины.

4) высота

Это h4 высота изображения. Атрибут высоты HTML также поддерживает элементы iframe, image и object. Сейчас это не рекомендуется. Вы должны применить CSS вместо атрибута высоты.

Использование атрибута высоты и ширины с тегом img

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

Пример:

изображение животного

Проверить это сейчас

Выход:

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

Использование атрибута alt

Мы можем использовать атрибут alt с тегом. Он будет отображать альтернативный текст в случае, если изображение не может быть отображено в браузере. Ниже приведен пример атрибута alt:

.

изображение животного

Выход:

Как получить изображение из другого каталога / папки?

Чтобы вставить изображение в вашу сеть, это изображение должно находиться в той же папке, в которую вы поместили HTML-файл. Но если в каком-то случае изображение доступно в каком-либо другом каталоге, вы можете получить доступ к нему следующим образом:

изображение животного

В приведенном выше утверждении мы поместили изображение на локальный диск E ——> папку изображений ——> animal.png.

Примечание. Если URL-адрес src будет неправильным или будет содержать орфографическую ошибку, ваше изображение не будет отображаться на веб-странице, поэтому попробуйте указать правильный URL-адрес.

Использовать тег

как ссылку

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

Пример:

Проверить это сейчас

Выход:

Поддерживающие браузеры

HTML 5 Тег

Тег HTML используется для встраивания изображений в документ HTML.

Значение атрибута src — это URL-адрес встроенного изображения. Атрибут srcset также можно использовать для указания различных изображений для использования в различных ситуациях (например, дисплеи с высоким разрешением, маленькие мониторы и т. Д.). Значение атрибута alt появляется, если изображение не может быть загружено.

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

Демо

Атрибуты

HTML-теги могут содержать один или несколько атрибутов. Атрибуты добавляются к тегу, чтобы предоставить браузеру дополнительную информацию о том, как тег должен выглядеть или вести себя. Атрибуты состоят из имени и значения, разделенных знаком равенства (=), а значение заключено в двойные кавычки. Вот пример: style = "color: black;" .

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

Атрибуты, которые вы можете добавить к этому тегу, перечислены ниже.

Атрибуты, зависящие от элемента

В следующей таблице показаны атрибуты, относящиеся к этому тегу / элементу.

Атрибут Описание
alt Альтернативный текст. Это определяет текст, который будет использоваться в случае, если браузер / пользовательский агент не может отобразить изображение.
src URL изображения.
srcset

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

Каждый URL изображения может сопровождаться пробелом и дескриптором. Дескриптор, если есть, может быть одним из следующих:

  • Дескриптор ширины (положительное целое число, за которым следует w ). Дескриптор ширины делится на размер источника, указанный в атрибуте sizes, для вычисления эффективной плотности пикселей.
  • Дескриптор плотности пикселей (положительное число с плавающей запятой, сразу за которым следует x ).
размеры Размеры изображения между точками останова.
crossorigin Этот атрибут является атрибутом настроек CORS. CORS означает Cross-Origin Resource Sharing . Назначение атрибута crossorigin — позволить вам настроить запросы CORS для извлеченных данных элемента.Перечисляются значения атрибута crossorigin .

Возможные значения:

Значение Описание
анонимно В запросах CORS между источниками для элемента не будет установлен флаг учетных данных. Другими словами, не будет обмена учетными данными пользователей с помощью файлов cookie, клиентских SSL-сертификатов или HTTP-аутентификации.
use-credentials В запросах CORS между источниками для элемента будет установлен флаг учетных данных.

Если этот атрибут не указан, CORS вообще не используется.

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

ismap Для карт изображений. См. Тег карты HTML
usemap Для карт изображений. См. Тег карты HTML
ширина Задает ширину изображения.
высота Задает высоту изображения.
referrerpolicy Политика реферера для выборок, инициированных элементом.
longdesc URL-адрес, который предоставляет ссылку на расширенное описание изображения.
расшифровка

Указывает предпочтительный метод декодирования этого изображения. Атрибут, если он присутствует, должен быть подсказкой декодирования изображения. Как отсутствие значения по умолчанию для этого атрибута, так и недопустимое значение по умолчанию являются автоматическим состоянием.

Этот атрибут определен только в HTML Living Standard (т.е. его нет в спецификациях W3C HTML).

загрузка Это атрибут отложенной загрузки. Его цель — указать политику загрузки изображений, находящихся за пределами области просмотра.

Возможные значения:

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

Этот атрибут определен только в HTML Living Standard (т.е. его нет в спецификациях W3C HTML).

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

Следующие ниже атрибуты являются стандартными для всех тегов HTML 5 (хотя атрибут tabindex не применяется к элементам dialog ).

Полное описание этих атрибутов см. В разделе «Глобальные атрибуты HTML 5».

Атрибуты содержимого обработчика событий

Атрибуты содержимого обработчика событий позволяют вызывать сценарий из HTML-кода. Сценарий вызывается при наступлении определенного «события». Каждый атрибут содержимого обработчика событий имеет дело с отдельным событием.

Полный список обработчиков событий см. В разделе Атрибуты содержимого обработчика событий HTML 5.

HTML: тег

HTML5 Документ

Если вы создали новую веб-страницу в HTML5, ваш тег может выглядеть так:

  




 Пример HTML5 от www.techonthenet.com 



 
 Заголовок 1 
 

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

 Пример изображения

В этом примере документа HTML5 мы создали тег , который отображает изображение example.png, найденное в каталоге / images. Если браузер не может отобразить изображение, вместо этого он отобразит текст «Пример изображения».

HTML 4.01 Переходный документ

Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег может выглядеть так:

  




 HTML 4.01 Transitional Example by www.techonthenet.com 



 
 Заголовок 1 
 

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

Пример изображения

В этом HTML 4.01 Пример переходного документа, мы создали тег , который отображает изображение example.png, найденное в каталоге / images. Если браузер не может отобразить изображение, вместо этого он отобразит текст «Пример изображения».

Переходный документ XHTML 1.0

Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег может выглядеть так:

  




 Переходный пример XHMTL 1.0 от www.techonthenet.com 



 
 Заголовок 1 
 

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

Пример изображения

В этом XHTML 1.0 Пример переходного документа, мы создали тег , который отображает изображение example.png, найденное в каталоге / images. Если браузер не может отобразить изображение, вместо этого он отобразит текст «Пример изображения».

Строгий документ XHTML 1.0

Если вы создали новую веб-страницу в XHTML 1.0 Strict, ваш тег может выглядеть так:

  




 Строгий пример XHTML 1.0 от www.techonthenet.com 



 
 Заголовок 1 
 

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


 Пример изображения

В этом XHTML 1.0 Пример строгого документа, мы создали тег , который отображает изображение example.png, найденное в каталоге / images. Если браузер не может отобразить изображение, вместо этого он отобразит текст «Пример изображения».

XHTML 1.1, документ

Если вы создали новую веб-страницу в XHTML 1.1, ваш тег может выглядеть так:

  




 XHTML 1.1 Пример с сайта www.techonthenet.com 



 
 Заголовок 1 
 

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


 Пример изображения

В этом примере документа XHTML 1.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *