Otimização de imagem 101: arquivos menores, páginas mais nítidas
Abra a guia de rede do seu navegador em praticamente qualquer site e você verá a mesma história: as imagens representam a maior parte do peso da página. Eles também são a vitória mais fácil em desempenho na web. Você não precisa refatorar sua base de código — você só precisa parar de exibir imagens maiores do que o necessário.
A velocidade da página não é vaidade. É um fator de classificação confirmado do Google por meio de Core Web Vitals, e a maior imagem na tela geralmente é o que determina sua pontuação de Largest Contentful Paint (LCP). Veja como corrigir imagens corretamente, em ordem.
Etapa 1: redimensione antes de fazer upload
O erro mais comum é exibir uma foto de 4.000 px diretamente da câmera do telefone em um slot de 800 px. O navegador baixa todos os pixels desperdiçados e depois os reduz. Redimensione a imagem para o maior tamanho que ela realmente exibirá primeiro — use nosso redimensionador de imagens gratuito. Essa etapa geralmente reduz o tamanho do arquivo em 80% ou mais.
Etapa 2: compactar sem perda visível
Depois de redimensionar, comprima. A maioria das fotos pode diminuir de 40 a 70% de tamanho sem perda perceptível de qualidade, porque JPEG e WebP descartam detalhes que os olhos mal registram. Nosso compressor de imagem permite que você ajuste a relação entre qualidade e tamanho e visualize o resultado antes de fazer o download.
Etapa 3: use formatos modernos
O WebP oferece a mesma qualidade visual de JPEG e PNG em uma fração do tamanho e é compatível com todos os navegadores modernos. A documentação WebP do próprio Google relata uma economia de 25 a 35% em relação a JPEGs comparáveis. Converta seus arquivos com JPG para WebP ou PNG para WebP. Se você precisar voltar, WebP to JPG também cuida disso.
Etapa 4: Escolha o formato certo para o trabalho
- Fotografias: WebP ou JPEG — ótima compactação para imagens complexas.
- Logotipos, ícones, arte de linha: SVG ou PNG — bordas nítidas, transparência, pequenas para gráficos simples.
- Qualquer coisa com texto: evite JPEG, que desfoca bordas nítidas; use PNG ou WebP.
Etapa 5: ajude o navegador a carregar de maneira inteligente
Adicione atributos width e height para que o navegador reserve espaço e evite mudanças de layout (a métrica CLS). Use loading="lazy" em imagens abaixo da dobra para que elas carreguem apenas quando necessário e deixe sua imagem acima da dobra mais importante carregar rapidamente. As práticas recomendadas para imagens também enfatizam o texto alt descritivo, bom para acessibilidade e classificação nas Imagens do Google.
Etapa 6: veicular tamanhos responsivos
Um telefone e um monitor de 27 polegadas não deveriam baixar a mesma imagem. O atributo srcset permite que o navegador escolha o tamanho mais apropriado para cada tela, para que os usuários móveis não sejam punidos com arquivos do tamanho de desktop. Mesmo um simples srcset de dois ou três tamanhos pode reduzir drasticamente os dados nos dispositivos onde são mais importantes. Se o seu CMS ou estrutura oferece imagens responsivas, ative o recurso – é uma das opções de maior impacto disponíveis.
Etapa 7: Avalie a vitória
Não adivinhe — verifique. Execute sua página pelo verificador de velocidade da página antes e depois para ver a melhoria real no tempo de carregamento e nos Core Web Vitals. Preste atenção especial ao Largest Contentful Paint (LCP): se sua imagem principal for o gargalo, você a verá cair imediatamente.
Um rápido fluxo de trabalho antes e depois
- Redimensione a imagem para seu tamanho real de exibição.
- Comprima-o e observe a qualidade.
- Converter para WebP.
- Adicione largura, altura, alt e carregamento lento.
- Teste novamente a página e confirme a melhoria do LCP.
Execute esse loop nas três ou quatro imagens mais pesadas e você capturará a grande maioria dos ganhos de velocidade disponíveis.
Não se esqueça do SEO de imagem
As imagens otimizadas não apenas carregam mais rápido, elas também podem gerar tráfego próprio. Nomes de arquivo descritivos (“blue-running-shoes.webp” é melhor do que “IMG_4821.webp”) e texto alternativo significativo ajudam você a classificar no Imagens do Google e tornam seu site acessível para usuários de leitores de tela. Escolher o formato certo também é importante aqui; nosso guia para JPG vs PNG vs WebP vs SVG detalha exatamente quando usar cada um.
Resultado
Redimensione, compacte, converta para WebP, defina dimensões, carregue lentamente e forneça tamanhos responsivos. Faça essas coisas e a maioria dos sites verá o maior ganho de desempenho com o menor esforço: páginas mais rápidas, visitantes mais satisfeitos, melhor acessibilidade e um aumento mensurável nas classificações.
