Transforme sua ideia em site profissional ainda hoje!
Existe um problema que aparece em quase todo site lento que a gente abre para analisar, e quase nunca é o que o dono imagina. Não é a hospedagem, não é o WordPress, não é a internet do visitante. São as imagens. Fotos tiradas no celular, salvas do jeito que saíram da câmera e jogadas direto no site, cada uma pesando vários megabytes.
O efeito é bem concreto: a pessoa toca no link do seu Instagram, o site começa a abrir, a tela fica branca por três, quatro, cinco segundos — e ela volta. Não é falta de interesse. É que ninguém espera. A boa notícia é que otimizar as imagens do site é uma das tarefas com melhor retorno que existe: dá para deixar a página várias vezes mais leve em uma tarde de trabalho, sem que o visitante perceba qualquer diferença na qualidade.
Por que as imagens pesam tanto
Quando alguém abre o seu site, o navegador precisa baixar tudo que existe naquela página: os textos, o layout, as fontes e — o item mais gordo da lista — as imagens. Textos ocupam alguns quilobytes. Uma única foto direto do celular pode ocupar 4 megabytes, o equivalente a mais de mil páginas de texto.
Se a sua página inicial tem seis fotos assim, o visitante está baixando cerca de 24 MB só para ver a primeira tela. No wi-fi do escritório isso passa despercebido. No 4G da rua, num sinal fraco de fim de tarde, vira uma eternidade. E é justamente aí que a maioria das visitas acontece.
Vale lembrar do que já explicamos em como um site rápido ajuda a vender mais: velocidade não é vaidade técnica, é dinheiro. Cada segundo a mais de espera derruba a chance de a pessoa chegar ao formulário ou ao botão do WhatsApp.
Os quatro passos para imagens leves
1. Escolha o formato certo
Formato é a extensão do arquivo — aquele final depois do ponto. Cada um serve para uma coisa, e usar o errado desperdiça peso à toa. Na prática, você só precisa conhecer quatro:
| Formato | Use para | Evite quando |
|---|---|---|
| WebP | Fotos em geral: é a melhor escolha hoje, com o menor peso | Praticamente nunca — todos os navegadores atuais aceitam |
| JPG | Fotos, quando o WebP não for possível | Imagens que precisam de fundo transparente |
| PNG | Só quando precisa de fundo transparente ou texto muito nítido | Fotos comuns: fica de 3 a 5 vezes mais pesado que o WebP |
| SVG | Logotipo, ícones e desenhos simples | Fotografias — ele não foi feito para isso |
A troca mais valiosa é sair do PNG nas fotos. É muito comum alguém salvar uma foto de produto em PNG achando que "tem mais qualidade" e colocar um arquivo de 6 MB no ar quando o mesmo resultado visual caberia em 150 KB.
2. Ajuste o tamanho em pixels
Aqui está o erro mais frequente de todos. A foto do celular tem 4000 pixels de largura. O espaço onde ela aparece no seu site tem 800. O navegador é obrigado a baixar os 4000 e depois encolher tudo na hora de mostrar — ou seja, o visitante pagou por uma imagem cinco vezes maior do que vai enxergar.
Antes de subir qualquer foto, redimensione. Uma regra prática que funciona bem:
- Banner que ocupa a tela inteira: até 1920 pixels de largura.
- Foto dentro de um texto ou de um card: entre 800 e 1200 pixels.
- Miniatura, foto de equipe, ícone de serviço: entre 400 e 600 pixels.
- Logotipo: use SVG e esqueça o problema — ele se adapta a qualquer tamanho.
3. Comprima o arquivo
Comprimir é reduzir o peso jogando fora informação que o olho humano não percebe numa tela. Ferramentas gratuitas online fazem isso em segundos: você arrasta a imagem, ela devolve o arquivo menor, você baixa e usa.
A meta razoável é ficar abaixo de 200 KB por imagem, e abaixo de 400 KB nos banners grandes. Se o arquivo ainda estiver na casa dos megabytes depois de comprimir, provavelmente o passo 2 foi pulado — comprimir uma foto de 4000 pixels continua entregando uma foto de 4000 pixels.
4. Carregue sob demanda (lazy load)
Lazy load, ou carregamento preguiçoso, é uma instrução que diz ao navegador: só baixe esta imagem quando o visitante rolar até perto dela. As fotos do rodapé deixam de atrapalhar a abertura do topo da página. Em sites feitos com WordPress isso costuma já vir ligado; em sites feitos à mão, é uma linha a mais no código de cada imagem.
Um detalhe que rende SEO de graça: nome e descrição
Otimizar imagem não é só encolher arquivo. Existem dois campos que não pesam nada e trabalham a favor do seu site no Google, e a maioria das pessoas simplesmente ignora.
O primeiro é o nome do arquivo. Uma foto chamada IMG_20240817_113045.jpg não diz nada a ninguém. A mesma foto salva como pizzaria-forno-a-lenha-guarapari.jpg conta ao buscador o que está ali. Use palavras separadas por hífen, tudo em minúsculas e sem acentos.
O segundo é o texto alternativo, o famoso alt. É uma frase curta que descreve a imagem para quem não pode vê-la: pessoas que usam leitor de tela e os robôs do Google. Descreva o que aparece de forma natural — "equipe da loja atendendo um cliente no balcão" — em vez de empilhar palavras-chave. Feito assim, suas fotos passam a aparecer também na busca por imagens, que traz visitas que a maioria dos concorrentes nem disputa. Se quiser se aprofundar na parte de palavras, vale rever o que é SEO.
Como descobrir se as suas imagens estão pesando
Você não precisa adivinhar. Duas checagens rápidas resolvem:
- Teste o PageSpeed Insights. Digite o endereço do seu site na ferramenta gratuita do Google e olhe o resultado da aba de celular. Se aparecerem recomendações sobre "dimensionar imagens adequadamente" ou "veicular imagens em formatos modernos", achamos o culpado.
- Abra o site no 4G, longe do wi-fi. É o teste mais honesto que existe. Conte os segundos até a primeira imagem aparecer completa.
Esses mesmos indicadores fazem parte das métricas que o Google usa para avaliar a experiência de quem visita — o assunto está detalhado no nosso artigo sobre o que são Core Web Vitals.
Erros comuns que anulam o trabalho
- Otimizar só a página inicial. As páginas internas de serviços e produtos costumam ser as mais visitadas por quem veio do Google.
- Trocar a imagem otimizada meses depois. Quem atualiza o site sem lembrar do processo sobe uma foto crua e refaz o problema.
- Confiar na hospedagem para resolver. Um servidor bom entrega o arquivo mais rápido, mas não diminui o arquivo.
- Esquecer o texto alternativo. O atributo alt descreve a imagem para o Google e para leitores de tela. Não muda o peso, mas muda o quanto a foto trabalha a seu favor.
- Usar imagens genéricas de banco. Leves ou não, elas não vendem. Sobre isso vale conferir como escolher as fotos certas para o seu site.
Conclusão
Otimizar as imagens do site é um daqueles ajustes que quase ninguém vê, mas todo mundo sente. Escolha o formato certo, redimensione para o tamanho real de exibição, comprima até chegar perto dos 200 KB e ligue o lazy load. São quatro passos, valem para qualquer site e não exigem trocar de plataforma, de hospedagem nem refazer nada.
Se você prefere não mexer nisso — ou já tentou e o site continua lento no celular —, a TH Designer resolve isso como parte do trabalho, sem cobrar à parte por "otimização". Fazemos sites para negócios de Guarapari e região já com as imagens tratadas, o lazy load ligado e o resultado medido no PageSpeed antes de entregar. Dê uma olhada em nossos serviços e mande uma mensagem com o endereço do seu site: a gente testa e diz, sem compromisso, o que está pesando de verdade.
Comentários
Entre com o Google para deixar seu comentário.