# Como otimizar imagens para a web sem perder qualidade
[Canonical HTML page](https://gradiently.design/pt-br/guide/lighthouse-image-performance)
As imagens costumam ser a parte mais pesada de uma página e o motivo das reclamações do Lighthouse. Aqui está um método que funciona: os tamanhos certos em pixels, o formato certo, marcação responsiva e dicas de carregamento, sem perda visível.
## The short version
- Para otimizar imagens para a web, exporte cada imagem no tamanho em que ela é exibida, mais ou menos o dobro para telas de alta densidade, em vez de subir o original.
- AVIF e WebP geram arquivos bem menores que JPEG e PNG com qualidade visual parecida, e todos os navegadores atuais suportam WebP.
- Os atributos srcset e sizes deixam o navegador baixar a menor imagem que ainda fica nítida em cada tela.
- Use lazy loading com loading="lazy" nas imagens abaixo da dobra, mas carregue a imagem principal de destaque logo de cara com fetchpriority="high", porque ela costuma definir o Largest Contentful Paint.
- Sempre defina width e height nas imagens para que o navegador reserve o espaço e o layout não pule enquanto elas carregam.
Para **otimizar imagens para a web** sem perda visível, faça cinco coisas: exporte cada imagem no tamanho em pixels em que ela aparece (mais ou menos o dobro para telas nítidas), escolha um formato moderno como AVIF ou WebP, comprima com qualidade moderada e compare no olho, sirva vários tamanhos com `srcset` e use lazy loading em tudo que está abaixo da dobra. Esses passos resolvem a maior parte dos avisos de imagem no Lighthouse e costumam reduzir muito o peso da página, porque a foto original direto da câmera ou da ferramenta de design é muitas vezes maior do que a tela precisa.
## Passo 1: exporte no tamanho exibido
Uma imagem exibida com 800 pixels de largura não precisa ter 4.000 pixels. O Lighthouse aponta imagens grandes demais porque os pixels extras são baixados, decodificados e jogados fora. Meça a largura da imagem no seu layout no maior tamanho em que ela aparece e exporte com cerca do dobro dessa largura para celulares e notebooks de alta densidade. Passar de duas vezes raramente fica mais nítido e sempre custa bytes.
| Imagem | Exibida com | Largura de exportação |
| --- | --- | --- |
| Destaque em largura total | Até 1920 px | 1920 px, mais versões menores |
| Imagem de artigo | Cerca de 720 px | 1440 px |
| Miniatura de card | Cerca de 360 px | 720 px |
| Avatar | 48 px | 96 px |
| Imagem Open Graph | Fora do site | Exatamente 1200×630 |
Metas típicas. O destaque em largura total é a exceção ao dobro: 1920 px cobre a maioria das telas, e telas muito grandes recebem uma imagem um pouco mais suave a um custo sensato.
- Destaque do site 1920×1080: 1920 × 1080
- Banner de blog 1200×600: 1200 × 600
- Prévia de link 1200×630: 1200 × 630
Três tamanhos comuns de imagem na web, em escala. Crie no tamanho final para que nada seja cortado ou redimensionado depois da exportação.
## Passo 2: escolha o formato certo
O formato importa mais do que qualquer controle de compressão. O AVIF costuma gerar o menor arquivo, o WebP chega perto e funciona em todos os navegadores atuais, e JPEG e PNG continuam sendo as alternativas seguras. [WebP ou PNG](https://gradiently.design/pt-br/guide/webp-images) e [PNG ou JPG](https://gradiently.design/pt-br/guide/png-vs-jpeg) se aprofundam em cada par.
| Formato | Melhor para | Observações |
| --- | --- | --- |
| AVIF | Fotos, degradês, destaques grandes | Arquivos menores; codificação mais lenta |
| WebP | Quase tudo | Com e sem perda, transparência, amplo suporte |
| JPEG | Fotos, como alternativa | Sem transparência; cria faixas em degradês suaves |
| PNG | Capturas de tela, gráficos chapados, transparência | Sem perda e pesado para fotos |
| SVG | Logos, ícones, ilustrações | Vetorial, minúsculo quando simples; veja [SVG ou PNG](https://gradiently.design/pt-br/guide/svg-vs-png) |
Escolha pelo conteúdo, não pelo hábito. Degradês suaves são o caso mais difícil para o JPEG, e é aí que WebP e AVIF mais ajudam.
> **Degradês comprimem mal** Transições de cor suaves mostram a compressão como degraus visíveis. Acrescente um pouco de granulação antes de exportar, como explica [banding em degradês](https://gradiently.design/pt-br/guide/gradient-banding), e o codificador pode trabalhar mais pesado sem ninguém perceber. Melhor ainda: desenhe os degradês da web em CSS.
Um degradê de destaque em uns 70 bytes: `linear-gradient(160deg, #0f172a 0%, #1e3a8a 50%, #0ea5e9 100%)`
Este degradê, em CSS, custa menos que uma linha da página. Exportado como imagem de 1920×1080, a mesma coisa pesaria muitos kilobytes. Veja [desempenho de degradês CSS](https://gradiently.design/pt-br/guide/css-gradient-performance).
## Passo 3: comprima, depois olhe
Os formatos com perda têm um ajuste de qualidade, e o valor certo depende da imagem. Comece em torno de 75 a 80 no WebP e de 50 a 60 no AVIF, exporte e compare com o original em 100% de zoom. Baixe até enxergar uma diferença e depois volte um passo. Rostos, texto pequeno e degradês precisam de mais qualidade do que paisagens cheias de detalhes. [Compressão de imagens](https://gradiently.design/pt-br/guide/image-compression) explica o que o codificador descarta.
Aproveite e remova os metadados, como dados da câmera e miniaturas embutidas. A maioria das ferramentas de exportação faz isso com uma caixinha, e elimina bytes que ninguém vê.
## Passo 4: marcação responsiva com srcset e sizes
Com várias larguras exportadas, deixe o navegador escolher. O `srcset` lista os arquivos e suas larguras; o `sizes` diz ao navegador com que largura a imagem vai aparecer. O navegador então baixa o menor arquivo que fica nítido o bastante naquela tela.
```html
```
O navegador usa a primeira fonte que suporta. O elemento img é ao mesmo tempo a alternativa e o lugar do alt, do width, do height e das dicas de carregamento.
Para uma imagem dentro de uma coluna, descreva o layout no `sizes`, por exemplo `sizes="(min-width: 1024px) 720px, 100vw"`. Errar o `sizes` é o motivo mais comum para uma configuração responsiva continuar baixando o arquivo grande.
## Passo 5: as dicas de carregamento que importam
```html
```
Largura e altura deixam o navegador reservar o espaço pela proporção, então nada se mexe quando as imagens chegam. O CSS ainda pode deixar a imagem fluida com max-width: 100% e height: auto.
### Erros comuns
- `loading="lazy"` na imagem de destaque
- Sem width e height, então a página pula
- Um arquivo enorme para todas as telas
- Um JPEG de um logo chapado ou de uma captura de tela
- Fundos em degradê salvos como imagem
### Em vez disso
- O destaque carrega logo, com `fetchpriority="high"`
- Defina os dois atributos em todo img
- `srcset` com três ou quatro larguras
- SVG ou PNG para gráficos chapados
- Degradês em CSS, com granulação se precisar
Essas dicas se ligam diretamente às Core Web Vitals. A imagem de destaque muitas vezes é o elemento do Largest Contentful Paint, que segundo o [web.dev](https://web.dev/articles/lcp) deve aparecer em até 2,5 segundos, e dimensões ausentes são uma causa clássica de mudança de layout. Se o seu destaque é um vídeo e não uma imagem, o mesmo raciocínio vale em [vídeo de fundo para sites](https://gradiently.design/pt-br/guide/video-background-website).
## Checklist antes de publicar
1. **Meça o espaço** Descubra a maior largura em que cada imagem aparece no seu layout.
2. **Exporte nos tamanhos certos** Uma a duas vezes a largura do espaço, mais versões menores para celular.
3. **Escolha o formato** AVIF ou WebP para fotos e degradês, SVG para logos, PNG só quando ele ganhar.
4. **Comprima no olho** Baixe a qualidade até ver uma mudança, depois suba um passo.
5. **Faça a marcação** `srcset`, `sizes`, `width`, `height`, `alt` e lazy loading abaixo da dobra.
6. **Teste** Rode o Lighthouse numa janela anônima e confira as auditorias de imagem e o elemento de LCP.
Boa parte disso fica mais fácil quando a imagem já nasce no tamanho final. No Gradiently você cria uma vez e o Pro redimensiona para todos os tamanhos em um passo, depois exporta PNG, JPG ou SVG em dimensões exatas até 4K, então o destaque, o banner e a [imagem Open Graph](https://gradiently.design/pt-br/guide/open-graph-tags) começam no tamanho que a página vai mostrar.
## FAQ
### Como otimizar imagens para a web sem perder qualidade?
Exporte no tamanho exibido, use AVIF ou WebP, baixe a qualidade só até perceber uma diferença e sirva vários tamanhos com srcset. A maior parte da perda visual vem da compressão pesada, não do redimensionamento.
### Qual é o melhor formato de imagem para sites?
O WebP é o padrão moderno seguro, e o AVIF costuma ser ainda menor. Use SVG para logos e ícones, e mantenha JPEG ou PNG como alternativa.
### Devo usar lazy loading em todas as imagens?
Não. Use lazy loading nas imagens abaixo da dobra, mas carregue a imagem principal de destaque logo de cara, porque atrasá-la deixa o Largest Contentful Paint mais lento.
### Qual deve ser o tamanho das imagens de um site?
Cerca do dobro da largura em que são exibidas, para telas nítidas de alta densidade. Um destaque em largura total com 1920 px cobre a maioria das telas.
### Por que o Lighthouse diz que minhas imagens não estão no tamanho certo?
O arquivo tem mais pixels do que o espaço que ocupa na página. Exporte uma versão menor e use srcset e sizes para o navegador escolher a certa.
```
Largura e altura deixam o navegador reservar o espaço pela proporção, então nada se mexe quando as imagens chegam. O CSS ainda pode deixar a imagem fluida com max-width: 100% e height: auto.
### Erros comuns
- `loading="lazy"` na imagem de destaque
- Sem width e height, então a página pula
- Um arquivo enorme para todas as telas
- Um JPEG de um logo chapado ou de uma captura de tela
- Fundos em degradê salvos como imagem
### Em vez disso
- O destaque carrega logo, com `fetchpriority="high"`
- Defina os dois atributos em todo img
- `srcset` com três ou quatro larguras
- SVG ou PNG para gráficos chapados
- Degradês em CSS, com granulação se precisar
Essas dicas se ligam diretamente às Core Web Vitals. A imagem de destaque muitas vezes é o elemento do Largest Contentful Paint, que segundo o [web.dev](https://web.dev/articles/lcp) deve aparecer em até 2,5 segundos, e dimensões ausentes são uma causa clássica de mudança de layout. Se o seu destaque é um vídeo e não uma imagem, o mesmo raciocínio vale em [vídeo de fundo para sites](https://gradiently.design/pt-br/guide/video-background-website).
## Checklist antes de publicar
1. **Meça o espaço** Descubra a maior largura em que cada imagem aparece no seu layout.
2. **Exporte nos tamanhos certos** Uma a duas vezes a largura do espaço, mais versões menores para celular.
3. **Escolha o formato** AVIF ou WebP para fotos e degradês, SVG para logos, PNG só quando ele ganhar.
4. **Comprima no olho** Baixe a qualidade até ver uma mudança, depois suba um passo.
5. **Faça a marcação** `srcset`, `sizes`, `width`, `height`, `alt` e lazy loading abaixo da dobra.
6. **Teste** Rode o Lighthouse numa janela anônima e confira as auditorias de imagem e o elemento de LCP.
Boa parte disso fica mais fácil quando a imagem já nasce no tamanho final. No Gradiently você cria uma vez e o Pro redimensiona para todos os tamanhos em um passo, depois exporta PNG, JPG ou SVG em dimensões exatas até 4K, então o destaque, o banner e a [imagem Open Graph](https://gradiently.design/pt-br/guide/open-graph-tags) começam no tamanho que a página vai mostrar.
## FAQ
### Como otimizar imagens para a web sem perder qualidade?
Exporte no tamanho exibido, use AVIF ou WebP, baixe a qualidade só até perceber uma diferença e sirva vários tamanhos com srcset. A maior parte da perda visual vem da compressão pesada, não do redimensionamento.
### Qual é o melhor formato de imagem para sites?
O WebP é o padrão moderno seguro, e o AVIF costuma ser ainda menor. Use SVG para logos e ícones, e mantenha JPEG ou PNG como alternativa.
### Devo usar lazy loading em todas as imagens?
Não. Use lazy loading nas imagens abaixo da dobra, mas carregue a imagem principal de destaque logo de cara, porque atrasá-la deixa o Largest Contentful Paint mais lento.
### Qual deve ser o tamanho das imagens de um site?
Cerca do dobro da largura em que são exibidas, para telas nítidas de alta densidade. Um destaque em largura total com 1920 px cobre a maioria das telas.
### Por que o Lighthouse diz que minhas imagens não estão no tamanho certo?
O arquivo tem mais pixels do que o espaço que ocupa na página. Exporte uma versão menor e use srcset e sizes para o navegador escolher a certa.