Qual é a diferença entre inserir uma imagem usando a tag <img> e definir um fundo através do CSS?

A tag <img> é usada para inserir uma imagem como conteúdo separado na página. É um elemento semanticamente significativo que os navegadores e motores de busca reconhecem como uma imagem. Suporta atributos alt, o que é importante para SEO e acessibilidade.

A definição de fundo via CSS (background-image) é usada para fins decorativos: imagens de fundo não são consideradas conteúdo da página e não são indexadas como elementos separados. Elas não suportam texto alternativo e não afetam diretamente o SEO.

Principais diferenças:

• <img> adiciona a imagem ao fluxo do documento, influencia a formatação e é interativa.
• Imagens de fundo via CSS não afetam a estrutura do documento e são usadas para decoração.

Exemplo:

<img src="logo.png" alt="Logotipo da empresa">

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

Do ponto de vista de desempenho, <img> permite ao navegador gerenciar melhor o carregamento e o cache, enquanto imagens de fundo podem ser carregadas apenas quando necessário (por exemplo, ao exibir o elemento).