Tamanho de imagem de site: guia para 2025

Hoje em dia, há mais pessoas a navegar na internet em dispositivos móveis do que em computadores de secretária. Com tanta variedade de tamanhos de ecrã, é essencial escolher os melhores tamanhos de imagem quando cria o seu site, para que todos os visitantes tenham uma boa experiência de utilizador — independentemente do dispositivo que estão a utilizar.

Se não otimizar as suas imagens, os visitantes do site podem ver imagens demasiado pequenas e desfocadas, ou demasiado grandes, o que aumenta os tempos de carregamento, exige scroll e zoom desnecessários.

A boa notícia é que é fácil fazer com que as suas imagens se adaptem a vários dispositivos. Ao escolher as dimensões de imagem certas, mantendo os tamanhos de ficheiro mínimos e utilizando um design de site responsivo, pode proporcionar uma experiência de navegação de alta qualidade.

Siga as indicações abaixo para otimizar as suas imagens para dispositivos móveis e desktop.

Melhores tamanhos de imagem para sites

Largura em pixels: 2 500 pixels é ideal para esticar a imagem em todo o ecrã e na maioria dos navegadores. Qualquer imagem abaixo desta medida pode ficar cortada ou aparecer desfocada se precisar de preencher a largura do navegador.

Tamanho da imagem: o melhor tamanho (em pixels) das suas imagens depende do uso a que se destinam, por exemplo, as imagens de fundo têm de ser maiores do que uma imagem de post de blogue.

Tamanho do ficheiro: qualquer coisa maior que 20 megabytes pode impactar drasticamente a velocidade do site. Imagens mais pequenas (até dois megabytes, e em torno de 500 kilobytes) são melhores na maioria dos casos.

Atributo da imagem: os atributos de imagem (texto alternativo ou tag alt) baseiam-se em texto e não impactam o desempenho do site. No entanto, são utilizados para interpretar imagens através de software de leitura de ecrã e são um elemento chave da acessibilidade na internet. Há que priorizar a concisão no texto do atributo — é uma boa prática manter o texto alternativo abaixo de 100 caracteres.

Melhores dimensões de imagem para dispositivos desktop e móveis

A tabela abaixo faculta as dimensões recomendadas para imagens em sites no formato desktop e em dispositivos móveis:

Estes são tamanhos sugeridos, que podem precisar de ser ajustados, tudo depende se utiliza ou não um design de site responsivo.

É quase sempre uma boa ideia que o tamanho de renderização das suas imagens seja inferior ao seu tamanho de upload.

Porque é que o tamanho da imagem é importante para os sites?

Para sites, o tamanho da imagem é importante por 3 razões:

• Cria uma melhor experiência de utilizador.
• Melhora a velocidade das páginas do site.
• Ajuda a melhorar o ranking do site.

Cria uma melhor experiência de utilizador

Ter imagens bem dimensionadas e ter em conta a utilização que lhes irá dar no site ajuda a melhorar a experiência do utilizador. Desta forma, os visitantes, visualizam uma imagem, com um bom nível de detalhe, e não precisam de fazer scroll para a ver na totalidade.

Quando as imagens são de baixa qualidade, pixelizadas ou demasiado pequenas, podem impactar a sensação de qualidade que o seu conteúdo transmite. Para um site de e-commerce, isto pode levar os clientes a questionar a qualidade do seu negócio ou produtos.

Por outro lado, imagens de alta qualidade e corretamente dimensionadas aumentam a sensação de valor dos seus produtos e proporcionam mais informação visual aos potenciais clientes.

Por exemplo, veja como as imagens abaixo da marca de calçado sustentável Allbirds melhoram a experiência do utilizador ao destacar claramente as várias características do seu produto.

Melhore a velocidade das páginas do site

Quando faz o upload de imagens grandes no seu site, o servidor demora mais tempo a carregar a página. As imagens mais pequenas (tanto em dimensões quanto em tamanho de ficheiro) tendem a carregar mais rapidamente em todos os dispositivos.

A velocidade de carregamento das imagens é frequentemente referida como “contentful paint.” Pode verificar o contentful paint da sua página e outras métricas de velocidade de página através do PageSpeed Insights do Google.

