Imagens

O teste de imagens analisa todas as imagens em um site para verificar se elas estão com links apropriados, de acordo com as boas práticas mais recentes. Também verificamos se as imagens estão em um formato Web apropriado.

Por que testamos isso?

Frequentemente desenvolvedores de sites incluem imagens em suas páginas de forma errada, criando problemas de acessibilidade para os visitantes e aumentando o tempo de carregamento da página.

É importante incluir nos atributos de cada imagem a largura e altura. As imagens funcionarão sem o atributo de largura e altura, mas a melhor prática é incluí-los. Sem estes atributos, o navegador do visitante não saberá quanto espaço deve ser reservado a imagem até que o download da mesma seja concluído. Isto significa que após o carregamento da imagem a página tem de ser re-processada pelo navegador do visitante novamente, o que aumenta o tempo de carregamento da página que podem fazer os elementos na página 'saltar', especialmente se o usuário tiver uma conexão de internet lenta. Também é importante não esticar a imagem usando estes atributos, eles devem conter as dimensões idênticas as da imagem real, do contrário, isso também aumenta de carregamento da página.

Como testamos isso?

Baixamos todas as imagens de um site e definimos a pontuação baixo através de vários critérios:

• Is it a non web-friendly format? Only webp, avif, jpeg, png, svg and gif images are allowed.
• Estão faltando os atributos de largura e altura? Isto é quando você omiti os atributos de largura e altura de uma imagem.
• Está sendo esticada no navegador? Isso acontece quando a imagem de origem é um tamanho diferente para a largura e altura dos que foram especificados no HTML. Se você quiser esticar uma imagem no navegador deve usar o CSS como a tag que define a imagem de origem, assim ela não deve ser exibida.

O que posso fazer sobre isso?

Certifique-se de que todas as imagens usadas estão em um formato web amigável, como jpeg, gif ou png. Também devem conter atributos de largura e altura, que devem ser as dimensões reais da imagem de origem. Se precisar esticar a imagem no navegador, use o CSS. A tag de imagem no HTML define a imagem da origem, e o CSS define como deve ser exibida.