Como é que o navegador determina a resolução da imagem antes de a exibir?

O navegador determina a resolução da imagem analisando os metadados do arquivo e as suas dimensões reais em pixels. Ao carregar a imagem, o navegador lê os cabeçalhos do arquivo (por exemplo, em formato JPEG, PNG) e extrai informações sobre a largura e a altura em pixels. Esses dados são usados para reservar espaço para a imagem na página antes do seu carregamento completo, ajudando a evitar deslocamentos de conteúdo.

Além disso, estilos CSS e atributos HTML (por exemplo, width e height) podem influenciar o tamanho exibido, mas a resolução original é determinada a partir dos dados do arquivo. Se a imagem for escalada, o navegador ajusta-a às dimensões especificadas, mantendo ou alterando as proporções.