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

`<img>` — это содержимое страницы, `background-image` — оформление.

img

<img src="product.jpg" alt="Красная кружка 300 мл" width="400" height="300" loading="lazy" />

• Есть alt — изображение доступно скринридерам и индексируется поисковиками.
• Работают srcset/sizes и loading="lazy".
• Подходит для фото товаров, иллюстраций, аватаров — всего, что несёт смысл.

background-image

.hero {
  background: url('pattern.svg') center / cover no-repeat;
}

• Нет alt, скринридер изображение не видит.
• Удобно позиционировать и масштабировать (background-size, background-position), накладывать несколько слоёв и градиенты.
• Подходит для декоративных фонов и паттернов.

Нюанс загрузки

Фоновая картинка обнаруживается браузером позже — после загрузки CSS, поэтому для главного изображения первого экрана лучше <img> (или preload).

Коротко для собеседования

Содержательная картинка — <img> с alt, декоративная — background-image.

Подробнее: MDN — Изображения в HTML