Quando usar a tag <img> e a propriedade background-image?

TLDR

Prefira usar background-image quando a imagem gabaritar (ou quase) essa lista:

• Não for a maior imagem da página
• Não tenha que ser a primeira a carregar
• Tenha sido previamente comprimida
• For meramente decorativa
• Necessita de uma composição complexa (overlays)

Mas porque? No final não dá tudo no mesmo?
Imagens são conteúdo, mesmo as decorativas, então queremos que elas carreguem o mais rápido que puderem.

A questão do carregamento

A google criou uma métrica pra medir esse carregamento de conteúdo na página - a LCP (Largest Contentful Paint) mede quanto tempo leva pro maior conteúdo da página carregar.

Ela considera imagens, videos e blocos de texto como conteúdo e mede o maior conteúdo em área pois é uma métrica de velocidade percebida de carregamento, afinal, performance é sobre experiência de usuário.

No exemplo abaixo eu carrego 3 imagens em uma página, duas via tag <img> no HTML e uma via background-image no CSS.

As imagens tem do HTML pesam 7kb, e 15kb e a do CSS pesa 175kb. Ao inspecionar pela tab Performance do devTools, as imagens do HTML carregaram em paralelo ao CSS, já a terceira imagem carregou apenas quando o arquivo de CSS foi encontrado.

Isso porque pra encontrar a imagem carregada pelo CSS, foi necessário processar todo o arquivo CSS. No vídeo do tweet
abaixo simulei 3g lento no navegador.
As duas imagens do HTML carregam quase que simultaneamente, enquanto a maior do fundo leva bem mais tempo pra começar a carregar.

Controle de prioridade da imagem

Outro ponto também é que a imagem carregada pelo CSS vem com uma prioridade de carregamento menor do que as imagens declaradas já no HTML.

Apesar de imagens serem um recurso com prioridade baixa em relação a outros arquivos, a localização influencia. Você pode conferir sobre esses critérios de prioridade no post sobre a FetchPriority API do web.dev em inglês.

Há casos também que queremos despriorizar o carregamento das imagens, como pra imagens que não aparecem imediatamente no viewport do usuário.
Podemos fazer isso direto pelo HTML usando o atributo loading="lazy".

Além disso, usando a tag <picture> conseguimos carregar imagens com formatos mais leves, otimizados e com fallback usando a tag <picture> + <source> e tamanhos diferentes da mesma imagem dependendo do viewport com os atributos srcset e sizes.

Picture com source	Img com srcset

"Po mas então eu NUNCA vou usar background-image"

Calma lá que pra esse tem solução. Caso você realmente precise usar um background, você pode fazer o preload dele pelo HTML, tomando o cuidado pra fazer após às tags de estilo.

Temos muitos avanços pra imagens via CSS como a função CSS image() que possuí fallbacks e possibilita uma melhor direção de arte da imagem que só o HTML não oferece, mas em relação à controle de performance o HTML ainda é imbatível.