Introdução
Você administra um site e os usuários reclamam que demora uma eternidade para carregar no celular. Abre o PageSpeed Insights e descobre que as imagens são o principal culpado, ocupando 80 por cento do peso da página. Fotos de 4000 pixels e 5 MB cada travam qualquer conexão 4G. A solução é diminuir a resolução das imagens para melhorar a velocidade de navegação no celular, sem perder a qualidade que o usuário vê na telinha. Neste guia a gente explica como otimizar imagens para web mobile e acelerar seu site.
Por que isso acontece
As telas de celular têm em média 360 a 430 pixels de largura em CSS pixels, ou 1080 a 1440 pixels físicos. Servir uma imagem de 4000 pixels para uma tela de 1080 é desperdício puro: o navegador baixa 16 vezes mais dados do que precisa. Em conexão 4G, cada MB extra adiciona cerca de 1 segundo ao carregamento. Uma página de blog com 10 fotos de 5 MB cada carrega 50 MB, o que na prática significa 30 a 50 segundos de espera. O usuário desiste. O Google penaliza páginas lentas no ranking mobile-first, então o site perde tráfego. A solução é servir imagens nas dimensões reais que a tela exibe, normalmente entre 800 e 1200 pixels de largura para fotos de conteúdo, o que reduz cada arquivo para 80-150 KB.
3 soluções
Solução 1: Redimensionar imagens para web mobile. Passe todas as imagens do site pelo redimensionador do piczen, fixando 1200 pixels de largura e qualidade 75. Cada foto cai para uns 100 KB.
Solução 2: Comprimir com formato WebP. WebP pesa 30 por cento menos que JPG na mesma qualidade. Converta as imagens redimensionadas para WebP e sirva para navegadores modernos.
Solução 3: Usar imagens responsivas com srcset. Gere várias versões de cada imagem e sirva a dimensão certa para cada tela. Mais trabalho mas otimiza ao máximo.
Guia passo a passo
Reúna todas as imagens do site numa pasta. Abra o navegador e carregue a ferramenta para redimensionar imagens online. Arraste a pasta inteira para a página. Fixe a largura em 1200 pixels, que cobre a maioria das telas de celular em alta densidade. Marque manter proporção. Coloque o formato em JPG e a qualidade em 75 por cento. Clique em Redimensionar. Para 100 imagens demora uns 2 minutos. Baixe o zip e suba as imagens otimizadas no lugar das originais. Teste a página no PageSpeed Insights antes e depois: o tempo de carregamento deve cair de 30 para 3-5 segundos. Se quiser ir além, repita o processo convertendo para WebP com qualidade 80, que reduz mais 30 por cento do tamanho. Suba também as versões WebP e configure o servidor para servir WebP em navegadores modernos, com fallback para JPG.
Vantagens e desvantagens
Diminuir a resolução das imagens é a forma mais eficaz de melhorar a velocidade no celular, com impacto direto em retenção e SEO. O lado positivo é o ganho imediato: o mesmo site carrega em segundos em vez de minutos, e o Google recompensa no ranking. O incoveniente é que você precisa manter dois conjuntos de imagens, as originais em alta resolução para arquivo e as otimizadas para web. WebP comprime ainda mais mas exige configuração de fallback para navegadores antigos. Imagens responsivas com srcset otimizam ao máximo mas aumentam o trabalho de manutenção. Para a maioria dos sites, redimensionar para 1200 pixels e servir como JPG ou WebP é o equilíbrio ideal entre esforço e resultado.