# 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.

{% code title="Exemplo" %}

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

{% endcode %}

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.&#x20;

{% code title="Exemplo" %}

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

{% endcode %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://partners.tray.com.br/themes/construindo-seu-template/core-web-vitals/desempenho/definicao-largura-e-altura.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.