O melhor tamanho e qualidade de imagem para a web (por caso de uso)

"Que tamanho minhas imagens devem ter?" é uma das perguntas mais comuns do design web — e a resposta é sempre "depende de onde elas aparecem". O tamanho errado deixa a página lenta ou degrada a qualidade; com diretrizes por caso de uso você evita os dois problemas. Este guia traz pontos de partida práticos de dimensões, peso e qualidade para você parar de chutar.

Dois números que importam

Toda imagem web tem dois tamanhos: as dimensões em pixels (como 1600×900) e o peso em kilobytes. As dimensões devem se aproximar do espaço que a imagem ocupa na tela, e o peso deve ser o menor possível sem perder a nitidez. Otimizar os dois é o objetivo.

Diretrizes por caso de uso

Imagens de destaque em largura total

Mire em 1600–2000 px de largura para telas grandes e mantenha o arquivo abaixo de uns 200 KB com WebP ou AVIF. Como o destaque costuma ser o elemento LCP, seu peso tem efeito desproporcional na velocidade percebida.

Fotos de blog e conteúdo

A maioria das colunas de artigo tem 700–900 px, então uma imagem de 1200–1600 px cobre telas retina. Mire bem abaixo de 150 KB. Qualidade 75 em WebP quase sempre basta.

Miniaturas e cards

Miniaturas aparecem pequenas na tela, então 400–600 px é de sobra. Muitas vezes dá para ficar abaixo de 30–50 KB — o que importa muito quando a página mostra dezenas delas.

Um ponto de partida para a qualidade

Em formatos com perdas, qualidade 70–80 é a faixa segura para fotos. O AVIF alcança o mesmo visual com valores um pouco menores. Compare sempre antes e depois — o valor certo é o menor em que você não nota diferença.

Colocando em prática

Escolha uma largura-alvo para cada caso, redimensione até ela e converta para WebP ou AVIF na qualidade 75. Com o Scrunch você converte um conjunto inteiro em lote e confere cada resultado contra o original antes de baixar — mantendo cada imagem tão leve quanto precisa ser.

Perguntas frequentes

Posso subir imagens maiores que o tamanho de exibição?

Até cerca de 2x o tamanho de exibição é útil para telas retina. Além disso você só desperdiça banda e deixa a página lenta — trate 2x como o teto.

Quanto menor o arquivo, melhor?

Se apertar demais, a qualidade sofre visivelmente. A meta é o menor arquivo que ainda pareça limpo. Compare antes e depois para achar o equilíbrio.

Devo usar a mesma qualidade para todas as imagens?

Qualidade 75 é um padrão sólido, mas vale ser mais cuidadoso com destaques grandes e mais agressivo com miniaturas pequenas. Ajustar por caso de uso dá os melhores resultados.

Nomes de arquivo afetam o SEO?

Sim. Nomes descritivos e texto alt ajudam a busca de imagens e a acessibilidade. Prefira red-running-shoes.webp a img12345.jpg. Combinado com a otimização de tamanho e peso, fortalece seu SEO de imagens.