Тег img позволяет легко добавлять изображения на ваш сайт. Он поддерживает множество форматов, а разнообразные атрибуты могут еще больше расширить возможности тега img в HTML.
Для чего нужен тег img?
HTML-тег «img» вставляет изображения и графику на веб-сайты. Тег img функционирует как заполнитель, при этом сохраненный атрибут src ссылается на фактическое место хранения графики при обращении к веб-сайту. Затем изображение встраивается в веб-сайт. В дополнение к атрибуту src требуется атрибут alt. В нем хранится альтернативный текст на случай, если изображение не может быть отображено. JPEG, GIF, PNG и некоторые другие поддерживаются тегом img в HTML.
Каков синтаксис тега img?
Синтаксис тега img прост и состоит всего из нескольких компонентов. Самый простой вариант — это:
<img src="redcar.png" alt="small red car at a traffic light">Чтобы обеспечить правильное отображение графики, при использовании тега img на сайте целесообразно указать высоту и ширину изображения. Эти параметры можно найти в HTML-атрибутахwidth и height. Код должен выглядеть следующим образом:
<img src="redcar.png" width="500" height="200" alt="small red car at a traffic light">Атрибут loading также рекомендуется использовать при использовании тега img в HTML. Это гарантирует, что соответствующая графика будет загружена только тогда, когда пользователи прокрутят страницу до соответствующей позиции. Для этой функции установите значение атрибута loading на lazy. Вот как это должно выглядеть в коде:
<img src="redcar.png" width="500" height="200" alt="small red car at a traffic light" loading="lazy">Какие атрибуты можно использовать в теге img в HTML?
Помимо атрибутов width, height и loading, есть еще несколько атрибутов, которые поддерживаются тегом img в HTML. К ним относятся все глобальные, событийные и другие специфические атрибуты. Ниже приведен обзор атрибутов, которые можно использовать с тегом img:
|
Атрибут |
Значение |
Описание |
|
старый |
«Текст» |
Обязательный; указывает альтернативный текст для изображения. |
|
crossorigin |
анонимный, использовать учетные данные |
Указывает, какие сторонние сайты могут получить доступ к соответствующему изображению с помощью скрипта. |
|
декодирование |
автоматическое, синхронное, асинхронное |
Определяет, как и может ли изображение быть декодировано. |
|
высота |
Пиксель или процент |
Устанавливает высоту изображения на сайте. |
|
ismap |
истина, ложь |
Управляет доступом изображения к карте изображений на стороне сервера. |
|
загрузка |
авто, нетерпеливый, ленивый |
Определяет, когда изображение должно загрузиться. |
|
referrerpolicy |
no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url |
Указывает, поступает ли изображение из небезопасного источника. |
|
размеры |
sizes |
Определяет размеры изображения для различных макетов страницы. |
|
src |
URL |
Обязательный; определяет URI-адрес изображения. |
|
srcset |
Списки URL |
Хранит список изображений для различных целей, например, для разных устройств и размеров. |
|
usemap |
#имя карты |
Связывает элемент с определенной картой изображений. |
|
ширина |
Пиксель или процент |
Указывает ширину изображения. |
Хотя перечисленные выше атрибуты обычно используются в теге img, есть и другие атрибуты, которые устарели со времен HTML5 и HTML 5.1, такие как align, border, hspace, longdesk и vspace.
Конструктор сайтов от IONOS — это идеальный инструмент для создания индивидуального и профессионального сайта. С его помощью вы сможете создать свое присутствие в Интернете, руководствуясь своими идеями, без особых предварительных знаний. Наши опытные специалисты также будут рады помочь вам, если вы предпочтете доверить эту задачу профессионалам.