Tamanho de imagem para site
Veja o tamanho de imagem para site ideal em ecommerce, com medidas para banners, produtos, blog, logos e dicas de peso e formato.
O tamanho de imagem para site depende do uso da imagem: banner, hero, produto, blog, logo, thumbnail ou fundo. Em uma loja virtual, a regra prática é enviar imagens grandes o suficiente para ficarem nítidas, mas leves o suficiente para não deixar o site lento.
Para ecommerce, imagens pesadas prejudicam carregamento, experiência mobile, conversão e SEO. Imagens pequenas demais podem ficar pixeladas e passar a impressão de loja amadora.
Guia prático
Tamanhos de imagem por uso no site
Escolha a dimensão pelo papel da imagem na página. Quanto maior a área visível, maior precisa ser a resolução.
Bom ponto de partida para vitrines e página de produto.
Funciona para chamadas largas sem exigir arquivo gigante.
Use com compressão forte e cuidado especial no mobile.
Boa proporção para capa, artigo e compartilhamento.
Ideal para avatar, marca compacta e variações sociais.
Pequeno, nítido e otimizado para a aba do navegador.
Resposta curta
Para a maioria das lojas virtuais, use imagens de produto com pelo menos 1000 x 1000 px, banners próximos de 1200 x 400 px, imagens de blog em 1200 x 800 px e logos em formatos leves como SVG ou PNG otimizado. Sempre comprima os arquivos e prefira WebP quando possível.
O objetivo não é usar a maior imagem possível. O objetivo é equilibrar nitidez, proporção, peso do arquivo e velocidade de carregamento.
Tamanhos recomendados por tipo de imagem
Os tamanhos abaixo são bons pontos de partida para uma loja virtual responsiva. Eles podem mudar conforme o tema, o bloco usado e a proporção visual da página.
- Imagem de produto principal: 1000 x 1000 px a 2048 x 2048 px.
- Miniatura de produto: 300 x 300 px a 600 x 600 px.
- Banner horizontal: 1200 x 400 px.
- Hero da página inicial: 1280 x 720 px a 1920 x 1080 px.
- Imagem de blog: 1200 x 800 px.
- Logo retangular: 400 x 100 px.
- Logo quadrado: 512 x 512 px.
- Favicon: 48 x 48 px ou 64 x 64 px.
Se a imagem aparece grande na tela, ela precisa de mais resolução. Se aparece pequena, como ícone ou miniatura, usar um arquivo gigante só aumenta o peso da página.
Tamanho de arquivo ideal
O tamanho em pixels não é a única coisa importante. O peso do arquivo também afeta a velocidade do site.
Como regra prática:
- Produto: tente ficar abaixo de 300 KB a 800 KB por imagem.
- Banner e hero: tente ficar abaixo de 500 KB a 1,5 MB.
- Blog: tente ficar abaixo de 500 KB.
- Logo e ícones: devem ser muito leves, de preferência abaixo de 100 KB.
Arquivos muito grandes podem atrasar o carregamento, principalmente no celular. Se uma imagem passa de alguns megabytes, provavelmente precisa ser redimensionada ou comprimida antes de entrar no site.
Melhor formato de imagem para site
WebP costuma ser uma boa escolha para ecommerce porque entrega boa qualidade com arquivo menor. JPEG funciona bem para fotos de produto e imagens com muitas cores. PNG deve ser usado quando a imagem precisa de transparência, como alguns logos e elementos gráficos.
SVG é ideal para logos e ícones vetoriais, porque mantém nitidez em vários tamanhos e normalmente pesa pouco. Evite GIF para imagens estáticas, porque ele costuma ser menos eficiente.
Imagens para mobile
No mobile, a tela é menor, mas a experiência é mais sensível à lentidão. Uma imagem muito pesada pode atrasar a primeira impressão da loja e fazer o visitante abandonar antes de ver o produto.
O ideal é usar imagens com proporção consistente, compressão adequada e layout responsivo. Produtos quadrados funcionam bem em vitrines e categorias. Banners muito largos precisam ser pensados também para celular, porque texto pequeno dentro da imagem pode ficar ilegível.
Antes de publicar
Checklist antes de publicar imagens
Uma imagem pronta para ecommerce precisa carregar rápido, explicar o produto e manter a loja visualmente consistente.
Corte no formato correto e evite subir arquivo maior que o layout precisa.
Reduza o peso sem destruir a nitidez, principalmente em banners e fotos de produto.
Use nomes claros, como camiseta-preta-algodao.jpg, em vez de IMG_001.jpg.
Descreva a imagem de forma curta para acessibilidade e contexto de busca.
Como otimizar imagens antes de publicar
Antes de subir imagens para uma loja virtual, faça uma revisão simples:
- Corte a imagem na proporção correta.
- Redimensione para o tamanho realmente necessário.
- Comprima o arquivo.
- Use nomes descritivos, como
camiseta-preta-algodao.jpg. - Preencha o texto alternativo com uma descrição curta e útil.
- Evite colocar textos importantes dentro da imagem.
Essa rotina melhora carregamento, acessibilidade, SEO e percepção de profissionalismo.
Por que imagens afetam SEO e conversão
Imagens influenciam SEO porque afetam velocidade, experiência do usuário, acessibilidade e entendimento do conteúdo. Para ecommerce, elas também afetam confiança: uma foto ruim pode fazer o cliente duvidar do produto, enquanto uma imagem clara ajuda na decisão de compra.
Uma loja com imagens otimizadas tende a carregar melhor, apresentar produtos com mais clareza e reduzir atrito no caminho até o checkout. Para aprofundar a parte de velocidade, leia também como deixar ecommerce rápido.
Perguntas frequentes
Qual é o melhor tamanho de imagem para site?
Depende do uso. Para ecommerce, produto costuma funcionar bem entre 1000 x 1000 px e 2048 x 2048 px, banner em 1200 x 400 px e imagem de blog em 1200 x 800 px.
Imagem grande deixa o site lento?
Sim. Imagens grandes e pesadas aumentam o tempo de carregamento, principalmente no celular. O ideal é redimensionar e comprimir antes de publicar.
Qual formato usar em imagens de loja virtual?
Use WebP quando possível. JPEG é bom para fotos, PNG para transparência e SVG para logos ou ícones vetoriais.
Texto alternativo ajuda no SEO?
Sim. O texto alternativo ajuda mecanismos de busca e leitores de tela a entenderem a imagem. Ele deve ser curto, descritivo e natural.
Preciso usar o mesmo tamanho em todas as imagens de produto?
É recomendado manter proporção e padrão visual consistentes. Isso deixa a vitrine mais organizada e evita que cards de produto fiquem desalinhados.
O próximo passo
Comece a vender com o WeeCommerce hoje
Depois de ajustar o tamanho das imagens, revise também velocidade, checkout e organização da loja. Use o guia como criar uma loja virtual profissional e conheça o WeeCommerce.