As imagens grandes podem impactar significativamente a velocidade de carregamento de um site. Imagine este caso: o servidor demora mais 2,1 segundos a carregar a primeira imagem e 4,1 segundos a carregar a imagem maior, ora estes são dados bastante relevantes.

Metade dos clientes afirma que abandona o carrinho de compras se a página de uma loja demorar mais de 3 segundos a carregar. Este tipo de informações mostram quão importante é otimizar a velocidade das suas páginas para evitar uma taxa de rejeição elevada.

Ajuda a melhorar o ranking do site

O ranking do site refere-se à posição do seu site nas páginas de resultados de motores de pesquisa (SERPs). Os sites otimizados para pesquisa têm um melhor posicionamento nos SERPs para consultas de pesquisa relevantes (conhecidas como palavras-chave).

O Google utiliza várias métricas para determinar quais são as páginas mais bem classificadas para aparecer no topo dos seus resultados de pesquisa. A qualidade das imagens (ou, mais precisamente, a experiência do utilizador melhorada que estas proporcionam) é um fator importante para o algoritmo do Google.

Diretrizes de tamanho de imagem para sites

Num site pode encontrar 5 tipos de imagem:

• Tamanhos de imagem de fundo
• Tamanhos de imagem principal
• Tamanhos de imagem de banner
• Tamanhos de imagem de blogue
• Tamanhos de logótipos

Há vários requisitos de tamanho para cada tipo de imagem que aparece na internet. Vamos ver quais sãos os melhores tamanhos de imagem para os tipos mais comuns de imagens de sites.

Tamanhos de imagem de fundo

As imagens de fundo costumam ser as maiores imagens num site. A imagem serve como pano de fundo para uma página inicial ou página de destino.

Por exemplo, a loja de bicicletas Cowboy destaca o seu produto ao utilizá-lo como fundo na página inicial. Ademais, preenche todo o ecrã independentemente do dispositivo em que é visualizado.

Largura de imagem recomendada: 2 560 pixels

Altura de imagem recomendada: 1 400 pixels

Proporção: 16:9

Tamanho de ficheiro recomendado: 20 MB

Tamanhos de imagem principal

As imagens principais são parecidas às imagens de fundo, mas costumam ser mais baixas — cerca de metade do tamanho. Uma imagem principal é excelente para mostrar um pouco mais de texto no ecrã, sem que os utilizadores tenham de fazer scroll para o ler.

No exemplo acima, a BLK & Bold utiliza uma imagem principal com uma proporção estreita para preencher o ecrã, mas deixa espaço para colocar conteúdo abaixo.

Largura de imagem recomendada: entre 1 280 pixels e 2 500 pixels

Altura de imagem recomendada: entre 720 pixels e 900 pixels

Proporção: 16:9

Tamanho de ficheiro recomendado: 10 MB

Tamanhos de imagem de banner

As imagens de banner podem ter tamanhos e formas diferentes, dependendo do local onde se encontram e do que deseja mostrar aos seus visitantes. O tipo mais comum de banner de site é um anúncio em banner. Quem oferece o serviço mais popular de anúncios para banners é o Google Ads.

Se está a pensar num banner que não seja um anúncio, as opções retangulares (por exemplo, 300 x 200 pixels ou 970 x 90 pixels) costumam ser as melhores.

Largura de imagem recomendada: verifique junto da plataforma de anúncios

Altura de imagem recomendada: verifique junto da plataforma de anúncios

Proporção: várias

Tamanho de ficheiro recomendado: 150 KB (verifique junto da plataforma de anúncios)

Tamanhos de imagem de blogue

As imagens de blogue podem variar em tipo e tamanho. O post acima vem dos especialistas em sono Kulala, e enquanto o tamanho de upload da imagem em destaque é de 1 200 x 620 pixels, o tamanho de renderização é menor 894 x 462 pixels.

Definir um tamanho de renderização para as suas páginas web ajuda a aprimorar o seu design e mantém os ficheiros pequenos (a imagem no post da Kulala tem apenas 95,1 KB).

Quando se trata das principais imagens de cabeçalho dos seus posts de blogue (aquelas no topo da página), estas devem ter um tamanho uniforme em todo o blogue.

Largura de imagem recomendada: 1 200 pixels

Altura de imagem recomendada: 800 pixels

Proporção: 3:2

Tamanho de ficheiro recomendado: 3 MB

