O Melhor Tamanho e Formato de Imagem para Sites em 2026
Imagens não otimizadas são a principal causa de sites lentos. Este guia traz recomendações concretas de dimensões, tamanhos de arquivo e formatos de imagem baseadas em como as imagens são realmente exibidas em sites modernos.
A Regra de Ouro: Sirva as Imagens no Tamanho de Exibição
Nunca envie uma imagem de 4000px de largura se ela só vai ser exibida a 800px de largura. O navegador baixa a imagem completa, mas a exibe em uma fração do tamanho — todo esse dado extra é banda desperdiçada.
Sempre redimensione suas imagens ao tamanho máximo em que serão exibidas antes de enviá-las.
Dimensões Recomendadas por Caso de Uso
| Tipo de Imagem | Largura Máxima | Tamanho de Arquivo Alvo |
|---|---|---|
| Banner/hero de largura total | 1920px | Abaixo de 200 KB |
| Imagem destacada de post | 1200px | Abaixo de 100 KB |
| Imagem embutida no post | 800px | Abaixo de 60 KB |
| Foto de produto (e-commerce) | 1000px | Abaixo de 80 KB |
| Miniatura / imagem de card | 400px | Abaixo de 25 KB |
| Logotipo (raster) | 200px | Abaixo de 10 KB |
| Textura de fundo | 1000px (mosaico) | Abaixo de 30 KB |
Recomendações de Melhor Formato
- Fotos e imagens de produto: WebP (primeira escolha) ou JPG a 80% de qualidade
- Logotipos e ícones: SVG (vetorial) — escala perfeitamente em qualquer tamanho, arquivos minúsculos
- Capturas de tela e imagens de interface: PNG ou WebP sem perdas
- Ilustrações com cores sólidas: SVG ou WebP
Metas de Core Web Vitals
O Google pontua as páginas com base nos Core Web Vitals. Para imagens, a métrica relevante é o Largest Contentful Paint (LCP) — a velocidade com que a principal imagem visível carrega:
- Bom: LCP abaixo de 2,5 segundos
- Precisa melhorar: 2,5 – 4 segundos
- Ruim: Mais de 4 segundos
Se a sua imagem principal pesa mais de 200 KB, ela provavelmente está contribuindo para uma pontuação ruim de LCP em conexões móveis.
Fluxo de Trabalho Passo a Passo para Otimização de Imagens
- Determine o tamanho de exibição — Verifique a largura máxima real em CSS/HTML em que sua imagem vai renderizar.
- Redimensione para essa largura — Use nosso Redimensionador de Imagens. Inclua versões 2x para telas retina (se necessário).
- Converta para WebP — Use JPG para WebP ou PNG para WebP.
- Comprima — Use nosso Compressor de Imagens com qualidade de 75–80%.
- Defina os atributos width e height — Evita o Cumulative Layout Shift (CLS), outra métrica de Core Web Vitals.
- Adicione carregamento lento —
loading="lazy"para imagens abaixo da dobra.
Telas Retina / HiDPI
Telas retina (a maioria dos celulares e MacBooks modernos) exibem em densidade de pixels 2x ou 3x. Um espaço de 400px de largura na sua página exige uma imagem de 800px para parecer nítida em retina. Use o atributo HTML srcset para servir tamanhos diferentes com base na densidade da tela:
<img
src="image-400.webp"
srcset="image-400.webp 1x, image-800.webp 2x"
width="400" height="300"
alt="Descrição"
>Usuários de Next.js
Se você usa Next.js, o componente <Image> cuida de tudo isso automaticamente — redimensiona, serve WebP e adiciona carregamento lento nativamente. Basta fornecer a imagem original em alta resolução e deixar o Next.js otimizar a entrega.