Привет всем! Сегодня минималистичный пост, который рассмотрит все возможные варианты добавления изображения на html-страницу. Вдруг пригодится?
Для добавления изображения на HTML страницу можно использовать тег . Вот как это можно сделать:

1. Укажите тег , указав его атрибуты src, alt и title, например:

• атрибут «src» указывает путь к изображению (может быть относительным или абсолютным);
• атрибут «alt» описывает изображение для пользователей, которые не могут его увидеть, например, если картинка не загрузилась;
• атрибут «title» показывает всплывающую подсказку при наведении на изображение.

1. Можно также использовать тег figure и figcaption для добавления подписи к изображению:

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

1. Если изображение находится на другом сервере, то для добавления его на свою HTML страницу можно использовать тег iframe, например:

1. Еще один способ добавления изображения на HTML страницу — это использование тега picture. Он позволяет загружать разные изображения в зависимости от размера экрана и устройства пользователя, например:

Дублирую код текстом, почему-то именно этот кусок чаще всего выдает ошибку если просто вставить как фрагмент кода 🙂 :
<picture>
<source media="(max-width: 600px)" srcset="small-image.jpg">
<source media="(min-width: 601px)" srcset="big-image.jpg">
<img src="fallback-image.jpg" alt="Image capture">
</picture>
— атрибут «media» определяет, когда нужно использовать конкретное изображение;
— атрибут «srcset» указывает путь к изображению для заданного размера экрана.

1. Для добавления картинки на HTML-страницу с помощью CSS можно использовать свойство background-image. Вот пример:

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

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

background-repeat — определяет, должно ли изображение повторяться или нет;
background-size — устанавливает размер изображения на фоне (например, cover означает, что изображение будет растянуто на всю ширину и высоту, чтобы полностью заполнить фон).
Важно отметить, что свойство background-image применяется к элементу, на котором оно задано, и его дочерним элементам. Если нужно задать изображение только для конкретного элемента (например, для заголовка страницы), то нужно добавить соответствующий селектор к правилу CSS.

Также можно использовать content и ::before / ::after псевдоэлементы, чтобы добавить изображение на страницу, например:

.element::before {
content: "";
background-image: url('path/to/image.jpg');
display: inline-block;
width: 100px;
height: 100px;
/*дополнительные свойства для настройки отображения*/
}

В этом примере мы используем псевдоэлемент ::before, чтобы добавить изображение перед содержимым элемента с классом .element. Задаем изображение в качестве фона и устанавливаем размеры псевдоэлемента с помощью свойств width и height. Для отображения псевдоэлемента как блочного элемента используем свойство display: inline-block;.

Это не все возможные варианты, но они наиболее часто используются при добавлении изображений на HTML страницу.

Как всегда — в случае возникновения вопросов пишите на почту, или в Telegram 🙂