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

Использование тега Img и его атрибутов Src, Width и Height

Итак, давайте посмотрим, как можно использовать графику на своем сайте. Во-первых, это возможность вставки изображения как элемента (объекта) в Html код страницы. Как раз именно такая вставка осуществляется с помощью Img, который является особенным — строчным элементом с замещаемым контентом, к которым относятся всего лишь четыре элемента языка гипертекстовой разметки, одни из которых мы уже упомянули, а три остальных — Iframe (современный вариант использования фреймов), Object и Embed (для вставки видео и другого медиа контента).

Ведет себя он в точности как строчный элемент, но вот внутри него отображается посторонний внешний контент (фото в случае Img или видео и флеш в случае Object и Embed). Любой из этих четырех элементов подразумевает наличие внешнего файла, который будет подгружаться вот в эту самую область, заданную в нем атрибутами.

Для указания пути до графического файла, который должен подгружаться на страницу, служит специальный атрибут Src.

<img src="путь_до_файла_изображения">

Браузер пользователя при разборе Html кода страницы, как только встретит в нем тэг Img, сразу же создает область для строчного элемента, в которую загружается внешний файл (например, фотография). Путь до файла браузер берет из содержимого Src.

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

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

<img src="путь до файла изображения">

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

На сервер заливается графический файл огромного размера и весом в несколько мегабайт (сразу после фотографирования без обработки) и прописывается до него путь в Src. А для того, чтобы изображение не занимало бы весь экран, в тэг Img дописывают Width и Height с приемлемыми размерами по ширине и высоте.

И что получается в результате? Посетитель такого сайта наблюдает удручающе медленную подгрузку изображения в сравнительно малую область, заданную в упомянутых атрибутах (несколько мегабайт веса вписываются в размер 300 на 400 пикселов).

Поэтому сразу же делайте картинки для выкладывания в Веб того самого размера, который вы будете показывать на сайте и прописывать в Width и Height тега Img. Уважайте своих пользователей и не тратьте понапрасну их трафик (особенно мобильный). Сжать фото можно, например, в FastStone Image Viewer или любом другом графическом ректоре, например, онлайн фотошопе Пикслр.

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

Теперь давайте посмотрим, каким образом можно указать путь до файла с изображением в Src тега Img. Собственно, можно использовать и относительные, и абсолютные ссылки, о которых я уже довольно подробно писал в приведенной статье. Все зависит от нюансов и удобства.

Т.е. Src может содержать, например, следующие записи:

<img src="название_файла">

<img src="папка/название_файла">

<img src="https://ktonanovenkogo.ru/папка/название_файла">

В первом случае, графический файл должен лежать в той же папке, что и файл вашей веб страницы (в случае использования вами CMS, первые два варианта вам вряд ли подойдут, хотя для задания фонового изображения в CSS это очень удобно). Во-втором случае, графика лежит во вложенной папке относительно файла вашей страницы, ну, а в третьем случае, в Src указан абсолютный путь до файла с картинкой.

И тут следует обратить внимание, что картинка, которую вы вставляете в Html код, может лежать абсолютно на любом сервере. Т.е. вы можете, допустим, скопировать путь до нее на моем блоге и вставить этот путь в атрибут Src тэга Img на своем сайте. Все будет прекрасно работать, правда, если я не запрещу подобные действия в .htaccess на своем сервере, но это уже отдельная песня (погуглите на тему «Защита от хотлинков»).

Вообще, по правилам языка Html, на вашем сервере обязан находиться только сам документ (web страница), а все остальные документы и файлы (графика, видео, скрипты, стили), которые будут подгружаться вместе с ним, могут находиться на разных серверах.

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

Как вставить картинку с ссылкой, назначение Alt и Title в Img?

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

<a href="https://ktonanovenkogo. ru"><img src="https://ktonanovenkogo.ru/image/webcamxp.png"></a>

В браузере IE вокруг картинки, которую вы сделали ссылкой, появится рамочка шириной в три пиксела. Чтобы ее убрать, вам нужно будет добавить в тэг Img атрибут Border со значением ноль:

