Diferente das redes sociais — que têm especificações fixas e bem documentadas — sites têm layouts variáveis, layouts responsivos e contextos de uso muito diferentes. Um banner de homepage ocupa 100% da largura da tela. Uma foto de produto pode aparecer em 400px ou em 800px dependendo do dispositivo. Uma imagem de blog é exibida dentro de uma coluna de texto.
Não existe um único tamanho correto para "imagem de site" — mas existem faixas recomendadas para cada contexto, e entendê-las faz a diferença entre um site rápido e bem exibido e um site lento com imagens borradas ou pesadas demais.
Por que o tamanho de imagem afeta o seu site
Dois problemas distintos surgem quando imagens não estão otimizadas:
- Imagens grandes demais em pixels: o navegador baixa uma foto de 4000px para exibir em 800px — 80% dos dados transferidos são descartados imediatamente. O site fica lento sem nenhum ganho visual.
- Imagens pesadas demais em KB/MB: mesmo com dimensões corretas, uma foto sem compressão pode pesar 3 MB quando poderia pesar 150 KB com qualidade visual idêntica na tela.
Os dois problemas têm soluções diferentes: o primeiro exige redimensionamento (ajustar os pixels); o segundo exige compressão (reduzir o peso sem alterar os pixels). Na prática, aplicar os dois em sequência é o que produz o melhor resultado.
💡 Regra geral: a largura máxima de qualquer imagem para web raramente precisa ultrapassar 1920px — que é a largura de um monitor Full HD. Para imagens que nunca ocupam a tela inteira (colunas, grades de produtos, thumbnails), o limite é ainda menor. Acima disso, você está desperdiçando banda e prejudicando o carregamento.
Tabela de referência — tamanhos por tipo de imagem
| Tipo de imagem | Dimensões recomendadas | Peso ideal | Formato |
|---|---|---|---|
| Banner / hero (full width) | 1920 × 600–900 px | 100–200 KB | WebP / JPG |
| Banner desktop (layout boxed) | 1200–1440 × 400–600 px | 80–150 KB | WebP / JPG |
| Banner mobile | 768 × 400–600 px | 50–100 KB | WebP / JPG |
| Foto de produto (e-commerce) | 800–1200 × 800–1200 px | 60–150 KB | WebP / JPG |
| Thumbnail de produto | 300–600 × 300–600 px | 20–50 KB | WebP / JPG |
| Imagem de artigo / blog | 1200 × 600–800 px | 60–120 KB | WebP / JPG |
| Thumbnail de post (listagem) | 400–600 × 250–400 px | 20–50 KB | WebP / JPG |
| Logo no header | 200–400 px de largura | 5–30 KB | SVG / PNG / WebP |
| Ícones de interface | 24–64 px | 1–5 KB | SVG |
| Favicon | 16, 32, 180, 192, 512 px | 1–10 KB cada | .ico + PNG |
| Open Graph (preview social) | 1200 × 630 px | 80–150 KB | JPG / WebP |
| Background de seção | 1920 × altura variável | 100–300 KB | WebP / JPG |
| Foto de perfil / avatar (site) | 200–400 × 200–400 px | 20–50 KB | WebP / JPG / PNG |
| Imagem de depoimento / cliente | 80–150 × 80–150 px | 5–20 KB | WebP / JPG |
Dimensões por tipo de site
Sites institucionais e portfólios
Sites institucionais geralmente têm largura máxima de conteúdo entre 960px e 1440px. As imagens de banner ou hero costumam ocupar 100% da largura do layout — então 1440–1920px de largura é o suficiente para monitores modernos. Imagens de seção (fotos de equipe, escritório, serviços) raramente precisam ultrapassar 800px de largura.
- Banner principal: 1920 × 700–900px, abaixo de 200 KB
- Foto de equipe: 400–600 × 400–600px, abaixo de 60 KB
- Foto de serviço / seção: 800–1200 × 500–700px, abaixo de 100 KB
Blogs e portais de conteúdo
Em blogs, a coluna de conteúdo raramente passa de 760–800px de largura. Uma imagem de destaque (featured image) em 1200px é mais do que suficiente para cobrir qualquer layout responsivo sem desperdício. Thumbnails na listagem de posts são ainda menores — geralmente 300–500px.
- Featured image: 1200 × 630px, abaixo de 100 KB
- Imagens dentro do artigo: 800–1200px de largura, abaixo de 80 KB cada
- Thumbnail na listagem: 400 × 250px, abaixo de 30 KB
E-commerce e lojas virtuais
Em e-commerce, as fotos de produto são o elemento mais crítico — são a principal ferramenta de convencimento do cliente. A resolução precisa ser suficiente para o zoom (quando o site oferece esse recurso), mas o peso precisa ser controlado para não prejudicar a velocidade das páginas de listagem, que carregam muitas imagens ao mesmo tempo.
- Foto principal do produto (quadrada): 800–1200 × 800–1200px, 80–150 KB em WebP
- Fotos adicionais do produto: mesmo tamanho da principal
- Thumbnail na grade de produtos: 300–500 × 300–500px, 20–50 KB
- Banner de categoria / promoção: 1440 × 400–600px, 80–150 KB
🛍️ Para e-commerce: use sempre fundo branco ou neutro nas fotos de produto — além de facilitar a compressão (grandes áreas de cor uniforme comprimem muito bem), garante consistência visual entre produtos de fornecedores diferentes e melhora a experiência de comparação no carrinho.
Landing pages
Landing pages são projetadas para uma única ação de conversão — e a velocidade é crítica: pesquisas mostram que cada segundo adicional de carregamento reduz a taxa de conversão em 7–12%. Imagens em landing pages precisam ser otimizadas agressivamente.
- Hero / background: 1440–1920px de largura, abaixo de 150 KB — prioridade máxima
- Foto de produto / serviço: 600–800px, abaixo de 80 KB
- Ícones de benefícios: SVG sempre que possível
- Foto de depoimento: 80–120px circular, abaixo de 15 KB
O impacto do fator 2× (telas Retina e HiDPI)
Telas Retina (Apple) e HiDPI (outros fabricantes) têm densidade de pixel duplicada — o que significa que exibem mais pixels por polegada do que monitores comuns. Para que imagens apareçam nítidas nessas telas, a imagem precisa ter o dobro dos pixels do espaço de exibição.
Exemplo: uma imagem exibida em 400px de largura numa tela Retina precisaria de 800px de largura para aparecer nítida. Enviar apenas 400px resulta em imagem levemente borrada em iPhones e MacBooks.
A solução mais prática é usar imagens com o dobro da largura de exibição máxima — mas comprimir bem para que o peso não dobre na mesma proporção. Uma imagem de 800px bem comprimida em WebP geralmente pesa menos do que 400px em PNG não otimizado.
Formato certo para cada situação
| Situação | Formato ideal | Por quê |
|---|---|---|
| Fotografias (produto, banner, equipe) | WebP lossy | 25–35% menor que JPG com qualidade equivalente |
| Logo no header | SVG | Vetorial, qualquer tamanho sem perda, menor arquivo |
| Logo quando SVG não é suportado | PNG com fundo transparente | Preserva a transparência necessária |
| Ícones de interface | SVG | Escalável, animável via CSS, arquivo tiny |
| Screenshot com texto | WebP lossless ou PNG | Texto nítido — JPG cria artefatos ao redor das letras |
| Open Graph / social preview | JPG ou WebP | Compatibilidade máxima com plataformas de preview |
| Background com transparência | WebP com canal alfa ou PNG | Único formato com transparência além do PNG |
Como preparar as imagens antes de fazer upload
O fluxo recomendado para qualquer imagem destinada a um site é:
- Defina as dimensões de uso. Qual o espaço máximo que essa imagem vai ocupar no layout? Use a tabela de referência acima ou inspecione o elemento no navegador (F12 → selecionar o espaço da imagem).
- Redimensione para o dobro do espaço de exibição. Para cobrir telas Retina sem desperdício excessivo. Use o Redimensionador de Imagem para definir a largura exata em pixels.
- Converta para WebP. Se o seu site ou CMS suporta WebP (a maioria dos modernos suporta), converta antes de fazer upload. Use o Conversor de Imagem para conversão rápida.
- Comprima. Aplique compressão para reduzir o peso dentro das faixas recomendadas. Use o Compressor de Imagem para otimizar JPG, PNG e WebP sem perda visual perceptível.
- Verifique o resultado. Abra a imagem comprimida e compare com o original. Se a diferença não for visível, o resultado está bom.
Prepare suas imagens para o site agora
Redimensione e comprima as imagens do seu site em segundos — sem instalar nada, sem criar conta.
Verificando o tamanho atual das imagens do seu site
Para identificar se as imagens do seu site atual estão otimizadas, use estas ferramentas:
- Google PageSpeed Insights (pagespeed.web.dev): analisa a URL e lista imagens com oportunidade de redução, mostrando o ganho estimado em KB para cada uma.
- Chrome DevTools → Network → Img: filtre as requisições por tipo de imagem e veja o tamanho de cada arquivo carregado. Ordene por tamanho para identificar as mais pesadas.
- WebPageTest.org: análise detalhada com waterfall, mostrando quais imagens são carregadas primeiro e quanto tempo levam.
Erros mais comuns de tamanho de imagem em sites
- Subir fotos direto da câmera: fotos de câmera têm 3–12 MB e 4000–8000px de largura. Nenhum site precisa de imagens assim sem redimensionar e comprimir antes.
- Usar PNG para fotos: fotos em PNG ficam 5–10× maiores do que em JPG ou WebP sem nenhum ganho visual. Use PNG apenas para imagens com transparência ou gráficos com bordas nítidas.
- Não ter versão mobile das imagens: servir uma imagem de 1920px para um celular de 390px é desperdício puro. O atributo
srcsetdo HTML resolve isso automaticamente. - Esquecer as imagens Open Graph: quando alguém compartilha uma página no WhatsApp ou LinkedIn sem imagem de preview configurada, a plataforma exibe uma miniatura genérica ou em branco. Configure sempre a meta tag
og:imagecom uma imagem de 1200×630px. - Logo em JPG: o fundo branco forçado do JPG aparece em contextos com fundo colorido ou transparente. Logo sempre em SVG ou PNG.