Ferramentas
Como reduzir o tamanho das imagens para um site mais rápido
As imagens pesadas são a principal razão pela qual os sites parecem lentos. Uma página típica de produto ou de marketing envia mais de dois megabytes de peso, e cerca de metade são imagens servidas na resolução completa, com qualidade total e no formato errado. Os ficheiros maiores empurram o seu Largest Contentful Paint para lá da meta dos 2,5 segundos, incham a taxa de rejeição e corroem silenciosamente as conversões: cada 100 KB a mais numa imagem hero custa envolvimento mensurável, tanto em mobile como em desktop. Se este trimestre só vai fazer uma passagem de desempenho, faça-a sobre as imagens.
Porque é que as imagens pesadas matam a sua página
Os Core Web Vitals da Google tratam a maior imagem da página como o elemento de Largest Contentful Paint. O limiar «Bom» atual é menos de 2,5 segundos no percentil 75 de utilizadores reais. O HTTP Archive reporta que a mediana de uma página desktop pesa agora cerca de 2,5 MBe a mediana mobile cerca de 2,2 MB, com as imagens a serem responsáveis, de forma consistente, por cerca de 50% desse peso. Uma única foto hero de 1,2 MB pode portanto decidir se a sua pontuação LCP é verde, amarela ou vermelha — antes de qualquer linha do seu JavaScript cuidadosamente escrito ser executada.
O caso de negócio é igualmente claro. As próprias pesquisas da Google associam uma melhoria de um segundo no tempo de carregamento mobile a taxas de conversão mais altas no retalho, nas viagens e em sites de geração de leads. Em ligações 4G instáveis, uma imagem de 600 KB e outra de 60 KB sentem-se como dois produtos diferentes: a primeira faz scroll aos solavancos, a segunda pinta-se instantaneamente. Reduzir o tamanho das imagens é o ganho de desempenho mais barato que existe — não há reescrita do lado do servidor, não há mudança de arquitetura, apenas bytes que não precisava de enviar desde o início.
A pipeline de redução em 4 passos
Não precisa de um serviço de otimização de imagens nem de uma pipeline de build. Os mesmos quatro passos que correm dentro de qualquer CDN de imagens moderno podem ser feitos no seu navegador, uma imagem de cada vez, em menos de um minuto. Execute-os por esta ordem, porque cada passo depende do anterior.
| Passo | Ação | Poupança típica |
|---|---|---|
| 1. Redimensionar para as dimensões de visualização | Reduza a bitmap para o maior tamanho que o layout de facto renderiza. Uma foto de 4000×3000 servida num espaço de 1200×600 desperdiça mais de 90% dos seus píxeis. | 60–80% |
| 2. Definir qualidade a ~75–80 | Baixe o cursor de qualidade do codificador para cerca de 75–80 em fotos. A diferença visual é impercetível à distância de visão normal e a poupança em bytes é enorme. | 30–50% |
| 3. Converter para WebP | Recodifique a bitmap redimensionada e re-quantizada como WebP. Mesmas dimensões, mesma qualidade, tipicamente um terço dos bytes do JPG ou PNG original. | 25–35% |
| 4. Remover metadados | Remova EXIF, IPTC, XMP, perfis de cor e comentários de autor. Uma foto de telemóvel pode trazer 50–100 KB de metadados que o navegador nunca renderiza. | 2–10% |
Empilhados, os quatro passos reduzem rotineiramente um original de 1,2 MB para menos de 150 KB sem perda de qualidade visível nos tamanhos típicos de visualização web.
Orientação por formato
Diferentes tarefas visuais pedem formatos diferentes. Escolha pelo conteúdo, não por reflexo.
- Fotografias. JPG com qualidade 75–80 ou WebP a uma qualidade equivalente. O AVIF vai mais longe mas custa tempo de codificação e não é suportado por um pequeno número de dispositivos antigos — recue para WebP se a compatibilidade importa.
- Logótipos, ícones e gráficos de UI.Mantenha a transparência com PNG ou, melhor ainda, WebP com canal alfa. O SVG é ainda mais pequeno para line art e escala sem artefactos raster — use-o quando a fonte é vetorial.
- Ilustrações e flat art. WebP ou PNG. O WebP ganha em bytes, o PNG ganha em suporte universal. Se precisa de ambos, gere um WebP com fallback PNG via o elemento picture.
Precisa de mudar uma pasta de assets legados de um formato para outro? Oconversor de imagenstrata da recodificação em lote para JPG, PNG, WebP e AVIF numa só passagem, com pré-visualizações lado a lado para ver o compromisso de qualidade antes de se comprometer.
Definir um orçamento
Otimizar sem um orçamento só produz imagens ligeiramente mais pequenas. Dê a cada categoria de imagens na página um teto rígido em bytes, aplique-o em CI e veja o peso médio da página desmoronar. Um orçamento de partida pragmático para um site orientado para conteúdo:
- Imagem hero: abaixo de 100 KB. É o seu elemento LCP. Qualquer coisa mais pesada paga-a em Core Web Vitals.
- Miniaturas de galeria: abaixo de 50 KB cada. Multiplique pelo número de miniaturas above-the-fold: é um orçamento que pode defender.
- Imagem Open Graph: abaixo de 200 KB.Crawlers e pré-visualizações sociais vão buscá-la sem parar; um teto apertado mantém os desfurls de ligações rápidos.
- Total de imagens above-the-fold: abaixo de 300 KB. Se ultrapassar, nenhum code-splitting resgata a pontuação LCP.
Execute a pipeline de quatro passos, cole os resultados no orçamento acima e envie. Páginas mais rápidas, melhores Core Web Vitals, visitantes mais contentes — e cada byte que corta é um byte que não tem de servir.