<a href="https://ktonanovenkogo.ru"><img border=0 src="https://ktonanovenkogo.ru/image/webcamxp.png"></a>

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

Alt выполняет роль альтернативного представления изображения. Что происходит в том случае, когда графика не грузится? Браузер все равно, обнаружив в коде элемент Img, формирует под него область, которая в зависимости от используемого пользователем браузера может либо оставаться заданного размера, либо схлопываться.

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

<img src="путь до файла изображения" >

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

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

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

<img src="https://ktonanovenkogo.ru/image/rss_no_drop1. pngя" alt="" title="">

На самом деле содержимое Alt и Title тега Img не только служит для удобства посетителей вашего сайта, но и может оказывать очень существенную роль на успешность продвижения вашего проекта.

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

Ключевые слова в Alt и Title (особенно в Alt) могут заметно улучшить ранжирование вашего сайта, а так в сервисах поиска по изображениям (картинкам) Яндекса или Google. Однако с этим нужно быть осторожным, ибо довольно легко можно попасть под фильтр за спам от Яндекса или Гугла.

Обтекание картинки текстом в Html — атрибут Align тега Img

Теперь давайте поговорим про выравнивание вставленных изображений в Html коде. У всех четырех строчных элементов с замещаемым контентом (Img, Iframe, Object и Embed) есть возможность выравнивания с помощью атрибута Align. Но он вообще-то применяется только для блочных элементов, а упомянутые теги — строчные.

Поэтому некоторые значения Align для Img (например, задание обтекания картинки текстом) будут означать совсем иное, нежели при использовании этого же атрибута в блочных элементах (параграфах P, заголовках h2-H6 и т.п.).

Вообще, выравнивание картинок с помощью Align при использовании в Img можно разделить на две группы.

Итак, что же происходит, когда мы вставляем графический файл в текст документа? Фактически он встает как одна большая буква:

По умолчанию используется выравнивание по нижнему краю, т.е. добавление в элемент Img атрибута align=»bottom» ничего не изменит. Но зато можно попробовать задать выравнивание картинки по верхнему краю, добавив в элемент align=»top»:

<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="top">

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

Возможно еще одно значение этого атрибута align=»middle»:

<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="middle">

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

Но кроме выравнивания по вертикали в Html предусмотрено и обтекание картинок текстом, для чего используются значения — Left и Right. Эта группа значений атрибута Align сильно отличается от предыдущей.

При использовании значений Left и Right внутри элемента Img мы добиваемся, так называемого, обтекания картинки текстом, которое задается в Html коде. В этом случае рисунок становится плавающим элементом (аналог Float в CSS) и текст начинает ее обтекать.

Например, при align=»left» мы получим такой результат:

<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="left">

Значение Left в Img означает, что фото плавает в левую сторону, а текст ее обтекает справа. В случае align=»right» картинка будет плавать в правую сторону, а текст ее будет обтекать слева:

<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="right">

При задании обтекания изображения текстом есть один нюанс — текст слишком близко располагается от него, что создает неприятный глазу эффект прилипания. Данную проблему совсем легко решить с помощью CSS свойств padding или margin, но и в чистом Html существует свое решение.

Для этого можно использовать атрибуты элемента Img — Hspace и Vspace. С помощью них отжимается обтекающий текст от изображения. Hspace задает отступы слева и справа от изображения до обтекающего его текста, а Vspace — сверху и снизу. Отступы задаются в пикселах, например:

<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="left" hspace="30" vspace="30">

Background — как сделать фон для сайта в чистом Html

Графические файлы можно использовать не только как элементы кода страницы, но и как заливку в качестве ее фона. Вообще, фон для сайта в языке Html можно задать либо цветом, либо с помощью фоновых изображений. Ну, а в современной верстке с использованием свойств CSS , фоновые картинки (background image) являются одним из основных элементов, ибо никаких оформительских элементов, вставленных с помощью Img на страницах современных сайтов, нет.

