Картинки в html

Атрибуты изображения

Атрибут	Описание и значения
	Значения: Устарело – определяет выравнивание картинки.
	Альтернативный текст для описания картинки. Выводится до момента загрузки изображения, а также вместо картинки, если они не поддерживаются. Его отсутствие считается считается технической ошибкой верстки, но тег работать будет. Синтаксис:
	Устаревшее значение. Выводит рамку вокруг картинки, значение задается в пикселях.
	Значения: Применяется, когда нужно подгрузить изображение с чужого сайта для использования его в элементе , что позволяет делать с ним различные манипуляции.
	Высота картинки: в пикселях или %.
	Устарело – количество пустого места, которое нужно вставить слева и справа от объекта: в пикселях.
	Указывает, что картинка является частью карты (изображение-карта содержит интерактивные области). При нажатии на картинку на сервер передаются данные в виде параметра адресной строки.
	Устарело – указывает URL-адрес длинного описания картинки.
	Адрес изображения (или путь к нему). По большому счету является единственным обязательным атрибутом, без него непонятно, что нужно вывести.
	Устанавливает разные размеры изображения для разных размеров экрана устройства, на котором просматривается страница. В параметрах указывается медиазапрос (в скобках указывается ширина экрана устройства) и ширина картинки для данного медиазапроса. Через запятую может быть указано несколько значений. Пример записи: Работает только вместе с атрибутом .
	Позволяют задать разные источники изображения, которые нужно выводить при разных размерах экрана. Список может состоять из нескольких параметров, каждый на отдельной строке. В каждой строке можно указать: 1. адрес изображения, 2. дескриптор ширины (положительное целое число), за которым сразу следует (необязательно), 3. дескриптор плотности пикселей (положительное целое число, за которым следует ).
	Описание картинки. Выводится при подводке курсора к картинке на сайте. В настоящий момент используется все реже из-за значительного пересечения по смыслу с .
	Определяет изображение в виде карты-изображения. Значение должно начинаться с символа #.
	Устарело – пустое пространство, которое нужно вставить сверху и снизу объекта.
	Ширина картинки в пикселях или процентах.

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS Z-indexCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !importantCSS Math Functions

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

Тег	Описание
<img>	определяет изображение
<map>	Определяет изображение-карту
<area>	Определяет кликабельную площадь внутри изображения-карты
<picture>	Определяет контейнер для нескольких ресурсов изображения

Для получения полного списка всех доступных HTML тегов, посетите наш HTML Справочник тегов.

Вопросы для самоконтроля

• С помощью какого тега определяются изображения на HTML-странице?
• С помощью какого атрибута указывается URL изображения?
• Каким необходимо воспользоваться тегом, чтобы вставить рисунок на веб-страницу?
• Какой атрибут предоставляет альтернативный текст изображению?
• URL-адрес файла изображения задают с помощью какого атрибута?
• Что отображает браузер, когда не может найти изображение на веб-странице?
• Какой атрибут изображения является обязательным согласно спецификации HTML5?
• Какой атрибут необходимо использовать для стилизации изображения?
• Какие атрибуты можно использовать для установки ширины и высоты изображения?
• Где рекомендуется сохранять изображения на сайте?
• Возможно ли сохранять изображения на другом сайте или сервере?
• Возможно ли использование на странице анимированных изображений?
• Какое расширение обычно имеют анимированные изображения?
• Возможно ли использование изображений в качестве ссылок?
• В середину какого тега нужно вставить изображение, чтобы оно стало ссылкой?
• Какое CSS-свойство позволяет изображению плавать справа или слева от текста?

❮ Prev
Next ❯

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

В HTML изображения в графическом формате (GIF, JPEG, PNG, APNG, SVG, BMP, ICO) добавляются на веб-страницу с помощью тега <img> через атрибут src, в котором указывается адрес картинки. То есть атрибут src является обязательным для элемента <img>. Без него этот тег не используют.

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

В таблице ниже представлены атрибуты тега <img>, которые используются наиболее часто. Но на самом деле их намного больше, ведь для элемента <img> доступны все универсальные атрибуты и события.

Таблица. Основные атрибуты элемента <img>

