Objectivo do tutorial
As imagens mal integradas afetam desempenho e estabilidade.
Não basta comprimir o ficheiro. Também importa como se declara em HTML.
Este tutorial explica como revisar dimensões, carga diferida e atributos básicos de imagem.
O que vê AISEO em imagens HTML
Dimensões
Verifique se a imagem reserva espaço com largura e alto definidos.
Carregar
Verifique se as imagens não críticas usam carga diferida.
Responsive
Avalia srcset e sizes quando a imagem precisa se adaptar a vários tamanhos.
Estabilidade
Evite saltos visuais quando a página termina de carregar.
Como interpretar o resultado
Pass
As imagens principais estão bem declaradas e não quebram a estabilidade visual.
Warning
A página funciona, mas algumas imagens podem melhorar carga ou atributos.
Fail
Há imagens sem dimensões, sem reserva de espaço ou integradas de forma que danificam a estabilidade visual e a carga percebida.
Exemplo técnico orientativo
Uma imagem integrada de forma estável pode ser declarada assim:
<img src="/images/informe-aiseo.jpg" width=" 1200" height=" 675" loading=" lazy" alt="Vista anterior de um relatório técnico AISEO" >As imagens críticas do hero podem exigir carga prioritária, não lazy loading automático.
Erros frequentes
- Inserir imagens sem adaptar a sua declaração HTML ao tamanho real de uso.
- Não declarar width e height em imagens relevantes.
- Aplicar lazy loading à imagem principal visível ao entrar.
- Não usar srcset ou sizes quando a imagem precisa de variantes responsive.
Como corrigir
- Declara dimensões coerentes com o espaço real em que se mostram.
- Declara width e height para evitar saltos de layout.
- Use lazy loading em imagens secundárias ou fora de ecrã.
- Verifique hero, banners, listados, cards e fichas de produto.