Поэтому фоновые изображения играют очень важную роль в современной верстке с использованием CSS (поговорим об этом в приведенной статье). Пока же мы рассмотрим, как это все делается в чистом Html с помощью атрибута Background элемента Body и тегов таблицы Table, показывает путь до графического файла, которым будет залита web страница или же таблица (или ее отдельная ячейка).

Например, добавив в Body атрибут Background следующего вида:

<body background="https://ktonanovenkogo.ru/image/bgkletka.gif">

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

Фоновое изображение, начиная с левого верхнего угла, повторяется сразу по двум осям (абсцисс и ординат). Последующее состыковывается с предыдущим и т.д. Кстати, если вы захотите залить фон страницы или таблицы одним цветом, то для этого вам нужно использовать уже не Background, а атрибут bgcolor, в качестве значения которого вы может вставить код цвета, например, так:

<body bgcolor="#f0f8ff">

То получим следующий цвет фона заданный через bgcolor:

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

Внимание! Атрибуты bgcolor и background сейчас не рекомендуются к использованию. Как и другие описанные выше атрибуты, задающие обтекание и отступы. Вместо них нужно использовать соответствующие CSS свойства.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Тег | HTML справочник

Значение и применение

Изображения в HTML документе определяются тегом <img>.

Обращаю Ваше внимание, что элемент <img> имеет два обязательных атрибута: src, который определяет URL адрес изображения (допускается использовать как абсолютный, так и относительный адрес) и alt, который указывает альтернативный текст для изображения (для того случая, если изображение по каким-то причинам не было загружено).

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

Атрибуты

Атрибут	Значение	Описание
align	left right top bottom middle	Не поддерживается в HTML5. Определяет выравнивание изображения в соответствии с окружающими элементами.
alt	text	Определяет альтернативный текст для изображения (для того случая, если изображение по каким-то причинам не было загружено). Является обязательным атрибутом.
border	pixels	Не поддерживается в HTML5. Определяет ширину границы вокруг изображения.
crossorigin	anonymous use-credentials	Атрибут определяет, используется ли CORS при загрузке изображения. Изображения, загруженные с помощью CORS, могут использоваться в элементах <canvas>, при этом функциональность последних не ограничивается. У этого атрибута есть 2 допустимых значения: anonymous В этом случае перед загрузкой изображения выполняется кросс-доменный запрос (Origin: HTTP header), при этом не передаются параметры доступа (такие как: cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). В ответе сервера должен присутствовать заголовок Access-Control-Allow-Origin: HTTP header, иначе, использование изображения в <canvas> ограничивается. use-credentials Перед загрузкой изображения выполняется кросс-доменный запрос (Origin: HTTP header) с указанием параметров доступа (в виде — cookie, сертификата или пары логин/пароль). В ответе сервера должен присутствовать заголовок Access-Control-Allow-Origin: HTTP header, иначе, использование изображения в <canvas> ограничивается. Если данный атрибут не задан, то CORS при загрузке изображения не используется (отсутствует заголовок Origin: HTTP header), и как следствие, использование изображения в <canvas> ограничивается всегда. При неверном значении атрибута (содержится некорректное значение) используется значение anonymous.
height	pixels	Определяет высоту изображения.
hspace	pixels	Не поддерживается в HTML5. Определяет пробелы слева и справа от изображения.
ismap	ismap	Сообщает браузеру, что изображение является серверной картой-изображением.
longdesc	URL	Определяет URL адрес с аннотацией к изображению (URL более длинного, чем в атрибуте alt, описания изображения).
src	URL	Задает URL адрес изображения (допускается использовать как абсолютные, так и относительные адреса). Является обязательным атрибутом.
usemap	#mapname	Ссылается на элемент <map>, содержащий координаты для клиентской части карты-изображения.
vspace	pixels	Не поддерживается в HTML5. Определяет пробелы сверху и снизу изображения.
width	pixels	Определяет ширину изображения.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <img></title>
	</head>
	<body>
		<img src = "10.jpg" alt = "ничоси" width = "200" height = "200" title = "ничоси">
	</body>
