O que é uma imagem alternativa?

Uma imagem alternativa é uma substituta exibida quando o conteúdo visual preferido não pode ser carregado ou renderizado. Ela pode substituir uma imagem ausente, uma prévia de vídeo que falhou, um formato não compatível ou um recurso remoto indisponível.

Como funcionam as imagens alternativas

Uma alternativa faz parte do projeto de tratamento de falhas e compatibilidade de uma interface, em vez de ser apenas outra URL de origem. A seleção pode ocorrer de forma declarativa quando o navegador avalia os formatos candidatos ou de forma imperativa após a falha de uma requisição ou decodificação escolhida. A substituta deve manter a função semântica e a geometria pretendidas, mesmo quando não consegue reproduzir o visual ausente. Ela pertence à camada de renderização, enquanto o monitoramento e a correção dos recursos tratam o problema de entrega subjacente.

Informações essenciais

  1. O elemento img final em um picture fornece uma alternativa de seleção quando as regras de source ou os formatos não correspondem. Uma falha de rede para o candidato selecionado não faz com que todos os candidatos anteriores sejam testados de forma confiável.
  2. Um manipulador de erros que substitui src deve evitar atribuir repetidamente a mesma URL que falha. Remover o manipulador ou registrar as origens já tentadas evita uma sequência infinita de eventos de erro.
  3. Largura e altura explícitas ou uma proporção estável reservam espaço no layout antes que qualquer uma das origens seja carregada. O texto alternativo deve descrever o significado da imagem, em vez de apenas informar que o carregamento falhou.

Quando as imagens alternativas são importantes

Desenvolvedores selecionam alternativas que preservam as dimensões do layout e comunicam claramente a indisponibilidade do conteúdo. A ausência de dimensões intrínsecas ainda pode causar deslocamentos no layout, mesmo quando uma substituta é carregada.

Transforme conhecimento sobre mídia em um pipeline funcional

Conecte uploads, processamento, IA, armazenamento e entrega por meio de uma única API declarativa, com o stack de codificação, o ajuste de escala e as constantes mudanças de formatos gerenciados para você.

Experimente a Transloadit gratuitamente