# Otimizar imagens para a web sem perder qualidade
[Canonical HTML page](https://gradiently.design/pt-pt/guide/lighthouse-image-performance)
As imagens são quase sempre a parte mais pesada de uma página e o motivo das queixas do Lighthouse. Aqui fica um método que funciona: tamanhos certos, formato certo, marcação responsiva e indicações de carregamento, sem perda visível.
## The short version
- Para otimizar imagens para a web, exporta cada imagem no tamanho em que é apresentada, cerca do dobro para ecrãs de alta densidade, em vez de carregares o original.
- O AVIF e o WebP geram ficheiros muito mais pequenos do que o JPEG e o PNG com qualidade visual semelhante, e todos os navegadores atuais suportam WebP.
- Os atributos srcset e sizes deixam o navegador descarregar a imagem mais pequena que ainda fica nítida em cada ecrã.
- Aplica lazy loading às imagens abaixo da dobra com loading="lazy", mas carrega logo a imagem principal com fetchpriority="high", porque costuma decidir o Largest Contentful Paint.
- Define sempre width e height nas imagens, para o navegador reservar espaço e o layout não saltar enquanto carregam.
Para **otimizar imagens para a web** sem perda visível, faz cinco coisas: exporta cada imagem no tamanho em píxeis em que é apresentada (cerca do dobro, para ecrãs nítidos), escolhe um formato moderno como AVIF ou WebP, comprime com uma qualidade moderada e compara a olho, serve vários tamanhos com `srcset` e aplica lazy loading a tudo o que fica abaixo da dobra. Estes passos resolvem a maioria dos avisos de imagens no Lighthouse e costumam reduzir bastante o peso da página, porque a fotografia original, vinda diretamente da câmara ou da ferramenta de design, é muitas vezes maior do que o ecrã precisa.
## Passo 1: exporta no tamanho em que mostras
Uma imagem apresentada com 800 píxeis de largura não precisa de ter 4000. O Lighthouse assinala imagens demasiado grandes porque os píxeis a mais são descarregados, descodificados e deitados fora. Mede a largura máxima da imagem no teu layout e exporta com cerca do dobro, para telemóveis e portáteis de alta densidade. Passar do dobro raramente se nota na nitidez e custa sempre bytes.
| Imagem | Apresentada a | Largura de exportação |
| --- | --- | --- |
| Hero em largura total | Até 1920 px | 1920 px, mais versões menores |
| Imagem de artigo | Cerca de 720 px | 1440 px |
| Miniatura de cartão | Cerca de 360 px | 720 px |
| Avatar | 48 px | 96 px |
| Imagem Open Graph | Fora do site | 1200×630 exatos |
Valores típicos. O hero em largura total é a exceção ao dobro: 1920 px cobre a maioria dos ecrãs, e os ecrãs muito grandes recebem uma imagem ligeiramente suave a um custo sensato.
- Hero de site 1920×1080: 1920 × 1080
- Banner de blogue 1200×600: 1200 × 600
- Pré-visualização de link 1200×630: 1200 × 630
Três tamanhos comuns de imagens web desenhados à escala. Desenha no tamanho final para que nada seja cortado ou redimensionado depois de exportar.
## Passo 2: escolhe o formato certo
O formato pesa mais do que qualquer controlo de compressão. O AVIF costuma dar o ficheiro mais pequeno, o WebP chega perto e é suportado em todo o lado nos navegadores atuais, e o JPEG e o PNG continuam a ser as alternativas seguras. [WebP vs PNG](https://gradiently.design/pt-pt/guide/webp-images) e [PNG vs JPG](https://gradiently.design/pt-pt/guide/png-vs-jpeg) aprofundam cada par.
| Formato | Ideal para | Notas |
| --- | --- | --- |
| AVIF | Fotografias, gradientes, heros grandes | Ficheiros mais pequenos; codificação mais lenta |
| WebP | Quase tudo | Com e sem perdas, transparência, ampla compatibilidade |
| JPEG | Fotografias, como alternativa | Sem transparência; cria bandas em gradientes suaves |
| PNG | Capturas de ecrã, gráficos planos, transparência | Sem perdas e pesado para fotografias |
| SVG | Logótipos, ícones, ilustrações | Vetorial, minúsculo quando simples; vê [SVG vs PNG](https://gradiently.design/pt-pt/guide/svg-vs-png) |
Escolhe pelo conteúdo, não pelo hábito. Os gradientes suaves são o caso mais difícil para o JPEG, e é aí que o WebP e o AVIF mais ajudam.
> **Os gradientes comprimem mal** As transições suaves de cor mostram a compressão como degraus visíveis. Junta um pouco de grão antes de exportar, como se descreve em [banding em gradientes](https://gradiently.design/pt-pt/guide/gradient-banding), e o codificador pode comprimir mais sem que ninguém repare. Melhor ainda, desenha os gradientes web em CSS.
Um gradiente de hero em cerca de 70 bytes: `linear-gradient(160deg, #0f172a 0%, #1e3a8a 50%, #0ea5e9 100%)`
Este gradiente, em CSS, custa menos do que uma única linha da página. Exportado como imagem de 1920×1080, pesaria muitos kilobytes. Vê [desempenho dos gradientes CSS](https://gradiently.design/pt-pt/guide/css-gradient-performance).
## Passo 3: comprime e depois olha
Os formatos com perdas têm uma definição de qualidade, e o valor certo depende da imagem. Começa por 75 a 80 no WebP e por 50 a 60 no AVIF, exporta e compara com o original a 100% de zoom. Baixa até veres diferença e depois sobe um degrau. Rostos, texto fino e gradientes precisam de mais qualidade do que paisagens cheias de detalhe. [Compressão de imagem](https://gradiently.design/pt-pt/guide/image-compression) explica o que o codificador deita fora.
Aproveita para retirar os metadados, como dados da câmara e miniaturas incorporadas. A maioria das ferramentas de exportação faz isso com uma caixa de seleção, e elimina bytes que ninguém vê.
## Passo 4: marcação responsiva com srcset e sizes
Com várias larguras exportadas, deixa o navegador escolher. O `srcset` lista os ficheiros e as respetivas larguras; o `sizes` diz ao navegador que largura a imagem terá. O navegador descarrega então o ficheiro mais pequeno que ainda é nítido naquele ecrã.
```html
```
O navegador usa a primeira source que suporta. O elemento img é a alternativa e também o sítio do alt, width, height e das indicações de carregamento.
Para uma imagem dentro de uma coluna, descreve o layout em `sizes`, por exemplo `sizes="(min-width: 1024px) 720px, 100vw"`. Errar no `sizes` é o motivo mais comum de uma configuração responsiva continuar a descarregar o ficheiro grande.
## Passo 5: indicações de carregamento que contam
```html
```
Width e height deixam o navegador reservar espaço a partir da proporção, para nada se deslocar à medida que as imagens chegam. O CSS pode continuar a tornar a imagem fluida com max-width: 100% e height: auto.
### Erros comuns
- `loading="lazy"` na imagem hero
- Sem width e height, por isso a página salta
- Um ficheiro enorme para todos os ecrãs
- Um JPEG de um logótipo plano ou de uma captura de ecrã
- Fundos em gradiente guardados como imagens
### Em vez disso
- O hero carrega de imediato com `fetchpriority="high"`
- Define os dois atributos em todas as img
- `srcset` com três ou quatro larguras
- SVG ou PNG para gráficos planos
- Gradientes CSS, com grão se for preciso
Estas indicações correspondem diretamente às Core Web Vitals. A imagem hero é muitas vezes o elemento do Largest Contentful Paint, que a [web.dev](https://web.dev/articles/lcp) recomenda que seja apresentado em 2,5 segundos, e a falta de dimensões é uma causa clássica de mudança de layout. Se o teu hero for um vídeo em vez de uma imagem, aplica-se o mesmo raciocínio em [vídeos de fundo para sites](https://gradiently.design/pt-pt/guide/video-background-website).
## Uma lista de verificação antes de publicares
1. **Mede o espaço** Descobre a maior largura apresentada de cada imagem no teu layout.
2. **Exporta nos tamanhos certos** Uma a duas vezes a largura do espaço, mais versões menores para telemóveis.
3. **Escolhe o formato** AVIF ou WebP para fotografias e gradientes, SVG para logótipos, PNG só quando compensa.
4. **Comprime a olho** Baixa a qualidade até notares uma mudança e depois sobe um degrau.
5. **Marca o código** `srcset`, `sizes`, `width`, `height`, `alt` e lazy loading abaixo da dobra.
6. **Testa** Corre o Lighthouse numa janela anónima e verifica as auditorias de imagens e o elemento LCP.
Muito disto é mais fácil quando a imagem é feita logo no tamanho final. No Gradiently desenhas uma vez e o Pro redimensiona para todos os tamanhos num só passo, exportando depois PNG, JPG ou SVG com dimensões exatas até 4K, para que o hero, o banner e a [imagem Open Graph](https://gradiently.design/pt-pt/guide/open-graph-tags) comecem cada um no tamanho que a página vai mostrar.
## FAQ
### Como otimizar imagens para a web sem perder qualidade?
Exporta no tamanho apresentado, usa AVIF ou WebP, baixa a qualidade só até notares diferença e serve vários tamanhos com srcset. A maior parte da perda visual vem de compressão excessiva, não do redimensionamento.
### Qual é o melhor formato de imagem para sites?
O WebP é a opção moderna segura e o AVIF costuma ser ainda mais pequeno. Usa SVG para logótipos e ícones e mantém JPEG ou PNG como alternativas.
### Devo aplicar lazy loading a todas as imagens?
Não. Aplica-o às imagens abaixo da dobra, mas carrega logo a imagem hero, porque atrasá-la piora o Largest Contentful Paint.
### Que tamanho devem ter as imagens de um site?
Cerca do dobro da largura em que são apresentadas, para ecrãs nítidos de alta densidade. Um hero em largura total com 1920 px cobre a maioria dos ecrãs.
### Porque diz o Lighthouse que as minhas imagens não têm o tamanho certo?
O ficheiro tem mais píxeis do que o espaço que ocupa na página. Exporta uma versão menor e usa srcset e sizes para o navegador escolher a adequada.
```
Width e height deixam o navegador reservar espaço a partir da proporção, para nada se deslocar à medida que as imagens chegam. O CSS pode continuar a tornar a imagem fluida com max-width: 100% e height: auto.
### Erros comuns
- `loading="lazy"` na imagem hero
- Sem width e height, por isso a página salta
- Um ficheiro enorme para todos os ecrãs
- Um JPEG de um logótipo plano ou de uma captura de ecrã
- Fundos em gradiente guardados como imagens
### Em vez disso
- O hero carrega de imediato com `fetchpriority="high"`
- Define os dois atributos em todas as img
- `srcset` com três ou quatro larguras
- SVG ou PNG para gráficos planos
- Gradientes CSS, com grão se for preciso
Estas indicações correspondem diretamente às Core Web Vitals. A imagem hero é muitas vezes o elemento do Largest Contentful Paint, que a [web.dev](https://web.dev/articles/lcp) recomenda que seja apresentado em 2,5 segundos, e a falta de dimensões é uma causa clássica de mudança de layout. Se o teu hero for um vídeo em vez de uma imagem, aplica-se o mesmo raciocínio em [vídeos de fundo para sites](https://gradiently.design/pt-pt/guide/video-background-website).
## Uma lista de verificação antes de publicares
1. **Mede o espaço** Descobre a maior largura apresentada de cada imagem no teu layout.
2. **Exporta nos tamanhos certos** Uma a duas vezes a largura do espaço, mais versões menores para telemóveis.
3. **Escolhe o formato** AVIF ou WebP para fotografias e gradientes, SVG para logótipos, PNG só quando compensa.
4. **Comprime a olho** Baixa a qualidade até notares uma mudança e depois sobe um degrau.
5. **Marca o código** `srcset`, `sizes`, `width`, `height`, `alt` e lazy loading abaixo da dobra.
6. **Testa** Corre o Lighthouse numa janela anónima e verifica as auditorias de imagens e o elemento LCP.
Muito disto é mais fácil quando a imagem é feita logo no tamanho final. No Gradiently desenhas uma vez e o Pro redimensiona para todos os tamanhos num só passo, exportando depois PNG, JPG ou SVG com dimensões exatas até 4K, para que o hero, o banner e a [imagem Open Graph](https://gradiently.design/pt-pt/guide/open-graph-tags) comecem cada um no tamanho que a página vai mostrar.
## FAQ
### Como otimizar imagens para a web sem perder qualidade?
Exporta no tamanho apresentado, usa AVIF ou WebP, baixa a qualidade só até notares diferença e serve vários tamanhos com srcset. A maior parte da perda visual vem de compressão excessiva, não do redimensionamento.
### Qual é o melhor formato de imagem para sites?
O WebP é a opção moderna segura e o AVIF costuma ser ainda mais pequeno. Usa SVG para logótipos e ícones e mantém JPEG ou PNG como alternativas.
### Devo aplicar lazy loading a todas as imagens?
Não. Aplica-o às imagens abaixo da dobra, mas carrega logo a imagem hero, porque atrasá-la piora o Largest Contentful Paint.
### Que tamanho devem ter as imagens de um site?
Cerca do dobro da largura em que são apresentadas, para ecrãs nítidos de alta densidade. Um hero em largura total com 1920 px cobre a maioria dos ecrãs.
### Porque diz o Lighthouse que as minhas imagens não têm o tamanho certo?
O ficheiro tem mais píxeis do que o espaço que ocupa na página. Exporta uma versão menor e usa srcset e sizes para o navegador escolher a adequada.