Tamanhos de logótipos

É muito provável que o seu logótipo seja uma das imagens mais pequenas do site (a menos que conte o favicon na barra de separadores). Dependendo do seu design de logótipo, o ideal é que opte por uma proporção retangular ou quadrada.

A maioria dos logótipos adapta-se a uma proporção quadrada de 1:1, como pode ver no canto inferior esquerdo, no exemplo acima da Kulala.

As proporções retangulares funcionam bem para nomes de marcas mais longos ou onde o logótipo é uma imagem em vez de uma palavra. O logótipo do site da Shopify utiliza uma proporção mais longa de 4:1.

Largura de imagem recomendada: 100 pixels

Altura de imagem recomendada: 100 pixels

Proporção: 1:1, 2:3, 4:1

Tamanho de ficheiro recomendado: 1 MB

Recomendações de tamanho de imagem para dispositivos móveis

Escolha as dimensões de imagem certas

Em ecrãs de dispositivos móveis mais pequenos, há muitos utilizadores que gostam de ampliar uma imagem. Portanto, tente encontrar um equilíbrio entre o tamanho da imagem e o tamanho do ficheiro.

Utilizar imagens de resolução semelhante, com boas capacidades de zoom, dá uma aparência profissional ao seu site. Use a mesma proporção de imagens, para imagens que sejam semelhantes, por forma a manter um design uniforme entre os tipos de página.

Por exemplo, pode utilizar um formato quadrado para todas as imagens de produtos numa loja online. As imagens quadradas são mais fáceis de reposicionar em ecrãs mais pequenos. Além disso, as imagens quadradas e verticais proporcionam um bom encaixe nos ecrãs dos dispositivos móveis, e fazem com que seja possível para os visitantes verem mais imagens da sua página sem terem de fazer scroll.

Mantenha o tamanho do ficheiro em mente

Imagens com tamanhos de ficheiro maiores podem impactar a velocidade do site, especialmente quando os visitantes estão a usar um smartphone. Muitas plataformas de criação de sites têm restrições de tamanho máximo de ficheiro para uploads. Por exemplo, a Shopify utiliza um tamanho máximo de ficheiro de 20 MB.

Se precisar de comprimir as suas imagens para reduzir o tamanho, há ferramentas de redimensionamento de imagem online que podem ajudar. Com estas ferramentas, pode reformular grandes ficheiros de imagem em novas dimensões ou tipos de ficheiro.

Na maioria das vezes, o ideal é que as imagens de fundo do cabeçalho estejam abaixo de 10 MB, já as fotos de produtos devem ser muito menores — cerca de 300 KB.

Redimensione as fotos para as dimensões de dispositivos móveis

A Shopify redimensiona automaticamente as suas imagens para se ajustarem a ecrãs mais pequenos. Mas noutras plataformas, poderá ter de editar as imagens de forma manual, para que estas fiquem adaptadas a dispositivos móveis. Lembre-se que, os ecrãs de desktop e dispositivos móveis têm orientações opostas.

Mais uma vez, recordamos-lhe que, os ficheiros grandes aumentam o tempo de carregamento do seu site. Embora a compressão sem perdas possa oferecer a melhor qualidade de imagem, muitas vezes cria ficheiros grandes que podem fazer com que o seu site demore uma eternidade a carregar. Experimente usar os ficheiros de imagem mais pequenos e com a melhor resolução.

Embora os designs responsivos e os algoritmos da Shopify sejam bons a redimensionar e exibir as suas imagens nos vários dispositivos, dar-lhes uma ajuda para fazerem o dimensionamento do ficheiro ponderado pode proporcionar uma experiência de compra mais ágil.

Qual é o melhor tipo de ficheiro de imagem a utilizar?

O tipo de ficheiro de imagem certo é sinónimo de imagens de alta qualidade, ao mesmo tempo que se mantém um tamanho de ficheiro gerível para melhorar o desempenho do site. Aqui estão os formatos de ficheiro de imagem mais comuns e onde pode usar cada um deles:

JPEG

JPEG (ou JPG) é um dos formatos de ficheiro de imagem digital mais utilizados porque oferece um equilíbrio entre tamanho de ficheiro e qualidade de imagem. É uma escolha popular para mostrar fotografias e imagens complexas com muitas cores.

