Melhor tamanho de imagem para site: guia de banner, blog e miniaturas

O melhor tamanho de imagem para um site é cerca do dobro da largura em que a imagem é exibida. Como referência, use de 1920 a 2560 px de largura para imagens de banner de largura total, de 1200 a 1600 px para imagens de blog e de 300 a 600 px para miniaturas. Salve em WebP ou JPG comprimido e mantenha a maioria das imagens abaixo de cerca de 200 KB.

São pontos de partida práticos, não padrões oficiais. O seu tema e o layout decidem os números reais, e o método abaixo mostra como encontrá-los.

Qual é o melhor tamanho de imagem para um site?

Comece pelo espaço que cada imagem ocupa no seu layout. Abra a página em um navegador no computador, clique com o botão direito na imagem e escolha Inspecionar. As ferramentas de desenvolvedor mostram a largura renderizada em pixels CSS. Dobre esse número para que a imagem continue nítida em celulares e notebooks com telas de alta densidade.

Uma referência rápida para os tipos de imagem mais comuns:

• Banner ou imagem de destaque de largura total: de 1920 a 2560 px de largura.
• Imagens dentro de um post de blog ou de uma coluna de conteúdo: de 1200 a 1600 px de largura.
• Fotos de produtos: de 1000 a 2000 px no lado maior, mais se a sua loja tiver zoom.
• Miniaturas e cartões: 300 a 600 px de largura.
• Logotipos e ícones: SVG sempre que possível, já que ele continua nítido em qualquer tamanho.
• Imagem de compartilhamento social (Open Graph): 1200 x 630 px é o tamanho mais usado.

O erro mais comum é subir uma foto de 4000 px do celular ou da câmera em uma coluna de 700 px. O navegador baixa todos os pixels e depois joga a maioria fora. Com uma conexão de celular, são segundos de espera por nada.

Na web, só as dimensões em pixels importam. O número de DPI guardado em um arquivo é ignorado pelas telas, então não é preciso definir 72 ou 300 DPI para um site. Nosso guia de 300 DPI explica quando esse número importa de fato (na impressão).

Tamanho da imagem de banner: qual largura e qual altura?

A imagem de destaque (hero) é o banner grande no topo de uma página. Como ela se estende pela tela inteira, precisa ser a imagem mais larga do seu site.

• Largura: 1920 px atendem à maioria das telas de computador. Suba para 2560 px se quiser nitidez em telas grandes de alta densidade.
• Altura: depende do seu design. Muitos banners ficam entre 600 e 1000 px de altura na largura de computador.
• Formato: um corte largo, como 16:9 ou 21:9, funciona no computador. No celular, a mesma imagem muitas vezes é cortada a partir do centro, então mantenha o tema principal no meio.
• Tamanho do arquivo: tente ficar abaixo de cerca de 500 KB, e quanto menor, melhor.

O banner muitas vezes é o elemento Largest Contentful Paint (LCP) da página, o momento que o Google usa para avaliar a rapidez com que a página aparece. A orientação do web.dev do Google é mirar em um LCP de 2,5 segundos ou menos. Um banner pesado é o motivo mais comum para uma página não atingir essa meta.

Se houver texto sobre o banner, uma imagem um pouco mais escura ou desfocada mantém o texto legível e comprime melhor, já que áreas lisas ocupam menos bytes do que detalhes finos.

Tamanho de imagem para blog: artigos e imagens destacadas

Para imagens dentro de um post, olhe a largura da sua coluna de conteúdo. A maioria dos temas de blog usa uma coluna entre 600 e 800 pixels CSS. Dobrando isso, você chega a 1200 a 1600 px, que é a faixa de tamanho para blog indicada acima.

• Imagens no corpo do artigo: 1200 px de largura servem para a maioria dos temas. Use 1600 px se a sua coluna for larga.
• Imagem destacada: confira a documentação do seu tema. Muitos usam um corte largo, e 1200 x 630 px funciona bem também como imagem de compartilhamento em redes sociais.
• Capturas de tela: mantenha no tamanho natural se forem menores que a largura da coluna, para o texto não ficar borrado com a ampliação.
• Tamanho do arquivo: mire em 100 a 200 KB para fotos. Capturas de tela salvas como PNG podem ser maiores, então experimente WebP para elas.

