Como é que o navegador determina qual a imagem que deve ser carregada?

O navegador determina que é necessário carregar uma imagem ao analisar o documento HTML. Quando o analisador encontra as tags <img>, <picture> ou o atributo background-image em CSS, ele entende que deve fazer uma requisição para obter o recurso (arquivo de imagem) especificado nos atributos src, srcset, data ou na regra CSS URL.

O processo inclui:

1. Análise de HTML/CSS: O navegador lê e analisa linha por linha o código HTML. Ao detectar tags <img>, <picture> com source ou regras CSS com background-image, ele extrai a URL da imagem.
2. Criação de um nó no DOM/CSSOM: Para cada imagem, é criado um nó correspondente no Modelo de Objeto do Documento (DOM) ou uma regra é definida no Modelo de Objeto de Folhas de Estilo em Cascata (CSSOM).
3. Formação da requisição: O navegador forma uma requisição HTTP ao servidor indicada na URL da imagem. A requisição geralmente é do tipo GET.
4. Envio da requisição: A requisição formada é enviada ao servidor.
5. Recepção da resposta: O servidor processa a requisição e envia uma resposta contendo os dados da imagem.
6. Decodificação e renderização: O navegador recebe os dados da imagem, os decodifica (por exemplo, JPEG, PNG, GIF) e os exibe no local correspondente da página web.

Para <picture> e srcset, o navegador usa informações do dispositivo (tamanho da tela, resolução) e as condições de mídia indicadas para determinar qual imagem do conjunto de fontes carregar.

Exemplo de HTML com a tag <img>:

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

Exemplo de CSS com background-image:

.header {
  background-image: url('/images/header-bg.jpg');
}