Html тег img

Атрибут «src».

Собственно, по-настоящему обязательный атрибут у тега <img> только один — это атрибут src. Атрибут src (от англ. source — источник) позволяет указать путь к изображению, которое должно быть отображено в HTML-документе. URL — обязательный параметр, который указывает браузеру, где находится изображение. В основном на сайтах используется графика файловых форматов: JPEG, GIF, PNG, BMP и SVG.

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

Пример HTML:

Попробуй сам

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

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

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

Поддерживаемые форматы изображений

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

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

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

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

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

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

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

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

Результат добавления изображения, с помощью тега <img> на 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>

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

Параметр ALIGN

HTML:

3.2

XHTML:

1.0

1.1

Описание

Для изображений можно указывать их положение относительно текста или других
изображений на веб-странице. Способ выравнивания изображений задается параметром
align тега <IMG>.

Аргументы

В табл. 1 перечислены возможные значение параметра align
и результат его использования.

Табл. 1. Использование значений параметра align
Значение	Описание	Пример
absmiddle	Выравнивание середины изображения по середине текущей строки.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit…
baseline	Выравнивание изображения по базовой линии текущей строки.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit…
bottom	Выравнивание нижней границы изображения по окружающему тексту..	Lorem ipsum dolor sit amet, consectetuer adipiscing elit…
left	Выравнивает изображение по левому краю окна.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit…
middle	Выравнивание середины изображения по базовой линии текущей строки.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit…
right	Выравнивает изображение по правому краю окна.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit…
texttop	Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit…
top	Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit…

Наиболее популярные параметры — left и right,
создающие обтекание текста вокруг изображения. Чтобы текст не прилегал плотно
к рисунку, рекомендуется в теге <IMG> добавить
параметр hspace и vspace,
задающих расстояние до текста в пикселах.

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

bottom

Пример 2. Выравнивание изображения

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «https://w3.org/TR/html4/loose.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Тег IMG, параметр align</title>
</head>
<body>
<p><img src=»/images/square.gif» alt=»Квадрат» width=»20″ height=»20″
align=»right»> Lorem ipsum dolor sit
amet, consectetuer adipiscing elit…</p>
</body>
</html>

Примечание

Хотя все значения параметра align
поддерживаются браузерами, аргументы absbottom,
absmiddle, baseline
и texttop не поддерживаются спецификацией HTML
4.x/XHTML 1.0.

Параметр HEIGHT и WIDTH

HTML:

3.2

XHTML:

1.0

1.1

Описание

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

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

Это утверждение особенно важно для изображений,
размещенных внутри таблицы

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

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

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

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

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

Пример 5. Размеры изображения

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «https://w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Тег IMG, параметр width</title>
</head>
<body>
<p><img src=»sample.gif» width=»150″
height=»150″ alt=»»></p>
</body>
</html>

1.5. Графические форматы

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

1.5.1. Растровая графика

Растровая графика (raster, bitmap) — описание графического файла в виде
массива с координатами каждого пикселя и описанием цвета этого пикселя. Как
карта цветов с фиксированным размером.

Самые популярные растровые форматы изображений:

JPEG — большие файлы не требующие прозрачного фона или анимации. Этот
формат идеален для красочных фотореалистичных фотографий, так как они могут
содержать миллионы цветов.
PNG — в отличие от JPEG, имеет дополнительный параметр для описания
прозрачности (альфа канал). Подходит для изображений, фон которых должен быть
прозрачный или одноцветный. Используется для иконок и декоративных элементов.
Также используется для изображений повышенной точности — скриншотов, чертежей,
графиков и т. п.
webP — формат заменяющий PNG и JPEG, но еще с неполной поддержкой в
браузерах. При равном качестве изображения, сжатые файлы будут меньше PNG и
JPEG в среднем на 25%.

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

1.5.2. Векторная графика

Векторная графика (SVG, Scalable Vector Graphics) — описывается в виде
правил или уравнений, определяющих линии, а также дополнительные свойства, цвет
линий и фон для фигур.

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

С векторной графикой будем детально знакомиться в
отдельном занятии.

Атрибуты

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> так же поддерживает Глобальные атрибуты и События

HTML Справочник

