Тег <img> используется для вставки изображения как отдельного содержимого на страницу. Это семантически значимый элемент, который браузеры и поисковые системы распознают как изображение. Он поддерживает атрибуты alt, что важно для SEO и доступности.

Задание фона через CSS (background-image) применяется для декоративных целей — фоновые изображения не считаются содержимым страницы и не индексируются как отдельные элементы. Они не поддерживают альтернативный текст и не влияют на SEO напрямую.

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

<img> добавляет изображение в поток документа, влияет на разметку и доступен для взаимодействия.
Фоновое изображение через CSS не влияет на структуру документа и служит для оформления.

Пример:

<img src="logo.png" alt="Логотип компании">

<div style="background-image: url('pattern.png'); width: 200px; height: 200px;"></div>

С точки зрения производительности, <img> позволяет браузеру лучше управлять загрузкой и кэшированием, а фоновые изображения могут быть загружены только при необходимости (например, при отображении элемента).

В чем разница между вставкой изображения с помощью тега <img> и задание фона через CSS?