Definição largura e altura

Quando os navegadores renderizam uma página, eles processam todos os elementos e reserva blocos de espaços para cada um deles, alem de definir os estilos que cada um terá. Para elementos textuais, o conteúdo já foi baixado e o navegador consegue definir facilmente o tamanho que eles devem ter, sendo auxiliados pela folha de estilo.

Entretanto para imagens, videos e iframes esse processo é um pouco diferente. Os navegadores não conseguem determinar o tamanho a ser exibido até que as informações básicas da recurso tenham sido baixadas. Como se trata de um recurso externo a página e que será baixado a parte poderá demorar. Isso vai gerar mudanças de layout, ou os famosos "socos" na página no momento que o tamanho do bloco for computado.

Podemos corrigir esse comportamento indicando para o navegador qual o tamanho do recurso diretamente nas tag HTML através dos atributos width e height. Dessa maneira, o navegador não precisará esperar o recurso carregar e irá usar os valores definidos na tag. Isso evitará mudanças de layout e reduzirá o tempo para renderizar a exibição básica dos elementos, sendo relevante para o LCP e o CLS.

Exemplo

<!-- Define 640:360, ou seja, uma proporção de 16:9 -->
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons" />

O uso de CSS pode ser usado para que os recursos carregados não fiquem foram de proporção se tiverem dentro de um container.

Exemplo

img {
  height: auto;
  width: 100%;
}