No entanto, o JPEG utiliza compressão com perdas, o que significa que alguma da qualidade da imagem é perdida quando a imagem é comprimida.

PNG

PNG é um formato de compressão sem perdas, o que significa que reduz o tamanho do ficheiro sem sacrificar a qualidade da imagem. Suporta a transparência, o que faz dele uma boa escolha para imagens que requerem um fundo transparente.

Embora os PNGs costumem ter tamanhos de ficheiro maiores que os JPEGs, a sua capacidade de manter a clareza torna-os adequados para gráficos detalhados e logótipos.

SVG

SVG (gráfico vetorial escalável) é um formato de imagem vetorial, o que significa que utiliza equações matemáticas para renderizar uma imagem. Ora, isto permite que as imagens SVG sejam dimensionáveis para qualquer tamanho sem perderem qualidade.

O SVG é um formato ideal para logótipos, ícones e outros gráficos que precisam de ser utilizados em múltiplas localizações. Os SVGs, também são normalmente mais pequenos, em tamanho de ficheiro, quando comparados a outro formato, o que ajuda a melhorar os tempos de carregamento.

HEIC

HEIC, ou formato de imagem de alta eficiência, é um formato de ficheiro usado por dispositivos Apple. Utiliza tecnologia de compressão avançada para criar imagens de alta qualidade com tamanhos de ficheiro menores do que os seus equivalentes JPEGs.

No entanto, o HEIC não é universalmente suportado em dispositivos que não são da Apple.

WebP

O WebP é um formato de imagem desenvolvido pelo Google. Oferece compressão sem perdas para imagens na web, habitualmente, reduz o tamanho do ficheiro em mais de 30% em comparação ao JPEG ou PNG.

Tal pode melhorar significativamente os tempos de carregamento do site, mas vale a pena notar que o WebP ainda não é algo universal e nem todos os navegadores o suportam.

GIF

O GIF é um formato de imagem bitmap conhecido pela sua capacidade de suportar animações simples. Utiliza uma compressão sem perdas e reduz as imagens a um máximo de 256 cores, logo os tamanhos de imagem são mais pequenos.

Embora o GIF tenha sido amplamente substituído pelo PNG para imagens estáticas, continua a ser uma escolha popular para animações curtas e em loop e é universalmente reconhecido pelos navegadores.

TIFF

O TIFF, ou formato de ficheiro de imagem etiquetado, é um formato de alta qualidade e sem perdas amplamente suportado por aplicações de edição de imagem. É ideal para armazenar imagens para impressão profissional devido à sua alta resolução e profundidade de cor.

Com o TIFF, várias imagens e páginas podem ser convenientemente guardadas num único ficheiro. No entanto, os tamanhos de ficheiro tendem a ser grandes.

Como descobrir os tamanhos das imagens num site

A forma mais rápida de verificar o tamanho de uma imagem em qualquer página web (sem a necessidade de descarregar a imagem) é usar a ferramenta de inspeção do seu navegador.

Este método funciona em Mac e Windows, com navegadores Safari, Chrome ou Firefox.

Vá até à página web e passe o cursor sobre a imagem que quer ver detalhadamente. Clique com o botão direito do rato para abrir o menu de opções e procure a opção Inspecionar:

Clicar em Inspecionar abrirá o código HTML da página (pode parecer intimidante, mas não se preocupe).

No painel de inspeção, as informações sobre a imagem em que clicou devem estar destacadas. Ao passar o cursor sobre o código relevante, a imagem também ficará destacada:

Neste caso, o navegador diz-lhe quantos pixels a imagem está a utilizar. Se redimensionar a página web, esse número mudará proporcionalmente.

Se procura as propriedades de upload originais da imagem, passe o cursor sobre o link de armazenamento da imagem:

Para sair do painel de inspeção, basta clicar no X no canto superior direito.

Ferramentas de otimização de imagem

As ferramentas de otimização de imagem online são uma forma simples, rápida (e habitualmente gratuita) de redimensionar as imagens do site. Eis 3 ferramentas populares de otimização de imagem:

• Redimensionador de Imagem
• Otimizador de Imagem da Squirai
• Otimizador de Imagem da LoyaltyHarbour

Redimensionador de Imagem