</html>

Результат добавления изображения, с помощью тега <img> на HTML страницу:

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

Допускается использование изображения в качестве ссылки, для этого необходимо поместить наше изображение (тег <img>) между отрывающим и закрывающим тегом <a>:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования изображения в качестве ссылки</title>
	</head>
	<body>
		<a href = "http://yandex. ru">
			<img src = "10.jpg" alt = "Поиск в Яндекс">
		</a>
	</body>
</html>

При этом при клике по картинке будет осуществлён переход по заданой ссылке (в нашем случае откроется сайт компании Яндекс):

Отличия HTML 4.01 от HTML 5

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

img {
display: inline-block;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

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

Элемент поддерживает «атрибуты событий».

Как вставить изображение в HTML, тег img и его атрибуты

Оглавление:

• Тег <img> и расположение папки с изображениями
• Атрибуты ширины width и высоты height
• Атрибут alt для альтернативной подписи
• Атрибут align для выравнивания изображения
• Атрибут title для всплывающей подсказки

Здравствуйте, уважаемые читатели сайта Uspei. com. Сегодня перейдем к более интересной теме, а именно вставка изображений. Для того, чтобы наш браузер быстро загружал и открывал страницу с картинкой нам нужно ОПТИМИЗИРОВАННОЕ изображение (о том для чего и как оптимизировать изображения читайте тут). Для того, что бы скачать такое заранее оптимизированное изображение перейдите по ссылке и сохраните эту картинку, нажав правой клавишей мыши и выбрав «Сохранить картинку как».

К оглавлению ↑

Тег <img> и расположение папки с изображениями

Для хранения изображений мы в нашей папке HTML создадим еще одну папку «Images», и поместим картинку туда.

Давайте попробуем вставить нашу картинку с изображением между заголовком и первым абзацем. Для этого в коде пропишем наш тег <img>. Это сокращение от английского слова image – изображение и это одинарный тег.

Сам тег <img> браузеру ничего особо не говорит. Поэтому мы должны обязательно указать атрибуты для тега. Самый главный из атрибутов – это атрибут src – источник. Мы должны указать источник нашей картинки. В нашем случае картинка находится внутри папки images относительно папки HTML. Т.е. нам необходимо указать, что наша картинка alarm.jpg находится в папке images. И вот как это выглядит.

<img src="images/alarm.jpg">

При таком указании атрибута для тега <img>, браузер при встрече с данным кодом, зайдет в папку images и возьмет файл – картинку alarm.jpg.

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

К оглавлению ↑

Атрибуты ширины width и высоты height

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

Чтобы узнать размер картинки, нажмите по ней правой кнопкой мыши и выберите пункт меню «Свойства». Далее перейдите на вкладку «Подробно».

Как видно, ширина у картинки 307 пикселей, а высота – 450 пикселей. Давайте пропишем размеры в коде:

<img src="images/alarm.jpg">

К оглавлению ↑

Атрибут alt для альтернативной подписи

Еще один атрибут тега <img>, который желательно указывать при добавлении изображения – это alt. Он предназначен для тех пользователей интернет, у кого отображение картинок в браузере отключено. Т.е. если картинки в браузере будут отключены, вместо нашей картинки пользователь увидит то слово или словосочетание, которое мы пропишем для атрибута alt. Кроме того, поисковые системы при определении ценности вашего сайта ориентируются на атрибут alt у изображений, поэтому его постановка обязательна.

<img src="images/alarm.jpg" width = "307" alt="Будильник">

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

Давайте проверим отображение:

Рисунок у нас появился именно в том месте, где и должен был. Но если вы заметили, хотя картинка у нас всего 307 пикселей в ширину, браузер отводит ей всю строку полностью. Очень часто возникает задача сделать так, чтобы текст после картинки обтекал ее, т.е. встал на одной строке с ней. Такая возможность существует. Реализуется она при помощи знакомого нам атрибута align – выравнивание.

К оглавлению ↑

Атрибут align для выравнивания изображения

Данный атрибут применим для нашего тега <img>. Для этой картинки мы можем указать выравнивание по правому краю (right), тогда картинка уйдет в правую часть экрана, и текст ее будет обтекать слева. Или мы можем указать выравнивание по левому краю (left) – тогда картинка уйдет в левую часть экрана, и текст будет обтекать ее справа. Давайте пропишем выравнивание по левому краю для нашего тега <img>.

<img src="images/alarm.jpg" width = "307" alt="Будильник" align="left">

Теперь давайте проверим, что получилось в браузере.

Видно, что текст обтекает картинку с правой стороны, потому что мы дали для картинки выравнивание по левому краю. Теперь давайте изменим выравнивание на правый край.

<img src="images/alarm.jpg" width = "307" alt="Будильник" align="right">

К оглавлению ↑

Атрибут title для всплывающей подсказки

И наконец также один из самых важных атрибутов — «title» — он делает подсказку для изображения при наведении на него мышкой.

<img src="images/alarm.jpg" width = "307" alt="Будильник" align="right" title="Изображение старого будильника ">

Теги: Armhtmlбазовый-курс-htmlизображенияинтернет

Мы в соцсетях:

Тег | HTML справочник

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

Описание

Для вставки графических изображений в HTML-документ используется HTML тег <img> (img сокращение от англ. слова image — изображение). Изображения не вставляются напрямую на веб-страницу, тег содержит лишь ссылку на изображение и создает требуемого размера пространство, в котором отображается картинка в графическом формате GIF, JPEG или PNG:

• JPG — наиболее распространенный формат для фотографий. Изображения с расширением .jpg отображают миллионы цветов, что особенно важно для точного отображения различных оттенков и градиентов в фотографиях. Однако, такие изображения не могут содержать прозрачные области.
• GIF используется для простой графики, например, такой как логотипы. Изображения в формате GIF не используются для фотографий, потому что они не могут содержать столько цветовой информации как JPG-изображения. Однако GIF-изображения могут иметь прозрачные области и могут быть сжаты в файлы очень маленьких размеров. Также формат GIF поддерживает анимацию.
• PNG — формат изображений, позволяющий, также как и JPG, отображать миллионы цветов и содержать прозрачные области. Однако, как правило, изображения с расширением .png имеют несколько больший размер, чем JPG или GIF.

HTML тег <img> имеет два обязательных атрибута: src и alt.

Атрибут src выполняет важную роль в отображении графики на странице — задает путь (относительный или абсолютный) к изображению, которое технически не вставляется на страницу: браузер отображает изображение на которое ведет ссылка.

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

При необходимости изображение можно сделать ссылкой, для этого нужно всего лишь поместить тег <img> внутрь элемента <a>. При этом вокруг изображения появится рамка, которая легко убирается с помощью CSS:

<a href="#"><img src="image.png" alt="красивая картинка"></a>

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

Примечание: для добавления изображений на веб-страницу вы также можете воспользоваться CSS свойством background-image, которое позволяет обычный задний фон элемента заменить на картинку.

Атрибуты

src:

Указывает браузеру расположение (URL-адрес) нужного изображения. Пример »

alt:

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

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

Пример » Если картинка используется в качестве украшения веб-страницы и не несет в себе никакой смысловой нагрузки, то вместо описания картинки в качестве значения можно оставить пустую строку (alt=»»).

height:

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

ismap:

Атрибут ismap является атрибутом булева типа. Его присутствие указывает браузеру, что картинка является частью карты-изображения расположенной на сервере (карта-изображение — изображение с интерактивными областями). Допустимые значения логического атрибута ismap:

<img ismap>
<img ismap="ismap">
<img ismap="">			

При нажатиии на интерактивную область карты-изображения, координаты клика отправляются на сервер в строке запроса URL-адреса.

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

usemap:

Определяет изображение в качестве карты-изображения. Значение (обязательно должно начинаться с символа «#»), указанное в данном атрибуте, ассоциируется со значением атрибута name или id тега <map> и создает связь между элементами <img> и <map>. Пример »

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

width:

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

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

Тег <img> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

img {
    display: inline-block;
} 

Пример

<img src="images.jpg" alt="цветок">

Результат данного примера в окне браузера:

HTML тег img

❮ Назад Полный справочник HTML Далее ❯

Пример

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

jpg» alt=»Девушка в куртке»>

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

Больше примеров «Попробуй сам» ниже .

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

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

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

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

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

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

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

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

Элемент
	Да	Да	Да	Да	Да

Атрибуты

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

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

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

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

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

Пример

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

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

Пример

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

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

Пример

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

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

Пример

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

gif» alt=»Smiley face»>

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

Пример

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

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

Пример

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

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

Пример

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

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

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

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

Ссылка HTML DOM: объект изображения элемент со следующими значениями по умолчанию:

Пример

img {
  display: inline-block;
}

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

❮ Предыдущая Полный справочник HTML Далее ❯

NEW

Мы только что запустили
Видео W3Schools

Узнать

COLOR PICKER

КОД ИГРЫ

Играть в игру

Top Tutorials

9003

Top7 Examples Примеры HTML

FORUM | О

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

Авторское право 1999-2022 по данным Refsnes. Все права защищены.
W3Schools работает на основе W3.CSS.

: Элемент Image Embed — HTML: Язык гипертекстовой разметки

HTML-элемент встраивает изображение в документ.

В приведенном выше примере показано использование элемента :

• Атрибут src имеет значение required и содержит путь к изображению, которое вы хотите внедрить.
• 9Атрибут 0019 alt содержит текстовое описание изображения, которое не является обязательным, но невероятно полезно для доступности — программы чтения с экрана читают это описание своим пользователям, чтобы они знали, что означает изображение. Альтернативный текст также отображается на странице, если изображение не может быть загружено по каким-либо причинам: например, сетевые ошибки, блокировка контента или гниение ссылок.

Существует множество других атрибутов для достижения различных целей:

• Контроль Referrer/CORS для обеспечения безопасности и конфиденциальности: см. crossorigin и referrerpolicy .
• Используйте как ширину , так и высоту , чтобы задать внутренний размер изображения, позволяя ему занимать место перед загрузкой, чтобы смягчить сдвиги макета содержимого.
• Подсказки адаптивных изображений с размерами и srcset (см. также элемент и наш учебник по адаптивным изображениям).

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

Примечание: Руководство по типам и форматам файлов изображений содержит исчерпывающую информацию о форматах изображений и их поддержке веб-браузерами. Этот раздел является просто резюме!

Наиболее часто используемые в Интернете форматы файлов изображений:

• APNG (Animated Portable Network Graphics) — хороший выбор для анимационных последовательностей без потерь (GIF менее эффективен)
• AVIF (формат файла изображения AV1) — хороший выбор как для изображений, так и для анимированных изображений благодаря высокой производительности.
• GIF (формат обмена графикой) — хороший выбор для простых изображений и анимации.
• JPEG (изображение Объединенной экспертной группы по фотографии) — хороший выбор для сжатия неподвижных изображений с потерями (наиболее популярный в настоящее время).
• PNG (Portable Network Graphics) — хороший выбор для сжатия неподвижных изображений без потерь (немного лучшее качество, чем JPEG).
• SVG (масштабируемая векторная графика) — формат векторного изображения. Используйте для изображений, которые должны быть нарисованы точно в разных размерах.
• WebP (формат веб-изображений) — отличный выбор как для изображений, так и для анимированных изображений

Рекомендуется использовать такие форматы, как WebP и AVIF, поскольку они работают намного лучше, чем PNG, JPEG, GIF как для неподвижных, так и для анимированных изображений. WebP широко поддерживается, в то время как AVIF не поддерживается в Safari.

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

При возникновении ошибки при загрузке или рендеринге изображения и при ошибке 9Обработчик события 0020 был установлен на событие error , этот обработчик события будет вызван. Это может произойти в ряде ситуаций, в том числе:

• Атрибут src пуст ( "" ) или null .
• URL-адрес src совпадает с URL-адресом страницы, на которой в данный момент находится пользователь.
• Изображение каким-то образом повреждено, что препятствует его загрузке.
• Метаданные изображения повреждены таким образом, что невозможно получить его размеры, а размеры не были указаны в атрибутов элемента.
• Формат изображения не поддерживается агентом пользователя.

Этот элемент включает глобальные атрибуты.

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

выравнивание "> Устаревший

Выравнивает изображение с окружающим его контекстом. Используйте свойства CSS float и/или vertical-align вместо этого атрибута. Допустимые значения:

верх

Эквивалент выравнивание по вертикали: сверху или выравнивание по вертикали: текст-поверх

средний

Эквивалент вертикального выравнивания: -moz-middle-with-baseline

снизу

Значение по умолчанию, эквивалентное вертикальному выравниванию: не задано или вертикальному выравниванию: исходное

левый

Эквивалентно с плавающей запятой: слева

справа

Эквивалентно с плавающей запятой: справа

граница Not for use in new websites."> Устаревший

Ширина рамки вокруг изображения. Вместо этого используйте свойство CSS border .

hпробел Устаревший

Количество пикселей белого пространства слева и справа от изображения. Вместо этого используйте свойство CSS margin .

длинное описание Устаревший

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

Примечание: Этот атрибут упоминается в последней версии W3C, HTML 5.2, но был удален из HTML Living Standard WHATWG. У него неопределенное будущее; авторы должны использовать альтернативу WAI-ARIA, такую ​​как aria-describedby или aria-details .

имя Устаревший

Имя элемента. Вместо этого используйте атрибут id .

в пространстве Устаревший

Количество пикселей белого пространства над и под изображением. Вместо этого используйте свойство CSS margin .

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

не имеет базовой линии, поэтому, когда изображения используются во встроенном контексте форматирования с vertical-align : baseline , нижняя часть изображения будет размещена на базовой линии текста.

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

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

Замещающий текст

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

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

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

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

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

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

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

 <изображение
  src="часы-демонстрация-200px.png"
  alt="Часы"
  srcset="clock-demo-200px.png 200 Вт, clock-demo-400px.png 400 Вт"
  />
 

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

Хотя элементы имеют невинное применение, они могут иметь нежелательные последствия для безопасности и конфиденциальности пользователей. См. Заголовок Referer: вопросы конфиденциальности и безопасности для получения дополнительной информации и мер по смягчению последствий.

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

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

Не

Do

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

• Альтернативное дерево решений • Изображения • Учебные пособия по веб-доступности WAI
• Альтернативные тексты: полное руководство — Axess Lab
• Как создать отличный замещающий текст: введение | Деке
• MDN Понимание WCAG, пояснения к Руководству 1.1
• Понимание критерия успеха 1.1.1 | Понимание W3C WCAG 2.0

Идентификация SVG как изображения

Из-за ошибки VoiceOver VoiceOver неправильно объявляет изображения изображений SVG. Включите role="img" во все элементов с исходными файлами SVG, чтобы вспомогательные технологии правильно объявляли SVG как содержимое изображения.

Атрибут title

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

Атрибут title также не следует использовать в качестве дополнительной информации о субтитрах для сопровождения 9 изображений.Описание 0019 альтернатива . Если изображению нужна подпись, используйте элементы figcaption и figcaption .

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

• Использование атрибута заголовка HTML – обновлено | Группа Пачиелло

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

• Изображения в HTML
• Руководство по типам и форматам файлов изображений
• Адаптивные изображения
• <картинка> , <объект> и <вставка> элементы
• Другие свойства CSS, связанные с изображением: object-fit , object-position , image-orientation , image-rendering и image-resolution .

Последнее изменение: 14 сентября 2022 г. , участниками MDN

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

В тегах HTML

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнайте больше

Элемент веб-изображений

: рекомендации и HTML-код в одном полезном руководстве

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

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

Дисплей

встроенный

Нулевой элемент

Этот элемент не должен содержать никакого содержимого и не нуждается в закрывающем теге.

Содержание

• 1 Пример кода
• 2 Использование TAG
  • 2.1 Вставка против блока
  • 2,2 Акцентивные изображения
• 3 Умореченный Атримируты
• 3 Умореченный атримируйте
• . 5 Атрибуты img

Пример кода

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

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

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

Встроенное или блочное

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

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

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

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

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

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



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

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

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

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

 изображение {
  дисплей: блок;
}
 

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

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

#block-img img {
display: block;
}

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

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

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

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

 изображение {
 ширина: 100%;
 высота: авто;
}
 

# отзывчивая ширина изображения {
ширина: 100%;
высота: авто;
}

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

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

