Тег <img> используется для вставки изображений как самостоятельного контента на страницу. Он является семантическим элементом, который браузер обрабатывает как отдельный объект с собственными атрибутами (alt, width, height и т.д.). Изображение через <img> участвует в потоке документа и влияет на его размер и расположение.

CSS-свойство background-image задаёт изображение как фон для элемента. Это декоративный элемент, который не влияет на структуру документа и не воспринимается как контент. Фоновое изображение не имеет атрибутов, таких как alt, и не индексируется поисковиками как отдельное изображение.

Основные отличия:

<img> — контент, background-image — оформление.
<img> влияет на размер и поток документа, фон — нет.
<img> поддерживает альтернативный текст, фон — нет.
Фон можно легко позиционировать, повторять, изменять размер с помощью CSS.

Пример:

<img src="photo.jpg" alt="Описание фото" width="300" height="200">

<div style="width:300px; height:200px; background-image: url('photo.jpg'); background-size: cover;"></div>

В чем состоят отличия между тегом img и CSS-свойством background-image при добавлении изображений на страницу?