Descrever as imagens e deixá-las mais leves para que apoiem o texto
Descrição
Este critério verifica as imagens da página. Entre as imagens de conteúdo (visíveis, com pelo menos 50 × 50 px, não marcadas como decorativas), pelo menos 90% devem ter um texto alternativo e 90% devem declarar as dimensões. Pelo menos 80% das imagens rasterizadas devem estar em WebP ou AVIF (os SVG não contam), e nenhuma imagem deve passar de 500 KB.
O iPand verifica a presença do texto alternativo, não se ele está correto, e não avalia a qualidade visual das imagens.
Por que isso importa para as IAs
Um rastreador que lê o texto da página só enxerga a imagem pelo texto alternativo. O Google usa esse texto, junto com a visão computacional e o conteúdo da página, para entender o assunto de uma imagem, e recomenda apoiar o texto com imagens de qualidade. As imagens também costumam ser o que mais pesa em uma página.
- Um texto alternativo preciso diz o que a imagem mostra: um produto, um lugar, uma pessoa.
- WebP e AVIF comprimem muito melhor que JPEG e PNG: a página carrega mais rápido.
- Dimensões declaradas reservam o espaço da imagem e evitam que a página se desloque durante o carregamento.
Como corrigir
- 1 Descreva cada imagem no texto alternativo Preencha o atributo alt de cada imagem útil com uma frase curta: “Bicicleta cargueira elétrica azul em frente à oficina” em vez de “imagem1” ou de uma lista de palavras-chave. Para uma imagem puramente decorativa, deixe o alt vazio (alt=""): ela não é contada.
- 2 Converta as imagens para WebP ou AVIF Exporte fotos e ilustrações em WebP ou AVIF, pela sua ferramenta de edição ou por uma extensão do seu CMS. Para manter um JPEG como alternativa, ofereça os dois formatos em um elemento <picture>: o navegador baixa apenas o primeiro formato que consegue ler.
- 3 Deixe as imagens pesadas mais leves Nenhuma imagem deve passar de 500 KB. Redimensione cada imagem para o tamanho em que ela é exibida, comprima-a e ofereça vários tamanhos com srcset e sizes para que os celulares recebam uma versão adequada.
- 4 Declare a largura e a altura Adicione os atributos width e height a cada tag <img>, nas proporções da imagem, ou reserve o espaço dela com a propriedade CSS aspect-ratio. Assim, o navegador mantém o lugar da imagem durante o carregamento, mesmo que a folha de estilo ajuste o tamanho depois.
Pontos-chave
Imagens descritas, leves e com dimensões declaradas ajudam os motores de busca a entender a página e a deixam mais rápida. O iPand verifica esses quatro pontos a cada análise; revisar se os seus textos alternativos estão corretos continua sendo tarefa sua.
