Por que a otimização de imagens é importante
Imagens grandes ou carregadas tarde podem atrasar o conteúdo principal e piorar LCP. Comece pelos ficheiros realmente pedidos e meça o seu contributo. Reduzir a transferência pode melhorar o carregamento, mas não garante posições na pesquisa nem um aumento específico das conversões.
Escolhendo um formato de imagem
Compare JPEG, PNG, WebP e AVIF com imagens representativas e qualidade aceitável. O menor tamanho depende da imagem, do codificador e das definições. Verifique os navegadores suportados e ofereça um formato alternativo quando necessário. SVG é adequado para gráficos vetoriais apropriados.
| Formato | Vantagens | Limites | Usos típicos |
|---|---|---|---|
| JPEG | Frequentemente eficiente para fotografias | Compressão com perdas, sem transparência alfa | Fotografias |
| PNG | Codificação sem perdas e transparência | Fotografias podem ocupar muito espaço | Gráficos com detalhes sem perdas |
| WebP | Com ou sem perdas, transparência | Verificar navegadores antigos e tamanho final | Fotografias, gráficos e animação |
| AVIF | Pode comprimir bem com qualidade útil | Verificar custo de codificação e compatibilidade | Fotografias e gráficos |
| SVG | Gráficos vetoriais escaláveis | Não substitui fotografias rasterizadas | Ícones, logótipos e ilustrações |
Imagens responsivas: srcset e sizes
Liste as variantes em srcset e descreva a largura no esquema da página com sizes. O navegador escolhe segundo estes dados e as condições do dispositivo. As larguras abaixo são exemplos: adapte-as ao CSS real. O exemplo destina-se a uma imagem fora da vista inicial; substitua o texto alternativo ilustrativo e use as proporções reais.
<img
src="example-400w.jpg"
srcset="example-400w.jpg 400w, example-800w.jpg 800w, example-1200w.jpg 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
alt="Lago de montanha"
width="1200"
height="800"
loading="lazy"
/>
Carregamento diferido de imagens fora do ecrã
loading="lazy" permite ao navegador adiar uma imagem até ela se aproximar da área visível. A transferência pode começar antes de a imagem aparecer; o momento depende do navegador e das condições.
- Adiar imagens não críticas pode reduzir a transferência inicial e os pedidos concorrentes.
- Não adie a imagem principal visível no início, sobretudo a provável imagem LCP: isso pode piorar LCP.
- Reserve espaço com dimensões ou proporções corretas para reduzir deslocações do esquema.
Exemplo de imagem abaixo da vista inicial. As dimensões são ilustrativas: utilize as do ficheiro real.
<img src="example.webp" alt="Lago de montanha" width="1200" height="800" loading="lazy" />
Ferramentas e serviços para otimização
| Ferramenta | Descrição | Ligação |
|---|---|---|
| TinyPNG | Serviço online para compactação de PNGs e JPEGs | TinyPNG |
| ImageOptim | Otimização de imagem no macOS | ImageOptim |
| Squoosh | Uma ferramenta poderosa do Google | Squoosh |
Dicas práticas e exemplos
- Compare formatos com qualidade aceitável e acrescente uma alternativa quando necessário.
- Ajuste
srcsetesizesao esquema real e aos dispositivos. - Use
loading="lazy"nas imagens fora do ecrã, sem atrasar a provável imagem LCP. O mecanismo nativo normalmente dispensa Intersection Observer; lógica própria deve resolver uma necessidade concreta. - Automatize o redimensionamento e a compressão na compilação ou entrega e inspecione o resultado.
- Compare PageSpeed Insights e os Web Vitals relevantes, incluindo LCP e CLS, antes e depois em condições comparáveis.
Verifique o resultado publicado
Verifique o ficheiro escolhido, os bytes transferidos, a qualidade e a prioridade de carregamento. Repita em esquemas móveis e de computador representativos. Confirme que a imagem principal aparece depressa e que a disposição se mantém estável.
Reduza os bytes desnecessários preservando o conteúdo e a qualidade de que o leitor precisa.
Use o nosso teste de velocidade para investigar a página e verifique as alterações às imagens no navegador. Separe melhorias medidas de suposições não verificadas.