HTML по алфавитуHTML по категориямHTML Поддержка браузераHTML АтрибутыHTML Глобальные атрибутыHTML СобытияHTML ЦветаHTML CanvasHTML Аудио/видеоHTML Наборы символовHTML Типы документовHTML URL КодировкаHTML Коды языкаHTML Коды странHTTP СообщенияHTTP МетодыКонвертер PX в EMКомбинации клавиш

HTML Теги

<!—Комментарий—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

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

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

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

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

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

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

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

Плавающие изображения

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

Следовательно, вы можете использовать поплавок в изображении через CSS. Давайте посмотрим на приведенный ниже пример применения CSS в атрибуте style и с текстом:

<!DOCTYPE html>
<html>
<body>
 
	<h2> Плавающие изображения </h2>
	<p> <strong> Плавающее изображение вправо </strong> </p>
	 
	<p>
		<img src="logoAndreyEx.png" alt="Логотип AndreyEx" style="float: right; width: 200px">
	</p>
	 
	<p> <strong> Плавающее изображение слева </strong> </p>
	<p>
		<img src="logoAndreyEx.png" alt="Логотип AndreyEx" style="float: left; width: 200px">
	</p>
 
</body>
</html>

Изображения перемещаются в нужную сторону, а текст правильно адаптируется к ним.

Image Maps in HTML

One image can also contain multiple clickable areas with different links. This is called an HTML image map. To define one, you need to use the <map> tags:

Example Copy

An HTML image map creates clickable areas on a specific HTML image. To connect the image map to an exact image, you need to first define a for the map, and then include it as a value for the attribute within the HTML image tag.

To define the clickable areas in an image map, you need to use elements as children of the element:

Example Copy

Pros

Easy to use with a learn-by-doing approach
Offers quality content
Gamified in-browser coding experience
The price matches the quality
Suitable for learners ranging from beginner to advanced

Main Features

Free certificates of completion
Focused on data science skills
Flexible learning timetable

EXCLUSIVE: 50% OFF Pros

Simplistic design (no unnecessary information)
High-quality courses (even the free ones)
Variety of features

Main Features

Nanodegree programs
Suitable for enterprises
Paid Certificates of completion

15% OFF Pros

Easy to navigate
No technical issues
Seems to care about its users

Main Features

Huge variety of courses
30-day refund policy
Free certificates of completion

AS LOW AS 14.99$

Атрибуты тега картинки img?

alt

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

атрибут border

Толщина рамки вокруг изображения.

height + width

Высота изображения + ширина размеры изображения.

hspace

Горизонтальный отступ от изображения до окружающего контента.

ismap

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

longdesc

Указывает адрес документа, где содержится аннотация к картинке.

lowsrc

Адрес изображения низкого качества.

src

Путь к графическому файлу.

vspace

Вертикальный отступ от изображения до окружающего контента.

usemap

Ссылка на тег <map>, содержащий координаты для клиентской карты-изображения.

Атрибуты

align	задает выравнивание рисунка и способ обтекания текстом bottom — нижняя граница картинки выравнивается по окружающему тексту (по умолчанию) left — по левому краю окна. Текст обтекает справа middle — центр картинки по базовой линии текущей строки right — по правому краю окна. Текст обтекает слева top — верх картинки выравнивается по самому высокому элементу строки Не проходит валидацию XHTML 1.0 Scrict, XHTML 1.1, HTML 4.01 Strict
alt	альтернативный текст
border	толщина рамкиНе проходит валидацию XHTML 1.0 Scrict, XHTML 1.1, HTML 4.01 Strict
class	определяет имя используемого класса
controls	флаг. Когда установлен, отображает кнопки для просмотра видеофайлаОтсутствует в спецификации HTML 4.01!
dir	определяет направление символов: ltr — слева направо rtl — справа налево
dynsrc	URL видеофайла для проигрываияОтсутствует в спецификации HTML 4.01!
height	задает высоту рисунка
hspace	отступ по горизонтали (по умолчанию 0)
id	уникальный идентификатор
ismap	флаг, определяющий, что картинка является картой-изображением
lang	определяет язык отображаемого документа
longdesc	URL страницы с полным описанием изображения
loop	сколько раз прокручивать видео. Значение по умолчанию -1, бесконечное воспроизведениеОтсутствует в спецификации HTML 4.01!
lowsrc	URL графического файла с низким разрешением. Загрузиться и отобразится до загрузки основной картинки.Отсутствует в спецификации HTML 4.01!
name	уникальное имя изображения
onclick	щелчок на элементе
ondblclick	двойной щелчок на элементе
onkeydown	нажатие клавиши, когда элемент имеет фокус
onkeypress	нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup	освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown	нажатие кнопки мыши, когда элемент имеет фокус
onmousemove	движение указателя мыши, когда элемент имеет фокус
onmouseout	смещение указателя мыши с элемента
onmouseover	помещение указателя мыши на элемент
onmouseup	освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
src	URL графического файла, отображаемого на странице
start	когда начинать воспроизведение видео fileopen — сразу после загрузки (по умолчанию) mouseover — после наведения курсора мыши Отсутствует в спецификации HTML 4.01!
style	задает встроенную таблицу стилей
title	всплывающая подсказка
usemap	применяет к изображению карту <MAP>
vspace	отступ по вертикали (по умолчанию 0)
width	задает ширину картинки