A ferramenta gratuita de redimensionamento de imagem da Shopify é uma forma conveniente de ajustar as imagens para serem utilizadas em canais de marketing e redes sociais.

Pode escolher entre uma variedade de dimensões oficiais para posts e histórias do Instagram, miniaturas do YouTube e outros tipos de conteúdo para redes sociais.

Otimizador de Imagem da Squirai

A ferramenta de otimização de imagem da Squirai é testada em velocidade para garantir que as suas imagens estão prontas para SEO. Esta ferramenta otimiza automaticamente todas as imagens do seu site — incluindo imagens novas que adicione mais tarde.

Além disso, pode personalizar e aplicar uma marca d'água para proteger as suas fotografias de produtos sem precisar de saber código.

Otimizador de Imagem da LoyaltyHarbour

O otimizador de imagem da LoyaltyHarbour funciona de forma semelhante à ferramenta da Squirai, ou seja, comprime automaticamente as imagens de todo o seu site.

Além disso, o painel permite-lhe definir automaticamente o texto alternativo da imagem e fazer a conversão para o melhor tipo de ficheiro de imagem, para uma melhor velocidade de página.

Alternativamente, se tiver a aptidões para tal, também pode usar o Photoshop para reduzir o tamanho do ficheiro. Mas este pode ser um processo mais complicado face às ferramentas acima.

Resolução de problemas: questões de formatação de imagens

À medida que gere o seu site, e a dada altura, provavelmente encontrará problemas de formatação de imagens. Os problemas com imagens podem variar desde tamanhos incorretos a links sem ligação.

Vamos analisar soluções para alguns dos problemas comuns com imagens de sites.

Tamanho de imagem incorreto

Problema: as imagens são demasiado grandes ou pequenas, e podem estragar o layout de uma página web, o que compromete a experiência do utilizador.

Solução: se está a usar um tema ou modelo de site, procure recursos sobre as dimensões corretas de imagem para o seu design. No seu criador de sites, garanta que seleciona tamanhos de renderização para cada imagem, para que estas não sejam exibidas no seu tamanho original completo.

Tempos de carregamento lentos

Problema: as imagens carregam mais lentamente do que o resto de uma página web — ou não carregam de todo.

Solução: o formato de ficheiro errado pode levar a tamanhos de ficheiro desnecessariamente grandes que afetam os tempos de carregamento. Use uma ferramenta de edição ou conversão de imagem para mudar o formato de ficheiro das suas imagens. Para gráficos ou logótipos, experimente usar SVG para poder dimensionar sem perder qualidade. Para outras imagens, pode fazer a conversão para WebP para comprimir ficheiros grandes.

Má qualidade de imagem

Problema: as imagens aparecem pixeladas ou desfocadas.

Solução: se as suas imagens aparecem pixeladas ou desfocadas, tente encontrar uma versão de maior resolução. Lembre-se, a resolução da imagem difere do tamanho da imagem. A resolução refere-se à quantidade de detalhe que uma imagem possui, frequentemente medida em pixels por polegada (PPI). Uma resolução mais alta significa uma imagem mais nítida, independentemente do tamanho.

Se a qualidade da imagem estiver a ser reduzida pela compressão, ajuste as suas configurações de compressão ou mude para um formato de compressão sem perdas como o PNG.

As imagens não estão a ser exibidas de todo

Problema: links de imagem sem ligação que fazem com que não apareça qualquer imagem.

Solução: verifique a URL de origem das suas imagens. Esta URL deve ser um encaminhamento direto para a localização do seu ficheiro de imagem. Compare o nome do ficheiro de imagem na URL com o nome real do seu ficheiro de imagem. Devem ser uma correspondência exata, incluindo a extensão do ficheiro (.jpg, .png, .svg).

Otimize as imagens do site para o sucesso

Adicionar imagens ao seu site não é apenas uma questão de estética — é um fator-chave para melhorar a experiência do utilizador e subir nos rankings nos motores de pesquisa.

O tamanho das suas imagens afeta ambos. Se forem demasiado grandes, as suas páginas web podem ser muito lentas a carregar. Se forem demasiado pequenas, as imagens podem aparecer pixeladas ou desfocadas.

Garanta que compreende os requisitos de dimensão de imagem do design do seu site e escolha o formato de ficheiro certo para equilibrar a resolução de imagem com o tamanho do ficheiro.