Por que as imagens dominam o peso da página
Um documento HTML típico com CSS e JavaScript pode transferir 200–500 KB. Uma única fotografia sem otimização pode ser de 5–15 MB. Numa conexão móvel com média de 10–20 Mbps, uma imagem de 10 MB leva 4–8 segundos para baixar. A maioria dos visitantes não vai esperar.
As imagens também afetam os Core Web Vitals — as métricas do Google para a experiência de página que influenciam o posicionamento. O Largest Contentful Paint (LCP) mede quanto tempo o maior elemento visível leva para renderizar. Se esse elemento é uma imagem hero, o tempo de download dela determina diretamente sua pontuação de LCP. Um LCP lento prejudica tanto a experiência do usuário quanto o posicionamento.
Os suspeitos de sempre, e a solução para cada um
O carregamento lento de imagens quase sempre se reduz a um destes. Cada um tem uma solução rápida e um benefício significativo:
| Causa | Solução | Economia típica |
|---|---|---|
| Formato errado (foto PNG) | Converter para WebP ou JPG | 80% ou mais |
| Envio em resolução completa | Redimensionar para cerca de 2× a largura de exibição | 70–80% |
| Compressão fraca ou pulada | Exportar em qualidade 75–85 | 3–5× vs qualidade 95 |
| Sem carregamento tardio | Adicionar loading=lazy abaixo da dobra | Menos dados no primeiro carregamento |
| HEIC servido cru | Converter primeiro para WebP ou JPG | Evita imagens quebradas |
O formato errado para o tipo de conteúdo
Usar PNG para fotografias é um dos erros de imagem mais comuns na web. O PNG é sem perdas e preserva cada pixel, o que importa para logos e capturas mas não para fotos. Uma fotografia salva como PNG pode ser de 15–25 MB. A mesma foto como JPEG em alta qualidade é de 2–5 MB. Como WebP pode estar abaixo de 2 MB com qualidade visível idêntica.
O inverso também é um erro: usar JPEG para capturas, diagramas ou imagens com texto. O JPEG introduz artefatos visíveis em bordas duras e áreas de cor plana, exigindo ajustes de qualidade altos que produzem arquivos grandes. O PNG ou o WebP lida com esse conteúdo menor e mais limpo.
Enviar imagens na resolução completa da câmera
Uma foto de um smartphone moderno tem 12–50 megapixels e 3000–8000 pixels de largura. A maioria das páginas web exibe imagens de conteúdo a 600–1600 pixels de largura. Quando você envia o arquivo da câmera em resolução completa para o seu site, o navegador baixa todos os 8000 pixels e os escala para 800 pixels para exibição. Você está transferindo 10× mais dados que o necessário.
Redimensionar a imagem para a maior largura em que ela será exibida — cerca do dobro da largura de exibição CSS para telas de alta densidade — antes de enviar é muitas vezes a maior redução de tamanho disponível sozinha. Uma imagem de 4000 pixels redimensionada para 1600 pixels costuma ser 70–80% menor antes de qualquer compressão de qualidade ser aplicada.
Pular a compressão ou usar o ajuste de qualidade errado
Muitos sistemas de gestão de conteúdo aceitam e armazenam as imagens enviadas sem compressão. WordPress, Squarespace, Shopify e plataformas similares podem aplicar alguma compressão por padrão, mas os ajustes variam e costumam ser conservadores. O original enviado pode ser muito maior que o necessário.
Para JPEG e WebP, um ajuste de qualidade de 75–85 é apropriado para a maioria das fotografias exibidas numa página web. Abaixo de 75, os artefatos de compressão ficam visíveis. Acima de 85, o tamanho de arquivo aumenta significativamente com melhoria visual decrescente. Muitos desenvolvedores usam por padrão qualidade 95 ou 100, o que produz arquivos 3–5× maiores que qualidade 80 sem diferença visível em tamanhos de visualização normais.
Sem carregamento tardio nas imagens abaixo da dobra
Por padrão, os navegadores tentam carregar todas as imagens de uma página durante a renderização inicial, incluindo imagens que estão muito abaixo da área visível (a dobra). Para uma página de artigo longa com 10 imagens, o navegador tenta baixar todas as 10 simultaneamente mesmo que o leitor talvez nunca role para ver a maioria.
O atributo loading="lazy" numa tag <img> instrui o navegador a adiar o carregamento da imagem até ela estar prestes a entrar no viewport, o que reduz significativamente os dados transferidos no carregamento inicial da página. Aplique-o a todas as imagens que não são visíveis no primeiro viewport. Não o aplique à imagem hero nem a nenhuma imagem acima da dobra — essas precisam carregar o mais rápido possível para uma boa pontuação de LCP.
Para a imagem hero especificamente, adicione fetchpriority="high" para que o navegador a busque antes dos scripts e outras imagens. Use-o em apenas uma imagem por página — o elemento LCP — e deixe o resto no valor padrão.
<img src="photo.webp" loading="lazy" alt="description" /><img src="hero.webp" fetchpriority="high" width="1200" height="675" alt="hero" />
Atributos width e height ausentes
Quando um navegador começa a renderizar uma página, ele ainda não conhece as dimensões das imagens que não baixou. Sem atributos width e height explícitos no HTML, o navegador não consegue reservar o espaço correto, e o layout da página se desloca à medida que as imagens carregam — um salto visual incômodo conhecido como Cumulative Layout Shift (CLS). Adicionar dimensões explícitas evita o deslocamento de layout e permite ao navegador começar o layout sem esperar o download da imagem:
<img src="photo.webp" width="800" height="533" alt="description" />
HEIC ou formatos incomuns enviados diretamente
Os iPhones fotografam em HEIC por padrão. Se arquivos HEIC são enviados a um site e servidos sem conversão, eles não serão exibidos no Chrome, Firefox e Edge. Visitantes no Windows e Android veem um ícone de imagem quebrada. Converta sempre o HEIC para JPEG ou WebP antes de publicar.
Uma checklist prática de otimização
O PhotoTools cuida dos passos de conversão de formato, redimensionamento e compressão no seu navegador sem enviar nada a um servidor. Processe as imagens antes de enviar para manter suas páginas rápidas, e siga esta checklist:
- Use WebP para fotografias e a maioria das imagens web. Use PNG para gráficos com texto ou transparência.
- Redimensione as imagens para a maior largura em que realmente serão exibidas, cerca de 2× a largura de exibição CSS para telas retina.
- Comprima JPEG e WebP em qualidade 75–85 para imagens web padrão.
- Adicione loading="lazy" a todas as imagens abaixo da dobra.
- Adicione atributos width e height explícitos a todas as imagens.
- Converta os arquivos HEIC para JPEG ou WebP antes de enviar.
- Verifique os tamanhos de arquivo finais: uma imagem web exibida a 800 pixels CSS de largura deveria estar abaixo de 200 KB na maioria dos casos.