Dimensões explícitas das imagens

A Silktide verifica se as imagens da sua página declaram as suas dimensões, para que o navegador possa reservar a quantidade certa de espaço para cada uma antes de a transferir. As imagens sem dimensões declaradas fazem com que a página salte à medida que são carregadas.

<!-- Problema: sem dimensões, o navegador não reserva espaço -->
<img src="hero.jpg" alt="Coleção de primavera">

<!-- Corrigido: o navegador reserva imediatamente um espaço de 1200x600 -->
<img src="hero.jpg" alt="Coleção de primavera" width="1200" height="600">

Porque é importante

Até um ficheiro de imagem chegar, o navegador não tem como saber qual será o tamanho da imagem, a menos que a página o indique. Sem essa informação, apresenta a página sem espaço reservado e, depois, empurra tudo para baixo quando cada imagem é carregada — por isso, o texto salta a meio da frase e os visitantes tocam no elemento errado quando os alvos mudam no último momento.

Este salto é medido como uma mudança de layout, uma componente das da Google, que também contribuem para a classificação nos resultados de pesquisa. As imagens sem dimensões são a sua causa mais comum.

Como corrigir

Adicione os atributos width e height a todas as imagens e vídeos, correspondendo às proporções reais do ficheiro. O navegador utiliza-os para reservar espaço com a proporção correta, mesmo quando as dimensionam a imagem de forma responsiva.
Para imagens responsivas, mantenha os atributos e deixe que as CSS, como max-width: 100%; height: auto;, façam o dimensionamento — o espaço reservado é dimensionado em conjunto.
Se não puder adicionar atributos, reserve espaço nas CSS com a propriedade aspect-ratio na imagem ou no respetivo contentor.
Verifique o seu : a maioria insere automaticamente as dimensões quando as imagens são adicionadas através do editor, pelo que a ausência de dimensões é frequentemente causada por escrito manualmente, modelos ou conteúdo incorporado.

Como a Silktide testa isto

Carrega a página num navegador real, utilizando o tipo de dispositivo, a velocidade de ligação e o local de teste configurados para os seus testes de velocidade.
Encontra todas as imagens apresentadas sem dimensões explícitas — sem atributos width/height utilizáveis e sem CSS que fixe as suas dimensões.
Comunica cada imagem sem dimensões, incluindo a respetiva localização na página.

Resolução de problemas

A página parece estar correta quando a carrego

Com imagens em cache ou uma ligação rápida, as imagens podem chegar tão depressa que nada salta visivelmente. Os visitantes em redes mais lentas veem a mesma página a ser montada peça a peça. O espaço reservado não tem qualquer custo quando a imagem é carregada rapidamente e evita o salto quando isso não acontece.

As dimensões fixas não vão prejudicar o meu design responsivo?

Não. Os navegadores modernos tratam os atributos width e height como a proporção da imagem, e não como dimensões fixas, pelo que as CSS continuam a poder dimensionar a imagem para se ajustar a qualquer ecrã. Os atributos e as CSS de funcionam em conjunto.