Use um único formato de proporção para as imagens destacadas em todo o blog. Formatos misturados deixam as páginas de arquivo e de categoria irregulares.

Que tamanho de arquivo as imagens de um site devem ter?

Não existe limite oficial, mas metas aproximadas mantêm as páginas rápidas:

• A maioria das imagens de conteúdo: abaixo de cerca de 200 KB.
• Imagens de banner grandes: abaixo de cerca de 500 KB.
• Miniaturas: muitas vezes de 20 a 50 KB.

Se as metas em KB e MB confundirem, nosso guia sobre quantos KB tem um MB esclarece.

As dimensões certas fazem a maior parte do trabalho. A compressão faz o resto. Uma foto de 1600 px salva como JPG com qualidade entre 75 e 85, ou como WebP, geralmente fica na faixa. Se uma imagem ainda estiver pesada, use um compressor com tamanho alvo, como o Comprimir imagem do ConvertorLab. Compare o resultado com o original em tamanho real antes de publicar.

Qual formato usar?

• WebP para fotos e gráficos. O Google diz que o WebP com perdas é entre 25 e 34% menor que um JPEG comparável, e o WebP sem perdas é 26% menor que o PNG. Todos os principais navegadores atuais aceitam o formato.
• SVG para logotipos, ícones e ilustrações simples.
• JPG como alternativa, ou quando a sua plataforma não aceita WebP.
• PNG só quando você precisa de qualidade sem perdas ou de transparência e não pode usar WebP.

Nosso explicativo sobre o que é um arquivo WebP fala do suporte em navegadores e apps. Para converter arquivos existentes, use o conversor de imagem para WebP.

Como redimensionar imagens para o seu site, passo a passo

1. Guarde seus arquivos originais em alta resolução em uma pasta separada. Nunca edite a única cópia.
2. Corte cada imagem no formato que o seu layout usa, como 16:9 para banners ou 1:1 para cartões.
3. Redimensione para a largura alvo. A ferramenta Redimensionar imagem define uma largura exata ou o lado maior para um lote inteiro e pode gerar WebP ou JPG.
4. Comprima até o tamanho de arquivo alvo e depois confira algumas imagens em tamanho real para ver se há manchas ou faixas.
5. Renomeie os arquivos com nomes curtos, descritivos e em minúsculas, como oak-dining-table.webp.
6. Faça o upload e adicione um texto alternativo descritivo no seu CMS.

Muitas plataformas redimensionam e convertem as imagens no upload. Envie um arquivo de tamanho razoável mesmo assim. Isso economiza armazenamento e dá à plataforma um ponto de partida limpo.

Imagens responsivas, carregamento lento e como verificar a velocidade

A forma como as imagens carregam importa tanto quanto o tamanho delas. Alguns hábitos de HTML fazem a maior parte do trabalho:

• Adicione loading="lazy" às imagens mais abaixo na página, para que o navegador espere até o leitor rolar para perto delas.
• Não use carregamento lento no banner. O guia de otimização do LCP do web.dev diz para nunca usar carregamento lento na imagem LCP e sugere fetchpriority="high" para ela.
• Sempre defina os atributos width e height nas imagens. O navegador reserva o espaço, então o texto não pula enquanto a página carrega.
• Para imagens exibidas em tamanhos muito diferentes no celular e no computador, ofereça várias versões com srcset e sizes. O guia de imagens responsivas da MDN explica a sintaxe.

Para encontrar os piores casos, passe a página pelo PageSpeed Insights ou pelo painel Lighthouse nas ferramentas de desenvolvedor do Chrome. Eles apontam imagens maiores que o tamanho de exibição, imagens que poderiam usar um formato moderno e imagens fora da tela que deveriam carregar de forma lenta. Você também pode abrir a guia Rede, filtrar por Img e ordenar por tamanho. Qualquer coisa perto do topo que pese mais de algumas centenas de KB merece ser redimensionada primeiro.

Perguntas frequentes