Image formats #

In this example, there are three different images in three different formats:

The first element points to an image in the new AVIF format. If the browser is capable of rendering AVIF images, then that’s the image file it chooses. Otherwise, it moves on to the next element.

The second element points to an image in the WebP format. If the browser is capable of rendering WebP images, it will use that image file.

Otherwise the browser will fall back to the image file in the attribute of the element. That image is a JPEG.

This means you can start using new image formats without sacrificing backward compatibility.

In that example, the attribute told the browser which kind of image format was specified.

Syntax

The tag is written as (no end tag) with the image URL inserted between the double quotes of the attribute.

The attribute can also be used in order to specify different images to use in different situations (e.g. high-resolution displays, small monitors, etc). The value of the attribute appears if the image cannot be loaded.

The attribute provides alternative text for users who are unable to view the image. Some reasons why users can’t view the image might include having a slow Internet connection, they are vision impaired and are using text-to-speech software, the image won’t load for some reason, etc. Note that the attribute is a required attribute.

Like this:

You can also provide the image dimensions using the and attributes.

Or you can provide the image dimensions using CSS.

Рисунки

Технологически рисунки как на Web-сервере, так и на локальном диске содержатся в отдельных файлах. В настоящее время большое количество форматов рисунков отличается многообразием, к ним можно отнести: BMP, TIFF, TGA, EPS, RAS. Поскольку скорость передачи данных в сети Интернет невелика, то для размещения в сети рекомендуют экономичные по объему форматы рисунков: gif, jpg, png. Все они являются растровыми, рисунок в них состоит из точек.

Формат GIF используют для хранения маленьких рисунков, формат JPEG – для хранения средних и больших.

В последние годы большую популярность приобрел формат PNG, позволяющий хорошо сжимать рисунки без потери информации, как JPEG, и не связан с разбирательствами по поводу авторских прав, как GIF. Однако браузеры более ранних версий (до 4) не способны с ним работать, и это является препятствием для его повсеместного распространения. Форматы GIF и JPEG все-таки остаются наиболее популярными.

Для определения формата рисунка, а также его размеров в точках и объема в байтах необходимо по щелчку правой кнопкой мыши на область рисунка выбрать в контекстном меню команду Свойства. Здесь же будет указано имя файла (URL) рисунка, которое введем в адресной строке обозревателя и просмотрим рисунок отдельно от Web-страницы.

Замечание 1

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

Обрабатывают рисунки, как правило, с помощью специальных программ для работы с Web-графикой (Photoshop, DeBabelizer или Fireworks). Начинают обработку с удаления с рисунка всей лишней информации.

Замечание 2

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

На размеры файлов очень влияет количество цветов в рисунках, которое называется глубиной цвета. Более 40 цветов зарезервировано для операционной системы компьютера, форматом GIF используется палитра из 216 цветов, которая называется Web-палитрой. Процесс преобразования изображений с высоким разрешением в изображения с Web-палитрой называют индексированием, или отображением рисунка. Подобное название связано с тем, что цветовая информация для каждого пикселя изображений хранится в отдельной ячейке памяти, имеющей определенный индекс.

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

Не рекомендуют уменьшать глубину битов для фотографий, так как в формате GIF фотографические изображения выглядят нечетко. В подобных случаях используется формат JPEG, который применяет абсолютно иной метод сжатия. Используя программу FrontPage можно увеличить или уменьшить размер файла формата JPEG. Единственной проблемой при работе с этим форматом является плохое качество сжатия прозрачных цветов (рисунки словно повреждены).

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