Hoje em dia, as pessoas usam a internet em dispositivos móveis com mais frequência do que em computadores ou notebooks. Com tanta opção de escolha entre celulares e tablets, há uma enorme variedade de tamanho de telas. É essencial criar seu site para que todos os visitantes tenham uma boa experiência, independentemente do aparelho que estão usando.
Caso suas imagens não estejam otimizadas, elas podem parecer muito pequenas, muito grandes, embaçadas, demorarem para carregar, exigirem o uso do zoom, e tantas outras coisas que podem acabar irritando ou incomodando os visitantes.
A boa notícia é que é muito fácil deixar suas imagens compatíveis com vários tipos de aparelho. É preciso optar pelas dimensões corretas, os tamanhos mínimos de arquivo e aplicar o que é chamado de “design responsivo”, criando uma experiência ótima para usuário nenhum botar defeito.
Continue lendo e descubra o que fazer para que suas imagens funcionem bem em qualquer dispositivo.
Os melhores tamanhos de imagem para sites
- Largura de pixel: depende da área de exibição, mas as diretrizes gerais sugerem 1920 px para banners, 1200 px para o conteúdo principal, e 400 a 800 px para miniaturas. Imagens comprimidas no formato WebP são as melhores para manter velocidades de carregamento rápidas.
- Tamanho da imagem: o melhor tamanho (em pixels) das suas imagens vai depender do uso em questão. Por exemplo, imagens de fundo precisam ser maiores do que uma imagem que ilustra uma publicação.
- Tamanho de arquivo: qualquer item acima de 20 MB pode atrapalhar muito a velocidade do site. Imagens menores são ideais, de até 2 MB, com cerca de 500 KB.
- Atributo de imagem: os atributos das imagens (texto alternativo ou tags) são textos, então não afetam o desempenho do site. No entanto, são utilizados para interpretar as imagens por meio de programas que leem as telas e são um elemento essencial da acessibilidade na web. Assim sendo, eles devem ser curtos e diretos, abaixo de 100 caracteres, incluindo espaços.
As melhores dimensões de imagem para dispositivos desktop e móveis
Confira a tabela a seguir para ver as dimensões recomendadas para imagens, tanto para exibição em desktop como em dispositivos móveis.
| Tipo de imagem do site | Dimensões de imagem desktop (L x A) | Dimensões de imagem móvel (L x A) | Proporção de tela recomendada |
|---|---|---|---|
| Imagem de fundo | 2560 x 1400 pixels | 360 x 640 pixels | 16:9 |
| Hero image | 1280 x 720 pixels | 360 x 200 pixels | 16:9 |
| Banner de site | 1200 x 400 pixels | 360 x 120 pixels | 3:1 |
| Imagem de blog | 1200 x 800 pixels | 360 x 240 pixels | 3:2 |
| Logotipo (retângulo) | 400 x 100 pixels | 160 x 40 pixels | 4:1 |
| Logotipo (quadrado) | 100 x 100 pixels | 60 x 60 pixels | 1:1 |
| Favicon | 48 x 48 pixels | 48 x 48 pixels | 1:1 |
| Ícones de redes sociais | 32 x 32 pixels | 48 x 48 pixels | 1:1 |
| Imagens lightbox (tela cheia) | 1920 x 1080 pixels | 360 x 640 pixels | 16:9 |
| Thumbnail (miniatura) | 300 x 300 pixels | 90 x 90 pixels | 1:1 |
| Miniaturas de produto | 150 a 300 px | 150 a 300 px | 1:1 (quadrado) |
Estes tamanhos são sugeridos e podem exigir adaptação, dependendo se você usa ou não um design responsivo. É quase sempre recomendado que o tamanho renderizado das imagens seja menor do que o tamanho de upload.
Orientações sobre tamanho de imagem para site
Há cinco tipos principais de imagens que você vai encontrar em um site. Cada um deles possui requisitos diferentes.
Imagem de fundo
Elas costumam ser as maiores imagens num site, aparecendo na página inicial ou em uma landing page. Uma imagem de fundo deve preencher a tela, independentemente do dispositivo usado para acessar o website. A imagem acima, da loja de colchões Zissou, é um bom exemplo.
Largura recomendada: 2560 pixels
Altura recomendada: 1400 pixels
Proporção: 16:9
Tamanho de arquivo recomendado: 20 MB
Hero image
As “hero images” são semelhantes às imagens de fundo, mas costumam ser menores, tendo cerca de metade do tamanho. Elas são uma ótima opção para quem precisa colocar mais texto na tela sem obrigar o visitante a deslizar por ela.
O exemplo acima, do Outback Steakhouse, destaca uma promoção com todas as informações necessárias, mas deixa espaço para que mais texto seja adicionado abaixo.
Largura recomendada: entre 1280 e 2500 pixels
Altura recomendada: entre 720 pixels e 900 pixels
Proporção: 16:9
Tamanho de arquivo recomendado: 10 MB
Banners de site
Os banners podem ter diferentes tamanhos e formas, que variam de acordo com o posicionamento e o que pretendem comunicar. O tipo de banner mais comum é o de anúncio.
O Google Ads apresenta orientações de tamanho para banners:
Caso a imagem desejada não seja um anúncio, as opções retangulares costumam ser melhores (por exemplo, 300 x 200 pixels ou 970 x 90 pixels).
Largura recomendada: verificar com a plataforma que veiculará os anúncios.
Altura recomendada: verificar com a plataforma que veiculará os anúncios
Proporção: varia
Tamanho de arquivo recomendado: 150 KB (verificar com a plataforma que veiculará os anúncios)
Imagem de blog
As imagens de blog podem variar de tipo e tamanho. Ao definir um tamanho de renderização para as imagens, os arquivos são mais leves e o design tem aspecto mais sofisticado.
Para as principais imagens no alto da página dos posts, o tamanho deve ser igual em todas as publicações. O exemplo acima é da marca de maquiagem Care Natural Beauty.
Largura recomendada: 1200 pixels
Altura recomendada: 800 pixels
Proporção: 3:2
Tamanho de arquivo recomendado: 3 MB
Logos
O mais provável é que o logo seja uma das menores imagens do seu site. Dependendo do design, você pode optar por uma proporção quadrada ou retangular. A maioria dos logos é quadrado, ou seja, 1:1.
Agora, se o nome da marca for mais longo ou se o logo focar em palavras em vez de elementos gráficos, pode ser que o formato retangular funcione melhor. O logotipo no site da Shopify usa uma razão maior, de 4:1.
Largura recomendada: 100 pixels
Altura recomendada: 100 pixels
Proporção: 1:1, 2:3, 4:1
Tamanho de arquivo recomendado: 1 MB
Recomendações de tamanho de imagem para dispositivos móveis
Escolha as dimensões certas
Nas telas de celulares, é comum que usuários gostem de dar zoom nas imagens. Sendo assim, é importante encontrar um bom equilíbrio entre o tamanho da imagem e o tamanho do arquivo.
Imagens em alta resolução dão um aspecto mais profissional e funcionam bem com o zoom. Mantenha a proporção igual entre as imagens para que o design do site permaneça uniforme em todas as páginas.
Por exemplo, você pode preferir que todas as imagens de sua loja virtual sejam quadradas, já que elas são mais fáceis de reposicionar em telas menores. Além disso, imagens quadradas e verticais se encaixam adequadamente nas telas dos celulares, permitindo que o visitante visualize mais imagens sem ter que ficar deslizando a tela.
Na Shopify, você pode enviar imagens de até 5000 x 5000 pixels e 20 MB. Para imagens quadradas de produto, recomenda-se um tamanho de 2048 x 2048 pixels. Não se esqueça: para que o zoom funcione, as imagens devem ter mais de 800 x 800 pixels.
Preste atenção ao tamanho do arquivo
Imagens em arquivos pesados podem gerar lentidão no carregamento do site, principalmente quando ele é acessado pelo celular. E muitas das plataformas de criação de site também possuem tamanho máximo para os arquivos. Por exemplo, na Shopify o máximo é de 20 MB.
Caso precise comprimir suas imagens para reduzir o tamanho, existem vários recursos on-line que ajudam nisso, como o redimensionador de imagens gratuito da Shopify. Use essas ferramentas para reformatar os arquivos de imagem maiores em novas dimensões ou tipos de arquivos.
De modo geral, imagens de fundo devem ficar abaixo de 10 MB enquanto as fotos dos produtos devem ser muito mais leves, tendo cerca de 300 KB.
Redimensionamento de fotos para telas de dispositivos móveis
A Shopify automaticamente redimensiona suas imagens para telas menores. No entanto, em outras plataformas, pode ser necessário fazer uma edição manual para que as imagens funcionem bem nos dispositivos móveis. Não se esqueça de que as telas de computador e celulares têm orientações opostas.
Lembre-se: arquivos mais pesados demoram mais para carregar. A compressão sem perda de dados oferece a maior qualidade de imagem, mas ela frequentemente gera arquivos grandes que podem deixar seu site lento. Use os menores arquivos possíveis com a melhor resolução. Os designs e temas responsivos da Shopify são ótimos em redimensionar e exibir imagens em diversos dispositivos, mas é recomendado fazer ajustes ao pensar nos tamanhos de arquivo ideais para aprimorar a experiência de compra do visitante.
Por que o tamanho das imagens é importante nos sites?
Aprimora a experiência do usuário
A experiência do usuário (UX) pode ser aprimorada pelo uso de imagens do tamanho correto. A UX ajuda os visitantes a visualizarem um bom nível de detalhes, sem ter que deslizar para ver a imagem como um todo.
Imagens pixeladas, de baixa qualidade e pequenas demais não são apenas chatas: elas diminuem a qualidade percebida do seu conteúdo (e, consequentemente, do seu negócio). Para um site de e-commerce, os clientes podem questionar a qualidade dos seus produtos.
Por outro lado, belas imagens do tamanho certo elevam a percepção de valor dos seus produtos e transmitem informações visuais de forma muito mais clara.
Por exemplo, observe como estas imagens do site do Café do Ponto são atrativas e exibem bem as características dos produtos:
Acelera a velocidade da página
Ao carregar imagens grandes e pesadas no seu site, o servidor demora mais para carregá-lo. Ou seja, em termos de dimensão e tamanho do arquivo, imagens menores tendem a carregar com uma maior rapidez.
A velocidade de carregamento das imagens é frequentemente chamada de “contentful paint”. É possível checar essa métrica e outros fatores de velocidade da página usando o PageSpeed Insights.
Vale lembrar que muitos consumidores abandonam carrinhos em lojas virtuais, às vezes por perder a paciência com a velocidade de carregamento. A lentidão pode acabar custando caro para você. Se as páginas demoram mais de seis segundos para carregar, a taxa de rejeição da sua página pode subir.
Ajuda no ranking do site
O ranking do seu site é o que determina o posicionamento dele no retorno das buscas. Sites otimizados costumam aparecer em melhores posições. O Google, por exemplo, utiliza uma combinação de métricas para determinar a ordem das páginas nas pesquisas. A qualidade das imagens aprimora a experiência do usuário, o que muitos acreditam ser um fator importante no algoritmo.
Qual é o melhor tipo de arquivo de imagem para usar?
O arquivo ideal garante imagens de boa qualidade enquanto mantém o tamanho do arquivo num limite razoável para um bom desempenho do site.
WebP
O WebP é um formato de imagem desenvolvido pelo Google. Com ele, é possível aplicar compressão sem perder a qualidade para imagens na web, o que costuma reduzir o tamanho dos arquivos em mais de 30%, se comparado com JPEG e PNG. Este arquivo consegue acelerar bastante o carregamento dos sites, mas vale a pena lembrar que não é compatível com todos os navegadores.
JPEG
JPEG (ou JPG) é um dos formatos mais comuns de imagens digitais. A popularidade se dá ao fato de ele apresentar uma ótima relação entre qualidade de imagem e tamanho de arquivo. Ele é muito usado para fotografias e imagens complexas com muitas cores. No entanto, o tipo de compressão usada faz com que um pouco da qualidade seja perdida quando a imagem é comprimida.
PNG
O formato PNG consegue reduzir o tamanho do arquivo sem sacrificar a qualidade da imagem. Além disso, ele é compatível com a transparência, o que o torna em uma boa opção quando a imagem exige transparência para o fundo. Embora os PNGs costumem ser um pouco mais pesados que os JPEGs, a capacidade de manterem essa clareza faz com que sejam ideais para gráficos e logotipos.
SVG
O SVG (“scalable vector graphic” ou “gráfico vetorial escalonável”) é um formato de imagem de vetor: são utilizadas equações matemáticas na renderização da imagem. Sendo assim, ele pode ser dimensionado em qualquer tamanho sem perda de qualidade. Ele é ideal para logotipos, ícones e outros elementos gráficos que aparecem em vários locais. Além disso, os arquivos costumam ser menores, se comparados com outros formatos, o que ajuda a agilizar o carregamento.
AVIF
O AVIF (AV1 Image File Format) é um formato de imagem moderno desenvolvido para a web. Ele oferece compressão superior, gerando arquivos extremamente pequenos enquanto mantém uma alta qualidade visual. Os arquivos AVIF costumam ser muito menores do que os equivalentes em WebP ou JPEG. Use-o para qualquer imagem web para priorizar o desempenho mais rápido e o menor tamanho de arquivo possíveis. A principal limitação é ser um formato mais recente, ainda não compatível com todos os navegadores mais antigos.
GIF
GIF é uma imagem de bitmap conhecida por apresentar animações simples. Ele usa compressão sem perda de dados, reduzindo imagens a um máximo de 256 cores, o que resulta em arquivos mais leves. Para imagens estáticas, o GIF foi substituído pelo PNG, mas continua sendo bastante usado para animações curtas, e é universalmente reconhecido por todos os navegadores.
HEIC
HEIC (“high efficiency image format” ou “formato de imagem de alta eficiência”) é um formato usado por dispositivos da Apple. Ele utiliza uma tecnologia avançada de compressão para gerar imagens de alta qualidade com arquivos mais leves, equivalentes aos JPEGs. Ele não é universalmente compatível com dispositivos não fabricados pela Apple.
TIFF
O TIFF (“tagged image file format”, é um formato de alta qualidade sem perda de dados, compatível com muitas aplicações de edição de imagem. Ele é ideal para armazenar imagens que serão usadas em serviços de impressão profissional devido à alta resolução e a profundidade de cores.
Com o TIFF, diversas imagens e páginas podem ser salvas num único arquivo. Por outro lado, os arquivos costumam ser pesados.
Como descobrir o tamanho das imagens num site
A maneira mais fácil de descobrir o tamanho de uma imagem sem ter que baixar o arquivo em si é utilizar a ferramenta de inspecionamento do seu navegador. Isso funciona tanto para Mac como Windows, em navegadores como Safari, Chrome ou Firefox.
Basta passar o cursor sobre a imagem, clicar com o botão direito e escolher a opção “inspecionar” no menu.
Com isso, aparece o código HTML da página. No painel de inspeção, informações sobre a imagem clicada aparecem em destaque. Ao passar o mouse sobre o código relevante, a imagem também é destacada.
Neste caso, o navegador informa quantos pixels a imagem usa. Caso você altere o tamanho da página, os números mudam de acordo.
Se você estiver procurando as propriedades originais da imagem enviada inicialmente, passe o cursor sobre o link de armazenamento da imagem.
Para sair do painel, basta clicar em “X” para fechar.
Ferramentas de otimização de imagens
As ferramentas de otimização de imagem oferecem uma maneira simples e rápida de redimensionar imagens na internet. E o melhor: costumam ser gratuitas! A Shopify possui a própria ferramenta para ajudar você nisso.
1. Redimensionador de imagens da Shopify
O Redimensionador de imagens da Shopify é uma ferramenta gratuita e conveniente para ajustar suas imagens para uso em diferentes canais de marketing e redes sociais. Escolha entre uma variedade de dimensões oficiais para posts e stories do Instagram, miniaturas do YouTube e outros tipos de conteúdo social.
2. Squirai Image Optimizer
A Squirai é uma ferramenta com velocidade testada e aprovada para que suas imagens sejam imbatíveis em termos de otimização para mecanismos de busca (SEO). Ela otimiza todas as imagens do site automaticamente, incluindo aquelas adicionadas posteriormente. Outro recurso é poder adicionar uma marca d’água sem ter que programar qualquer tipo de código.
3. LoyaltyHarbour Image Optimizer
LoyaltyHarbour Image Optimizer funciona de maneira semelhante ao Squirai, automaticamente comprimindo imagens por todo o site. Além disso, o painel permite a configuração automática do texto alternativo das imagens e conversão para o melhor formato em termos de velocidade de carregamento.
Caso você tenha as habilidades necessárias, o Photoshop também pode ser usado para reduzir o tamanho de um arquivo, apesar de ser um processo mais complicado.
Guia de resolução de problemas
Não há como escapar: quem é proprietário de um site acaba encontrando algum problema com o tamanho de imagem de vez em quando. Os motivos podem incluir tamanhos incorretos ou links quebrados. Confira algumas soluções para problemas comuns abaixo.
Tamanho de imagem incorreto
Problema: as imagens aparecem muito grandes ou muito pequenas, quebrando o layout da página e comprometendo a experiência do usuário.
Solução: se você usa um tema ou modelo de site, consulte recursos sobre as dimensões corretas de imagem para o seu design. No seu criador de sites, selecione os tamanhos de renderização para cada imagem. Assim, elas não são exibidas no tamanho original.
Carregamento lento
Problema: as imagens demoram mais para carregar do que o restante da página ou nem carregam.
Solução: o formato incorreto pode resultar em imagens mais pesadas, que podem ocasionar lentidão no carregamento. Use uma ferramenta de edição ou conversão de imagens para alterar o formato. Para gráficos ou logotipos, considere o formato SVG, que permite a alteração de dimensão sem perda de qualidade. Para outras imagens, considere convertê-las em WebP para comprimir arquivos grandes.
Baixa qualidade
Problema: as imagens aparecem pixeladas ou embaçadas.
Solução: Tente obter uma versão com maior resolução. Lembre-se de que a resolução não é a mesma coisa que tamanho. O termo “resolução” se refere ao nível de detalhes de uma imagem, que costuma ser medido em pixels por polegada (PPI). Imagens com maior resolução são mais nítidas, independentemente do tamanho. Se a qualidade da imagem for reduzida por compressão, ajuste as configurações ou opte por um formato que pode ser comprimido sem perda de dados, como o PNG.
As imagens não aparecem
Problema: links quebrados resultam em imagens que não aparecem.
Solução: verifique o URL de origem das imagens. Ela deve levar diretamente para o local do arquivo da imagem. Compare o nome do arquivo no URL com o nome real do arquivo da imagem, já que eles devem corresponder em tudo, inclusive na extensão (.jpg, .png, .svg).
Como otimizar o tamanho de imagem para site pode ajudar no seu sucesso
Colocar imagens no site não é só para deixá-lo bonito. Isso é importante, mas as imagens são um fator essencial para a experiência do visitante e para os rankings dos mecanismos de busca.
O tamanho é um fator fundamental para ambas as coisas. Se as imagens forem muito grandes, suas páginas demoram para carregar. Se forem muito pequenas, aparecem pixeladas ou embaçadas.
Confira as exigências de dimensão no design do seu site,e escolha o formato ideal para alcançar um bom equilíbrio entre resolução e tamanho do arquivo.
Perguntas frequentes sobre tamanho de imagem para site
Qual é o melhor tamanho de imagem para um site?
As imagens de tela cheia devem ter, no mínimo, 2500 px de largura. O melhor tamanho de imagem para o site depende da utilização dela e do tamanho da renderização, além do impacto do tamanho do arquivo na velocidade de carregamento.
Qual é o melhor formato de imagem para um site?
WebP é um formato popular para sites, já que garante um desempenho veloz. Desenvolvido pelo Google, o formato pode ser comprimido sem perda de dados para imagens usadas na web, chegando a reduzir tamanhos de arquivo em até 30%, se comparado com JPEG e PNG. Mas lembre-se: ele não é compatível com todos os navegadores.
Qual é a diferença entre tamanho e resolução de imagem?
O tamanho de uma imagem se refere às dimensões dela, que costumam ser medidas pela largura e altura em pixels. Já a resolução se refere ao nível de detalhes de uma imagem, que costuma ser medido em pixels por polegada (PPI). Uma maior resolução resulta em mais detalhes e numa imagem mais nítida, independentemente do tamanho.
Como o tamanho da imagem afeta o tempo de carregamento?
Quanto mais pesado for o arquivo de uma imagem, mais demora para que ela baixe e apareça na tela do usuário. Pode haver lentidão nas páginas, o que prejudica a experiência do usuário e o ranking nas buscas. Portanto, é importante conseguir um bom equilíbrio entre qualidade e tamanho de arquivo.
Como reduzir o tamanho do arquivo das imagens sem perder qualidade?
Isso é possível pela compressão sem perda de dados, que remove tudo o que for desnecessário na imagem sem afetar a aparência. Ferramentas como o Adobe Photoshop ou outras encontradas na web podem ser usadas nesta compressão, e muitas delas são gratuitas.
