Тег HTML <img>
Тег <img> используется для вставки изображения в HTML-документ. Само изображение не вставляется непосредственно в документ — браузер вставляет HTML-изображение из источника, указанного в теге <img>.
Для элемента <img> обязательны два атрибута: src, который используется для указания источника изображения, и alt, который задаёт альтернативный текст для изображения.
Чтобы сделать HTML-изображения кликабельными, поместите тег <img> внутрь тега <a>, который используется для вставки ссылки на HTML-изображение.
Синтаксис
Тег <img> является пустым, то есть закрывающий тег не требуется. Он содержит только атрибуты. Но в XHTML тег <img> должен быть самозакрывающимся (<img />).
Пример тега HTML <img>:
Пример использования тега HTML <img>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Heading </h1>
<p>This is Aleq's photo</p>
<img src="https://ru.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
</body>
</html>Мы можем использовать CSS, чтобы изменить начальный вид изображения.
Пример тега <img>, стилизованного с помощью CSS:
Как стилизовать тег HTML <img> с помощью CSS-свойств vertical-align и padding?
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
border-radius: 50%;
border: 4px dashed #077cb9;
width: 300px;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<img src="https://ru.w3docs.com/uploads/media/default/0001/03/e91b0d7a957cadd0c3282d34e423ff0f97799a1d.jpeg" alt="Ararat mountain" width="256" height="256" />
</div>
</body>
</html>Атрибуты Src и Alt
Атрибут src (source) показывает источник изображения. Он обязателен, так как задаёт путь к изображению. Значением атрибута src может быть либо имя файла, либо его URL.
Атрибут alt задаёт альтернативное имя для изображения. Он также обязателен для тега <img>. Его значение — это описательный текст, который отображается в браузере до загрузки изображения или если изображение не удалось загрузить.
TIP
Мы рекомендуем включать ключевые слова в альтернативный текст. Это улучшит ранжирование сайта в поисковых системах.
Использование "data:image/[type];base64,[base64-string]" для атрибута src
Формат data:image/[type];base64,[base64-string] можно использовать как значение атрибута src тега img, чтобы отображать изображение прямо из HTML-кода, без необходимости загружать его из внешнего файла.
Вот пример того, как использовать этот формат для отображения изображения в теге img:
Использование "data:image/[type];base64,[base64-string]" для атрибута src
<img src="data:image/png;base64,iVBORw0KG..." alt="Base64 encoded image">В этом примере image/png указывает MIME-тип изображения, а iVBORw0KG... представляет данные изображения, закодированные в base64.
Обратите внимание, что использование изображений, закодированных в base64, может увеличить размер HTML-файла и замедлить загрузку страницы. Обычно этот формат рекомендуется использовать для небольших изображений или иконок, а для более крупных изображений — внешние файлы.
Пример тега HTML <img> с атрибутами src и alt:
Пример тега img с атрибутами src и alt
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<img src="https://ru.w3docs.com/uploads/media/default/0001/03/01cc5ccf0ce755075e468cc651f27c354e1b032e.jpeg" alt="Paris" width="256" height="256" />
</body>
</html>Атрибут loading
Атрибут loading позволяет откладывать загрузку изображений и iframe до тех пор, пока они не окажутся близко к отображению. Сейчас это стандартная возможность HTML, поддерживаемая всеми современными браузерами.
Поддерживаемые значения атрибута loading включают:
lazy, который откладывает загрузку, пока изображение или iframe не достигнет порогового расстояния от области просмотра.eager, который загружает ресурс немедленно.
Вы можете использовать значение lazy, чтобы воспользоваться встроенной в браузер отложенной загрузкой:
HTML <img> Tag
<img src="defer.png" loading="lazy" alt="Beautiful" width="500" height="400">Отложенная загрузка — это набор техник в веб- и прикладной разработке, которые переносят загрузку ресурсов на странице на более поздний момент, когда эти ресурсы действительно нужны, вместо их немедленной загрузки. Эти техники помогают повысить производительность и эффективность использования ресурсов устройства, снижая связанные с этим затраты.
Поддерживаемые форматы изображений
Форматы файлов изображений — это стандартизированные способы организации и хранения цифровых изображений. Формат файла изображения может хранить данные в несжатом виде, в сжатом виде (без потерь или с потерями) или в векторном формате. (Wikipedia).
Каждый пользовательский агент поддерживает разные форматы изображений. Вот список распространённых форматов изображений:
| Abbreviation | File format | MIME type | File extension(s) | Browser compatibility |
|---|---|---|---|---|
| APNG | Animated Portable Network Graphics | image/apng | .apng | Chrome, Edge, Firefox, Opera, Safari |
| BMP | Bitmap file | image/bmp | .bmp | Chrome, Edge, Firefox, Opera, Safari |
| GIF | Graphics Interchange Format | image/gif | .gif | Chrome, Edge, Firefox, Opera, Safari |
| ICO | Microsoft Icon | image/x-icon | .ico, .cur | Chrome, Edge, Firefox, Opera, Safari |
| JPEG | Joint Photographic Expert Group image | image/jpeg | .jpg, .jpeg, .jfif, .pjpeg, .pjp | Chrome, Edge, Firefox, Opera, Safari |
| PNG | Portable Network Graphics | image/png | .png | Chrome, Edge, Firefox, Opera, Safari |
| SVG | Scalable Vector Graphics | image/svg+xml | .svg | Chrome, Edge, Firefox, Opera, Safari |
| TIFF | Tagged Image File Format | image/tiff | .tif, .tiff | None built-in; add-ons required |
| WebP | Web Picture format | image/webp | .webp | Chrome, Edge, Firefox, Opera |
Ошибки загрузки изображений
При загрузке изображения могут возникать некоторые ошибки. Если для события error задан обработчик события onerror, он будет вызван. Здесь вы можете найти ситуации, когда это может произойти:
- Атрибут src пустой ("") или равен null.
- URL из src и URL страницы, на которой в данный момент находится пользователь, совпадают.
- Некоторое повреждение изображения мешает его загрузке.
- Метаданные изображения повреждены таким образом, что невозможно получить его размеры, и при этом в атрибутах тега
<img>не указаны размеры. - Формат не поддерживается пользовательским агентом.
Атрибуты
| Attribute | Value | Description |
|---|---|---|
| align | left right top bottom middle | Определяет выравнивание изображения относительно окружающих элементов. Не поддерживается в HTML5. |
| alt | text | Определяет альтернативный текст для изображения. |
| border | pixels | Определяет ширину рамки вокруг изображения. Не поддерживается в HTML5. |
| crossorigin | anonymous | use-credentials | Определяет, используется ли CORS при загрузке изображения. Изображения, загруженные через CORS, можно использовать в элементе <canvas> без ограничения его функциональности. |
| height | pixels | Определяет высоту изображения. |
| hspace | pixels | Определяет отступы слева и справа от изображения. Не поддерживается в HTML5. |
| ismap | ismap | Указывает, что содержимое тега является серверной картой изображения. |
| longdesc | URL | Указывает URL-адрес с подробным описанием изображения (для краткого описания изображения используйте атрибут alt). Не поддерживается в HTML5. |
| src | URL | Определяет источник изображения. |
| usemap | #mapname | Указывает ссылку на элемент <map>, который содержит координаты для клиентской карты изображения. |
| vspace | pixels | Определяет отступы сверху и снизу изображения. Не поддерживается в HTML5. |
| width | pixels | Определяет ширину изображения. |
Тег <img> поддерживает глобальные атрибуты и атрибуты событий.
Устаревшие атрибуты
| Attribute | Values | Description | Alternate |
|---|---|---|---|
| align | left right top bottom middle | Определяет выравнивание изображения относительно окружающих элементов.Центрирует HTML-изображение относительно окружающих элементов. | Свойства CSS float и/или vertical-align. |
| border | pixels | Определяет ширину рамки вокруг изображения. | Свойство CSS border. |
| hspace | Вместо этого используйте свойство CSS margin. | ||
| name | Указывает имя элемента | Атрибут id. | |
| vspace | pixels | Определяет отступы сверху и снизу изображения. | Вместо этого используйте свойство CSS margin. |
Практика
Какие атрибуты можно использовать с тегом HTML <img>?