Não existe um tamanho “correto” único de imagem para um site — os números certos dependem do papel que a imagem cumpre na página. Esta é uma referência prática para os casos mais comuns, com o raciocínio para você adaptar a casos que não estão listados aqui.
Tabela de referência por função
| Função | Largura | Tamanho de arquivo alvo |
|---|---|---|
| Banner / hero de largura total | até 1920px | abaixo de 200KB |
| Foto de blog / conteúdo | 800-1200px | abaixo de 100KB |
| Imagem principal de produto | 800-1200px | abaixo de 150KB |
| Miniatura de grid de produto/listagem | 300-500px | abaixo de 50KB |
| Avatar de autor / ícone pequeno | 200-400px | abaixo de 20KB |
| Logo (se raster, não SVG) | tamanho de exibição real x2 | abaixo de 20KB |
Esses alvos assumem que a imagem já foi redimensionada para uma largura máxima sensata para seu papel — alvo de tamanho de arquivo sem limite de dimensão não significa muita coisa, já que sempre dá para bater um tamanho pequeno de arquivo só reduzindo as dimensões bem além do necessário.
Por que 1920px é um teto prático para imagens de largura total
Servir uma imagem mais larga que aproximadamente 1920px significa codificar detalhe de pixel que ultrapassa a largura real renderizada na grande maioria das telas de visitante — mesmo monitores grandes costumam renderizar uma janela de navegador bem abaixo da resolução nativa total, e o CSS vai reduzir uma imagem maior que o necessário para caber no contêiner de qualquer forma. Essa redução não diminui o tamanho do download; o arquivo completo ainda é transferido antes de ser reduzido visualmente. Dimensionar a imagem-fonte para bater com a largura máxima real de exibição, em vez de “grande o suficiente para garantir”, é de onde vem boa parte do peso desnecessário de página.
Imagens retina/alta densidade: use com seletividade, não de forma universal
Uma imagem em resolução 2x (o dobro das dimensões em pixels para o mesmo tamanho de exibição) fica mensuravelmente mais nítida em telas de alta densidade para conteúdo onde nitidez a distância curta de visualização importa — logos, ícones, imagens de hero com texto sobreposto. Para conteúdo fotográfico geral, visto rapidamente e a distância normal de rolagem, a maioria das pessoas não nota conscientemente a diferença entre 1x e 2x, mas o custo em tamanho de arquivo é real (aproximadamente o dobro) — um fator que pesa especialmente no Brasil, onde parcela significativa do tráfego vem de celular com plano de dados limitado. Uma abordagem razoável: sirva 2x para elementos pequenos e críticos em detalhe (logos, ícones) e mantenha 1x, bem comprimido, para conteúdo fotográfico maior, onde o custo de tamanho de dobrar não compensa um ganho de nitidez quase imperceptível.
Grids precisam de compressão agressiva, não moderada
Como um grid de produto ou conteúdo mostra muitas imagens de uma vez, cada imagem individual recebe só um olhar rápido do visitante — é exatamente a situação onde compressão agressiva (um alvo de tamanho de arquivo baixo, em relação ao que uma única imagem de hero usaria) tem o menor custo visível e o maior benefício acumulado, já que o peso total da página escala com o número de imagens exibidas.
srcset muda o alvo de “um tamanho” para “um conjunto de tamanhos”
Se o seu site usa imagens responsivas (srcset/sizes), você não está escolhendo um único tamanho alvo — está escolhendo um alvo para cada variante de breakpoint, e as variantes menores deveriam ser genuinamente redimensionadas para a própria largura alvo, não só a mesma imagem grande comprimida em tamanhos de arquivo diferentes. Um visitante no celular deveria baixar um arquivo que é de fato menor em dimensões de pixel, não só mais comprimido, para ter o benefício completo.
Perguntas frequentes
- Que dimensões uma imagem de banner/hero deveria ter?
- 1920px de largura é um teto seguro comum, cobrindo a grande maioria das larguras de tela de desktop sem precisar ampliar. A altura depende do design, mas uma faixa comum é 600-1000px para um banner completo. Além de 1920px de largura, você está servindo pixels que ultrapassam a viewport real de quase todo visitante, sem benefício visível — o CSS vai reduzir a imagem para caber de qualquer forma, e você só deixou o arquivo maior à toa.
- Preciso de imagens em 2x ou 3x para telas retina/alta densidade?
- Para imagens onde nitidez realmente importa a uma distância de visualização próxima — logos, ícones e imagens de hero com texto — servir uma versão em resolução 2x (por exemplo, um espaço de 1200px de largura recebe uma imagem de 2400px de largura) melhora perceptivelmente a nitidez em telas retina. Para a maioria do conteúdo fotográfico visto a distância normal, a diferença entre 1x e 2x é bem mais difícil de notar, e servir 2x ou 3x indiscriminadamente para tudo praticamente dobra ou triplica o peso total de imagem para um benefício que a maioria dos visitantes não vai registrar conscientemente — um custo real considerando quantos brasileiros navegam em dados móveis limitados. Reserve variantes de alta densidade para conteúdo onde nitidez é o ponto principal.
- Qual o tamanho certo para fotos de produto num grid de e-commerce?
- Miniaturas de grid/listagem: 300-500px de largura, abaixo de 50KB — exibidas pequenas, vistas rapidamente, em alto volume por página. Imagem principal da página de produto: 800-1200px de largura, abaixo de 150KB, já que o cliente pode dar zoom ou olhar de perto antes de comprar. Se a sua plataforma suporta zoom ao passar o mouse ou clique para ampliar, essa visualização ampliada pode usar uma imagem-fonte separada e maior, carregada só sob demanda, em vez de servir essa resolução para todo mundo por padrão.
- Toda imagem de uma página deveria ter o mesmo alvo de tamanho de arquivo?
- Não — trate os alvos de tamanho de arquivo como proporcionais à atenção visual que a imagem recebe e ao tamanho em que ela é exibida, não como uma regra fixa. Um banner de largura total recebe mais atenção visual e precisa de mais margem (até uns 200KB) do que uma miniatura de apoio num grid de uma dúzia de imagens parecidas (abaixo de 50KB cada), onde cada uma individualmente recebe só um olhar rápido.
- Como o `srcset` responsivo muda esses números?
- O `srcset` permite servir arquivos de imagem diferentes em tamanhos diferentes dependendo da viewport real e da densidade de pixel do visitante, então quem acessa pelo celular baixa um arquivo genuinamente menor do que quem acessa pelo desktop para o mesmo espaço de imagem, em vez de todo mundo baixar o mesmo arquivo grande e o CSS reduzir do lado do cliente. Se você usa `srcset`, os alvos de tamanho acima se aplicam à sua variante maior (tipicamente a versão 1x de desktop); as variantes menores de cada breakpoint deveriam ser redimensionadas de verdade (não só comprimidas) proporcionalmente à própria largura alvo.