Tamanhos de imagem para sites: hero, blog, produto, logo, OG | We.Inc
Uma tabela com tamanhos em pixels, proporções e limites de peso de arquivo para cada espaço de imagem de um site, além de uma calculadora que transforma a largura do seu layout em tamanhos de srcset.
Dimensione cada imagem para o maior espaço que ela ocupa e depois dobre essa largura para telas de alta densidade. Um hero de largura total funciona com 2560 por 1440, uma imagem no corpo de um post com 1600 de largura, uma foto de produto quadrada com 2048 por 2048 na Shopify e uma imagem de compartilhamento com 1200 por 630. Mantenha as fotos abaixo de cerca de 200 KB.
Tamanhos rápidos para os espaços mais comuns
Espaço
Pixels para exportar
Proporção
Hero de largura total
Imagem no corpo do post
Foto de produto (Shopify)
Imagem de compartilhamento (og:image)
Logo
SVG, ou PNG com 2x o tamanho exibido
A mesma do logo
Não existe um padrão oficial para imagens de hero ou de blog. O que existe é uma conta simples: quantos pixels CSS o espaço tem de largura, vezes a densidade de tela em que você quer que a imagem fique nítida. A tabela abaixo aplica essa regra a todos os espaços comuns e, quando uma plataforma publica o próprio número, como a Shopify para produtos ou o Facebook para imagens de compartilhamento, usamos o valor publicado.
Encontre o espaço na tabela, ou meça com o inspetor do navegador a largura com que ele aparece no seu layout.
Digite essa largura CSS na calculadora e escolha as densidades que quer cobrir.
Exporte as larguras listadas, comprima cada uma e cole o srcset gerado na sua tag img.
Confira o peso do arquivo com a coluna de limite antes de fazer o upload.
Exporte com 2x a largura exibida; 3x acrescenta um peso que pouca gente consegue perceber em uma foto.
Corte a imagem na proporção certa antes do upload, para que o layout nunca precise esticá-la ou deixar faixas vazias.
Coloque os atributos width e height em toda img para que o navegador reserve o espaço antes de o arquivo chegar.
Prefira SVG para logos e ícones, porque um arquivo vetorial fica nítido em qualquer tamanho com um único download pequeno.
Mantenha a imagem de compartilhamento em 1200 por 630 mesmo em sites estreitos, já que os apps sociais a buscam separadamente do seu layout.
Perguntas frequentes
Qual deve ser o tamanho de uma imagem de hero?
Para um hero que ocupa toda a largura do navegador, exporte 2560 por 1440 para telas grandes e adicione versões de 1280 e 1920 de largura no srcset, para que celulares e notebooks baixem menos. Se o hero fica dentro de um contêiner de 1200 pixels, 2400 de largura bastam.
Qual é o tamanho das imagens de produto na Shopify?
A central de ajuda da Shopify diz que imagens de produto quadradas costumam ter a melhor exibição em 2048 por 2048 pixels. Os uploads podem ter até 5000 por 5000 pixels e precisam ter menos de 20 MB. Mantenha todas as fotos de produto na mesma proporção para que as grades das coleções fiquem alinhadas.
Qual é o tamanho de uma imagem de compartilhamento Open Graph?
A documentação de compartilhamento do Facebook recomenda pelo menos 1200 por 630 pixels, proporção de 1.91 para 1, e um arquivo com menos de 8 MB. Imagens menores ainda funcionam até 600 por 315, mas aparecem em tamanho reduzido.
Qual deve ser o peso do arquivo, e não só os pixels?
Tamanho em pixels e peso do arquivo são coisas separadas. Uma foto de 1600 de largura salva em WebP ou em um JPEG bem comprimido costuma ficar entre 80 e 200 KB. Se uma imagem passa muito disso, reduza a qualidade ou mude o formato antes de diminuir as dimensões.
Preciso de imagens diferentes para o celular?
Normalmente não são cortes diferentes, apenas cópias menores do mesmo arquivo listadas no srcset. Use o elemento picture só quando o celular precisar de outro corte, como uma versão vertical de um banner largo.
A única regra por trás de todos os números
Os navegadores montam as páginas em pixels CSS. Um celular ou notebook retina coloca dois ou três pixels físicos em cada um deles, então uma imagem exportada exatamente na largura CSS parece borrada nessas telas. Dobrar a largura resolve isso para quase todo mundo.
Passar de 2x raramente compensa em fotos. O arquivo fica de novo cerca de duas vezes mais pesado e o detalhe extra é difícil de notar a uma distância normal de visualização.
A proporção importa mais do que os pixels exatos
A maioria dos layouts redimensiona as imagens para caber na coluna, então é a proporção que decide como a imagem fica na página. Escolha uma proporção por espaço, corte todas as imagens nela, e a grade fica organizada em qualquer largura.
As escolhas mais comuns são 16:9 para heros e imagens de artigo, 1:1 para produtos e avatares, 4:5 para cards em retrato e 1.91:1 para imagens de compartilhamento.
Limites de peso mantêm as páginas rápidas
A maior imagem acima da dobra costuma ser o elemento que define o Largest Contentful Paint. Um hero pesado deixa a página mais lenta do que qualquer outro arquivo sozinho, então ele merece o maior cuidado.
Defina um limite por espaço e respeite-o. Quando uma foto não cabe no limite com boa qualidade, experimente WebP ou AVIF antes de reduzir a resolução.
Tamanhos de imagem para cada espaço
As larguras dos espaços são de layouts típicos de desktop. Meça o seu próprio tema e aplique a regra de 2x se as suas forem diferentes.
Tamanhos de exportação, proporções e limites de peso por espaço
Espaço
Largura CSS
Pixels para exportar
Proporção
Limite
Observação
Hero de largura total
100vw (até 1280+)
250 KB
Adicione cópias de 1280 e 1920 de largura no srcset
Hero em contêiner
200 KB
O dobro da largura do contêiner
Faixa de banner
150 KB
Mantenha o texto longe das bordas externas; as laterais são cortadas no celular
Imagem de destaque do blog
800 a 1200
1600 x 900 até 2400 x 1350
150 KB
Acompanhe a largura de conteúdo do seu tema
Imagem no corpo do post
720 a 800
16:9 ou 3:2
150 KB
As colunas de texto são mais estreitas que os heros
Foto de produto
Card da grade
200 KB
Tamanho quadrado recomendado pela Shopify
Card de coleção ou categoria
800 x 800 ou 800 x 1000
1:1 ou 4:5
80 KB
Use uma só proporção em toda a grade
Foto de equipe ou avatar
40 KB
Muitas vezes aparece em um círculo; centralize o rosto
Logo no cabeçalho
cerca de 160
SVG, ou PNG com 320 de largura
A do próprio logo
20 KB
O SVG fica nítido em qualquer tamanho
Textura de fundo
150 KB
Qualidade menor não tem problema atrás de texto
Imagem de compartilhamento (og:image)
Não aparece na página
Menos de 8 MB (mire bem abaixo)
Tamanho recomendado pelo Facebook
Favicon
16 a 32
SVG mais ICO ou PNG de 32 x 32
5 KB
Veja o guia de favicon para todos os tamanhos
Markup para um hero responsivo
Hero de largura total com três larguras
O navegador escolhe o menor arquivo que ainda cobre o viewport na densidade da tela. width e height definem a proporção para que nada pule durante o carregamento.
Calculadora de tamanho de imagem
Informe a largura que uma imagem ocupa no seu layout, em pixels CSS, e escolha as densidades de tela que quer cobrir. A calculadora lista as larguras em pixels para exportar e escreve o srcset correspondente.