Устарело

атрибуты

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

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

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

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

Адам Вуд

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

Browser Support for img

All	All	All	All	All	All

Attributes of img

Имя атрибута	Значения	Примечания
crossorigin		Указывает, что в HTTP-запросе следует использовать заголовки CORS, и указывает, следует ли использовать учетные данные.
height		Определяет внутреннюю высоту файла изображения в пикселях CSS.
srcset		Определяет несколько размеров одного и того же изображения, позволяя браузеру выбирать соответствующий источник изображения.
альтернативный		Определяет альтернативный текст, который может быть представлен вместо изображения.
имя		Идентифицировал изображение или предоставил дополнительную информацию о нем. Устарело в HTML 4.0 в пользу других атрибутов.
longdesc		Определяет URL-адрес, по которому можно найти дополнительную информацию об изображении. Он был выписан из спецификации HTML5, но его статус не так ясен, как другие устаревшие функции.
ширина		Указывает внутреннюю ширину изображения в пикселях CSS.
align		Ранее использовался для указания выравнивания и размещения изображения относительно окружающего текста. Он устарел и не должен использоваться.
граница		Ранее использовалась для определения границы элемента изображения. Он устарел и больше не должен использоваться.
hspace		Ранее использовался для добавления горизонтального пространства с обеих сторон изображения. Сейчас это устарело.
ismap		Идентифицирует изображение как карту изображения на стороне сервера. При нажатии на содержащую якорную ссылку координаты мыши будут включены в запрос.
usemap		Указывает карту изображения на стороне клиента, которая будет использоваться с изображением.
lowsrc		Задает версию изображения меньшего размера или более низкого качества.
naturalsizeflag		Этот атрибут ничего не делает. Когда-то он использовался проприетарной программной системой.
nosave		Предназначен для предотвращения загрузки изображений пользователями. Никогда не был частью спецификации HTML и широко не применялся.
dynsrc		Ранняя неудачная попытка включить собственное воспроизведение видео в HTML.
элементы управления		Переключаемые элементы управления медиаплеером при использовании в сочетании с атрибутом dynsrc. Оба атрибута теперь устарели.
цикл		Ранее использовался для указания количества раз, которое должно воспроизводиться видео, при использовании в сочетании с атрибутом dynsource. Оба атрибута устарели.
start		Используется вместе с атрибутом dynsrc для добавления видео, которое будет загружаться в поддерживаемых браузерах вместо изображения, которое в противном случае отображалось бы.
подавление		Используется ныне несуществующим браузером Netscape для подавления отображения изображения до завершения загрузки изображения.
src		Указывает URL-адрес отображаемого изображения.

Тег HTML

❮ Пред. Следующий ❯

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

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

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

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

Пример тега HTML

:

 

  <голова>
    
  
  <тело>
     
Заголовок 
 
    
Это фото Алека
     jpeg" alt="Aleq"/>
  
 

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

Мы можем использовать CSS для изменения первоначального вида изображения.

Пример тега

, оформленного с помощью CSS:

 

  <голова>
    
    <стиль>
      картинка {
      радиус границы: 50%;
      граница: пунктирная 4 пикселя #077cb9;
      ширина: 300 пикселей;
      дисплей: блок;
      поле: 0 авто;
      }
    
  
  <тело>
    <дел>