Атрибут	Описание	Пример
alt	Добавляет альтернативный текст для изображения. Этот текст выводится в месте появления изображения до его загрузки, или если картинка не может быть загружена (Например, при отключенной графике, или указан неверный путь к изображению).	<img src=»/D-Nik-Webmaster.jpg» alt=»Здесь должна быть картинка»>
height	Высота изображения в пикселях (px). Если задать высоту изображения и при этом не указывать ширину, то картинка будет сжата пропорционально.	<img src=»/D-Nik-Webmaster.jpg» height=»300″>
src	Задает путь к изображению.	<img src=»/D-Nik-Webmaster.jpg»>
sizes	Задаёт размер изображения в зависимости от параметров отображения (размеры изображения для разных макетов страницы).Работает только при заданном атрибуте srcset.Значением атрибута является одна или несколько строк, указанных через запятую.В качестве значений можно использовать единицы em, ex, ch, rem, vw, vh, vmin, vmax, cm, mm, q, in, pc, pt, px, но не проценты.	sizes=» (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw»Здесь vw — это ширина в процентах от области просмотра.
srcset	Создаёт список источников для изображения, которые будут выбраны, исходя из разрешения экрана. Может использоваться вместе с атрибутом src, или вместо него. Значением этого атрибута является одна или несколько строк, разделенных запятой.	srcset=» img/logo-mobile.jpg 320w, img/logo-wide-mobile.jpg 480w, img/logo-tablet.jpg 768w, img/logo-desktop.jpg 1024w, img/logo-hires.jpg 1280w» Здесь w — дескриптор ширины, который представляет собой целое положительное число, за которым следует w.
width	Ширина изображения. Если задать ширину изображения и при этом не указывать высоту, то картинка будет сжата пропорционально.	<img src=»/D-Nik-Webmaster.jpg» width=»300″>

Резюме раздела

• Используйте HTML элемент для определения изображения
• Используйте HTML атрибут для определения URL изображения
• Используйте HTML атрибут для определения альтернативного текста для изображения, если он не может быть отображен
• Используйте HTML атрибуты и для определения размера изображения
• Используйте CSS свойства и для определения размера изображения (альтернативно)
• Используйте CSS свойство , чтобы позволить изображению плавать
• Используйте HTML элемент для определения изображения-карты
• Используйте HTML элемент для определения интерактивных областей на изображении-карте
• Используйте для HTML элемента атрибут указывающий на изображение-карту
• Используйте HTML элемент для отображения разных изображений для разных устройств

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

Информирование браузера — основная цель атрибута width

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

#responsive-flamingo {  width: 100%;  height: auto; } 

<img src="https://www.internet-technologies.ru/wp-content/uploads/very-large-flamingo.jpg" id="responsive-flamingo" width="1280">

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

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

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

Пример 1. Размеры в пикселях

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Изображения</title>
</head>
<body>
<img src=»image/redcat.jpg» alt=»Размеры не заданы»>
<img src=»image/redcat.jpg» alt=»Задана ширина» width=»400″>
<img src=»image/redcat.jpg» alt=»Задана ширина и высота» width=»400″ height=»400″>
</body>
</html>

В примере использовалась одна и та же фотография, для первого <img> размеры явно не указаны, поэтому браузер добавил изображение в исходном виде. Для второй фотографии указана ширина 400 пикселей, что привело к уменьшению её размеров при сохранении пропорций. Третья фотография искажена, поскольку задана одинаковая ширина и высота, притом, что исходное изображение не квадратное (рис. 1).

Рис. 1. Размеры фотографии

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

Пример 2. Размеры в процентах

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Изображения</title>
<style>
figure {
width: 27%; /* Ширина */
float: left; /* Выстраиваем элементы по горизонтали */
margin: 0 0 0 3.5%; /* Отступ слева */
background: #f0f0f0; /* Цвет фона */
border-radius: 5px; /* Радиус скругления */
padding: 2%; /* Поля */
}
figure:first-child {
margin-left: 0; /* Убираем отступ для первого элемента */
}
</style>
</head>
<body>
<figure>
<img src=»image/redcat.jpg» alt=»Рыжая кошка» width=»100%»>
</figure>
<figure>
<img src=»image/redcat.jpg» alt=»Рыжая кошка» width=»100%»>
</figure>
<figure>
<img src=»image/redcat.jpg» alt=»Рыжая кошка» width=»100%»>
</figure>
</body>
</html>

В данном примере все размеры заданы в процентах, так что приходится пользоваться математикой, чтобы суммарная ширина не получилась больше 100%. Ширину каждого элемента <figure> устанавливаем как 27%, к ней добавляется поле слева и справа по 2%, итого каждый элемент занимает 31%, а всего 31х3=93%. Оставшиеся 100-93=7% делим пополам, в итоге 7/2=3.5% — столько получается ширина промежутка между блоками. Для первого <figure> отступ слева нам не нужен, поэтому его убираем через свойство margin-left. Результат данного примера показан на рис. 2.

Рис. 2. Масштабирование фотографий

The new loading attribute¶

There is a new HTML attribute that allows deferring image and iframe loading until they are close to being shown. The WHATWG has a pull request for this feature, and it is already a part of Chromium (as of v76).

Supported values for the attribute include:

• «lazy» which defers the load until the image or iframe reaches a distance threshold from the viewport.
• «eager» which loads the resource immediately.
• «auto» which is the default behavior, loads the resource.

You can use the lazy value to take advantage of browser-native lazy loading:

Lazy loading is a set of techniques in web and application development that defers the loading of resources on a page to a later point in time when those resources are needed instead of loading them upfront. These techniques help improve performance and utilization of the device’s resources reducing associated costs.

Image Maps

The HTML tag defines an image map. An image map is an image with
clickable areas. The areas are defined with one or more tags.

Try to click on the computer, phone, or the cup of coffee in the image below:

Example

Here is the HTML source code for the image map above:

<img src=»workplace.jpg» alt=»Workplace» usemap=»#workmap»><map name=»workmap»>  <area shape=»rect» coords=»34,44,270,350″
alt=»Computer» href=»computer.htm»>  <area shape=»rect» coords=»290,172,333,250″
alt=»Phone» href=»phone.htm»>  <area shape=»circle» coords=»337,300,44″
alt=»Coffee» href=»coffee.htm»></map>

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

The element accepts the following attributes.

Attribute	Description
	Alternate text. This specifies text to be used in case the browser/user agent can’t render the image.
	URL of the image.
	Comma-separated list of images to use in different situations (e.g., high-resolution displays, small monitors, etc). Each image URL can be optionally followed by a whitespace and a descriptor. The descriptor, if any, can be one of the following: A width descriptor (a positive integer directly followed by ). The width descriptor is divided by the source size given in the sizes attribute to calculate the effective pixel density. A pixel density descriptor (a positive floating point number directly followed by ).
	Image sizes between breakpoints.
	This attribute is a CORS settings attribute. CORS stands for Cross-Origin Resource Sharing. The purpose of the attribute is to allow you to configure the CORS requests for the element’s fetched data. The values for the attribute are enumerated. Possible values: Value Description Cross-origin CORS requests for the element will not have the credentials flag set. In other words, there will be no exchange of user credentials via cookies, client-side SSL certificates or HTTP authentication. Cross-origin CORS requests for the element will have the credentials flag set. If this attribute is not specified, CORS is not used at all. An invalid keyword and an empty string will be handled as the value.
	For image maps. See HTML map tag
	For image maps. See HTML map tag
	Specifies the width of the image.
	Specifies the height of the image.
	Referrer policy for fetches initiated by the element.
	A url that provides a link to an expanded description of the image.
	Indicates the preferred method to decode this image. The attribute, if present, must be an image decoding hint. This attribute’s missing value default and invalid value default are both the auto state.
This is a lazy loading attribute. Its purpose is to indicate the policy for loading images that are outside the viewport. Possible values: Keyword Description Used to defer fetching a resource until some conditions are met. Used to fetch a resource immediately; the default state.

Global Attributes

The following attributes are standard across all HTML elements. Therefore, you can use these attributes with the tag , as well as with all other HTML tags.

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handlers

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain «event» occurs. Each event handler content attribute deals with a different event.

Most event handler content attributes can be used on all HTML elements, but some event handlers have specific rules around when they can be used and which elements they are applicable to.

For more detail, see HTML event handler content attributes.

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

Чтобы было понятно, как всем вышеперечисленным пользоваться, приведу элементарный пример. Есть рисунок map.jpg. Его нужно разделить на две активные области. Щелчок на верхней части (зелёный цвет) откроет сайт «Одноклассники», нижняя же часть (синий цвет) будет вести на «ВКонтакте». Ссылки должны открываться в новой вкладке. Для создания карты выполняем следующие шаги.

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

<img src="map.jpg" alt="Простейшая карта" usemap="#social">

2. Определяем на картинке будущие активные области и соответствующие им координаты. Это можно сделать в Paint, Photoshop или любом другом графическом редакторе. В нашем случае всё элементарно: прямоугольники равны и по высоте (114 пикселей) и по ширине (384 пикселя).

3. Начинаем создавать карту: открываем теги прописываем в атрибуте name её название, которое обязательно должно совпадать со значением свойства usemap самой картинки:

<map name="social">

4. С помощью тегов area определяем активные области:

<area shape="rect" coords="0,0,384,114" href="http://ok.ru" alt="Одноклассники" target="_blank">
<area shape="rect" coords="0,114,384,228" href="http://vk.com" alt="ВКонтакте" target="_blank">

5. Закрываем карту:

</map>

Итогом работы стала картинка, щелчок на разных частях которой ведёт к открытию разных социальных сетей, и вот такой HTMLкод:

<!DOCTYPE html>
<html>
<head>
    <title>Навигационная карта</title>
</head>
<body>
<img src="map.jpg" alt="Простейшая карта" usemap="#social">
<map name="social">
<area shape="rect" coords="0,0,384,114" href="http://ok.ru" alt="Одноклассники" target="_blank">
<area shape="rect" coords="0,114,384,228" href="http://vk.com" alt="ВКонтакте" target="_blank">
</body>
</html>

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

Дата размещения/обновления информации: 29.04.2021 г.
Сообщить об ошибке

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS Z-indexCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !importantCSS Math Functions

Code Example

Using the tag

The element is the most straight-forward way of displaying a static image on a page. You should normally use it whenever an image is actually a part of the content (as opposed to using an image as part of a page’s design).

All tags must have a defined attribute. This defines the image to be displayed. Typically, the is a URL, but a data representation of the image can also be used in some cases.

Inline vs. Block

Intuitively, an image seems like a block element. It has a defined width and height, and cannot be broken over multiple lines. It behaves like a block.

Unfortunately, because of historical reasons, the HTML specification (and all browsers, by default) treat the tag as if it is an inline element. Because of the way browsers handle white space, this can cause problems if you are not careful.

This combination of text and image looks bad on most browsers.

There at least two easy ways to fix this. The simplest is to simply make sure there is a line break before and after your images. This is fine if you don’t care much about flowing text around your image.

This is some text that appears above the image.
Here is some other text below the image.

A better, more systematic way of handling the inline image problem is to images into block elements with CSS.

#block-img img { display: block; }

This is some text that appears above the image.

Here is some other text below the image.

Using the CSS rule is a good default way of presenting images, which you can then build upon for other types of presentation — such as wrapping text around an image within the flow of an article.

Responsive Images

It’s important to make sure that images display correctly across a wide variety of screen widths and window sizes. One of the easiest techniques for accomplishing this is to use CSS to set the (or the ) to . This will ensure that the image is never too big for its container. When used in conjunction with a flexible-grid system, this optimizes the images display size for various screen widths.

#responsive-width img { width: 100%; height: auto; }

There are two other techniques you should know for responsive images:

• Using the image attribute to specify multiple sizes of a single image.
• Using the element to specify different image designs for different contexts.

Deprecated attributes

The element has been a part of the HTML specification almost since the beginning, and has been a vital part of HTML-based page design since before the advent of modern browsers, CSS3, or semantic markup. Because of this history, there are a large number of deprecated (no longer in use) attributes that have previously been used with the element.

Many of the deprecated attributes are related to layout and positioning, other have to do with browser behavior. In most cases, CSS is the preferred method for achieving these layout effects. In other cases, JavaScript is the best way to get the desired results.

Deprecated attributes are marked below in red. Where possible, we have provided additional information on how to achieve the desired effects using modern standards.

For more information about deprecated tags and other changes to the HTML specification, see our article on HTML5.

Adam Wood

All	All	All	All	All	All

Описание

Для вставки графических изображений в 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="красивая картинка" style="border: 0;"></a>

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

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