Hoje em dia, as pessoas usam a internet em dispositivos móveis com mais frequência do que em computadores desktop ou laptops. Com tanta opção de escolha entre celulares e tablets, há uma enorme variedade de tamanho de telas. Portanto, é essencial ficar de olho nisso, criando seu site para que todos os visitantes tenham uma boa experiência, independentemente do aparelho que usam.
Caso suas imagens não estejam otimizadas para tanto, elas podem parecer muito pequenas, muito grandes, embaçadas, demorar para carregar, exigir 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 múltiplos tipos de aparelho. Para tanto, é preciso optar pelas dimensões corretas, os tamanhos mínimos de arquivo e aplicar o que é chamado de design responsivo, criando uma experiência para usuário nenhum botar defeito.
Continue lendo e descubra o que fazer para que suas imagens saiam arrasando em qualquer dispositivo.
Melhores tamanhos de imagem para sites
Largura de pixel: 2.500 pixels é o número perfeito para exibição em tela cheia em navegador na grande maioria dos casos. Imagens menores podem ser cortadas ou aparecerem embaçadas caso sejam alteradas para atender a largura do navegador.
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 coisa acima de 20 megas pode atrapalhar muito a velocidade do site. Imagens menores são ideais, de até 2 megas, com cerca de 500 kilobytes.
Atributo de imagem: Os atributos das imagens (alt text ou tags) são textos, portanto, não afetam o desempenho do site. No entanto, são utilizados para interpretar as imagens por meio de programas que leem as telas. Assim sendo, eles devem ser curtos e diretos, abaixo de 100 caracteres.
Melhores dimensões de imagem para dispositivos desktop e móveis
Confira a tabela abaixo para ver a dimensões recomendadas para imagens, tanto para exibição em desktop como em aparelhos 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(aspect ratio) |
|---|---|---|---|
|
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 |
16 x 16 pixels |
16 x 16 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 |
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.
Por que o tamanho das imagens é importante nos sites?
Aprimorar a experiência do usuário
A experiência do usuário pode ser altamente melhorada através do uso de imagens do tamanho correto. Isso 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, pequenas demais não são só chatas, elas diminuem a qualidade percebida do seu conteúdo (e, consequentemente, do seu negócio).
Por outro lado, belas imagens do tamanho certo elevam a percepção de valor dos seus produtos e passam 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:
Acelerar a velocidade da página
Ao subir imagens grandes e pesadas para o seu site, o servidor demora mais para carregá-lo. Ou seja, seja na questão da dimensão quando do tamanho do arquivo, imagens menores tendem a carregar com maior rapidez.
É possível checar a velocidade de carregamento das suas imagens, além de outros fatores, 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. Ou seja, a lentidão pode acabar custando caro para você. E, se as páginas demoram mais de 6 segundos para carregar, a taxa de rejeição da sua página pode subir.
Ajudar 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 se acredita ser um fator importante no algoritmo.
Orientações sobre tamanhos de imagens para sites
Cada um deles possui requisitos diferentes. Confira abaixo os tamanhos mais comuns.
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
Aspect ratio: 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, da 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
Aspect ratio: 16:9
Tamanho de arquivo recomendado: 10 MB
Banners de site
Os banners podem ter diferentes tamanhos e formas, o que varia com seu posicionamento e o que pretendem comunicar. O tipo de banner mais comum é o de anúncio.
O Google Ads tem orientações de tamanho para banners.
Caso a imagem desejada não seja um anúncio, as opções retangulares costumam ser melhores.
Largura recomendada: Verificar com a plataforma dos anúncios
Altura recomendada: Verificar com a plataforma dos anúncios
Aspect ratio: Varia
Tamanho de arquivo recomendado: 150 KB (verificar com a plataforma dos 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.
Em se tratando das principais imagens no alto da página dos posts, o legal é que o tamanho seja igual em todas as publicações. O exemplo acima é da marca de maquiagem Care Natural Beauty.
Largura recomendada: 1200 pixels
Altura recomendada: 800 pixels
Aspect ratio: 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 um aspect ratio quadrado 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 ao invés 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
Aspect ratio: 1:1, 2:3, 4:1
Tamanho de arquivo recomendado: 1 MB
Recomendações de tamanho de imagem para dispositivos móveis
Nas telas de celulares, é comum que usuários gostem de poder 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 o aspect ratio igual entre as imagens para que o design do site permaneça uniforme em todas as páginas.
Por exemplo, você pode querer 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 direitinho nas telas dos celulares, permitindo que o visitante visualize mais imagens sem ter que ficar deslizando.
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.
Atenção no tamanho do arquivo
Imagens em arquivos pesados podem ocasionar lentidão no carregamento do site, especialmente 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.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 aparelhos móveis. Não se esqueça de que as telas de desktop e celulares possuem orientações opostas.
E é sempre bom lembrar que arquivos mais pesados demoram mais para carregar. É legal pensar em usar 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 é sempre uma boa dar aquela mãozinha ao pensar nos tamanhos de arquivo ideais para aprimorar a experiência de compra do visitante.
Qual é o melhor tipo de arquivo de imagem para usar?
O arquivo certo garante imagens de boa qualidade enquanto mantém o tamanho do arquivo num limite razoável para um bom desempenho do site. Seguem alguns dos tipos mais comuns e para que são usados:
JPEG
JPEG (ou JPG) é um dos formatos mais comuns de imagens digitais. Sua popularidade se dá ao fato de 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 perdido quando a imagem é comprimida.
PNG
O formato PNG consegue reduzir o tamanho do arquivo sem sacrificar a qualidade da imagem. Além disso, ele suporta transparência, o que faz dele uma boa opção quando a imagem exige isso para o fundo. Embora os PNGs costumem ser um pouco mais pesados que os JPEGs, a capacidade que possuem de manter essa clareza faz com que sejam ideais para gráficos e logotipos.
SVG
O SVG (scalable vector graphic) é um formato de imagem de vetor, o que significa que utiliza 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.
HEIC
HEIC, ou high efficiency image format (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. No entanto, ele não é universalmente suportado em dispositivos não fabricados pela Apple.
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 30%, se comparado com JPEG e PNG. Com isso, ele consegue acelerar bastante o carregamento dos sites, mas vale a pena lembrar que não é suportado em todos os navegadores.
GIF
GIF é uma imagem de bitmap conhecida por sua capacidade de suportar 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.
TIFF
O TIFF, ou tagged image file format, é um formato de alta qualidade sem perda de dados, suportado por muitas aplicações de edição de imagem. Ele é ideal para armazenar imagens para serem usadas em serviços de impressão profissional, devido à sua alta resolução e a profundidade de suas 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, no 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 sobre o código relevante, a imagem em si também é destacada.
Neste caso, o navegador informa quantos pixels a imagem usa. Caso altere o tamanho da página, os números mudam de acordo com isso. Se 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 no X para fechar.
3 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 é que costumam ser gratuitas! A Shopify possui sua própria ferramenta para lhe ajudar nisso. Algumas das ferramentas mais populares são:
1. Image Resizer
O Image Resizer é uma opção simples e gratuita para redimensionar imagens online.
2. Image Optimizer by Squirai
A Squirai é uma ferramenta com velocidade testada e aprovada para que suas imagens sejam imbatíveis na SEO. Ela otimiza todas as imagens do site automaticamente, incluindo aquelas adicionadas posteriormente. Outro recurso bacana é o de poder adicionar uma marca d'água sem ter que saber 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 alt text das imagens e conversão para o melhor formato em termos de velocidade de carregamento.
Caso 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 tem como escapar: quem tem site acaba encontrando algum problema com tamanho de imagem de vez em quando. As razões podem ser desde tamanhos incorretos até 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, comprometendo a experiência do usuário.
Solução: Se usa um tema ou modelo de site, procure recursos sobre as dimensões corretas de imagem para o seu design. No seu criador de site, 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 sequer carregam.
Solução: Usar 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 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 a URL fonte das imagens. Ela deve levar diretamente para o local do arquivo da imagem. Compare o nome do arquivo na 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 imagens pode ajudar no seu sucesso
Colocar imagens no site não é só para deixá-lo bonito. Embora isso seja importante, imagens são um fator essencial para a experiência do visitante e nos rankings dos mecanismos de busca.
O tamanho é um fator crucial para estas duas 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 certo 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?
Imagens de tela cheia devem ter no mínimo 2500 px. 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 vale a pena lembrar que 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, o que costuma ser medido 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. Isso pode ocasionar lentidão em 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 através da compressão sem perda de dados, que remove tudo aquilo desnecessário na imagem sem afetar sua aparência. Ferramentas como o Adobe Photoshop ou outras encontradas na web podem ser usadas nesta compressão, e muitas delas são de uso gratuito.
