Imagens Embutidas: Regras e Exemplos

Uma imagem embutida é uma única imagem colocada dentro do fluxo de leitura para esclarecer ou comprovar o ponto imediatamente ao seu redor. Não é uma galeria, painel promocional ou substituto para texto. Pergunte-se o que o leitor pode entender ou verificar após vê-la que as palavras próximas não fornecem com a mesma eficiência.

O entalhe chaveado impede que o conector entre no soquete na orientação errada.

O elemento renderizado acima pertence imediatamente após um parágrafo que diz ao leitor para verificar a orientação do conector. O recorte torna o entalhe visível, a legenda declara sua importância, e a instrução seguinte pode continuar sem pedir que o leitor decodifique uma cena grande e não relacionada.

Por que este elemento é importante

Os leitores alternam entre escaneamento e inspeção focada. Uma imagem bem posicionada transforma uma descrição abstrata em uma forma reconhecível, mostra evidências ou reduz o esforço necessário para imaginar um estado visual. O posicionamento implica que ela explica o texto próximo. Quando essa relação é fraca, os leitores a inspecionam, não encontram significado adicional e precisam recuperar seu lugar.

O princípio psicológico relevante é a sinalização. O recorte, a legenda e o texto ao redor direcionam a atenção para o detalhe que importa. Uma fotografia de uma máquina inteira é fraca quando a frase trata de uma trava de dois centímetros. Um recorte focado dessa trava dá ao leitor uma pergunta visual a responder. A imagem não precisa de setas ou texto embutido quando o enquadramento por si só pode tornar o assunto óbvio.

A extraibilidade por máquina é a capacidade do software de identificar uma unidade e preservar sua relação com o significado próximo. Um <figure> semântico contendo uma <img> e <figcaption> opcional fornece aos rastreadores, tecnologia assistiva, ferramentas de migração e sistemas de recuperação de IA uma unidade estável. O texto alternativo declara o que a imagem contribui; as dimensões descrevem sua geometria; uma legenda expõe interpretação ou procedência fora dos pixels.

As máquinas não devem precisar de visão computacional para recuperar uma instrução, número, aviso ou conclusão essenciais. Se uma imagem contém uma medida ou etiqueta decisiva, repita essa informação no texto próximo ou use uma tabela estruturada. As regras de escrita de elementos controlam a sintaxe de diretiva compartilhada, caminhos de origem, mapeamento de corpo e precedência. Esta página tem precedência para decisões sobre campos de imagem embutida, dimensionamento, carregamento, legenda e texto alternativo.

Quando usar

Use uma imagem embutida quando um elemento visual apoia diretamente uma ideia próxima e a imagem permanece útil na largura da coluna de leitura. Trabalhos apropriados incluem mostrar um detalhe físico, identificar um lugar ou objeto, apresentar um estado simples de antes e depois, fornecer prova visual de uma condição testada ou demonstrar a aparência de uma saída que não requer anotações.

Execute três testes antes de adicioná-la:

1. Teste de contribuição: Nomeie a nova informação, evidência ou reconhecimento que a imagem fornece.
2. Teste de contexto: Identifique o parágrafo exato que a imagem apoia. Se três seções pudessem reivindicá-la igualmente, seu propósito é provavelmente muito amplo.
3. Teste de remoção: Esconda a imagem. Se nada significativo for perdido, marque-a como decorativa apenas quando o design genuinamente precisar dela; caso contrário, remova-a.

Casos quase corretos causam a maioria dos usos inadequados. Use uma captura de tela anotada quando os leitores precisarem localizar controles ou combinar várias regiões numeradas. Use um diagrama quando o conteúdo for uma relação, sequência ou sistema, em vez de um objeto visível. Use uma galeria quando várias imagens pares precisarem ser navegadas. Use uma tabela de comparação quando as diferenças dependerem de critérios repetidos. Use uma imagebox quando uma imagem e uma explicação substancial formarem uma unidade independente de duas colunas.

Não insira uma fotografia genérica de banco de imagens apenas para quebrar o texto. Um aperto de mão não prova uma parceria; um laptop não explica software; uma lâmpada não torna uma ideia mais clara. Não publique texto como imagem para preservar tipografia. Não use uma captura de tela para prosa, um gráfico sem valores legíveis ou uma imagem cuja licença e procedência sejam desconhecidas.

Onde posicionar

Coloque a imagem imediatamente após o parágrafo que introduz o que o leitor deve inspecionar. A razão vem primeiro para que o leitor saiba para onde direcionar a atenção. Siga a figura com interpretação apenas quando a imagem for uma evidência cuja consequência não seja óbvia. Em um procedimento, posicione-a após a ação relevante e antes da verificação de sucesso; nunca separe uma frase de sua qualificação ou uma instrução de seu aviso.

Uma imagem embutida pode ficar abaixo de um H2 apenas quando o título e o primeiro parágrafo estabelecerem seu propósito. Mantenha a figura, legenda e crédito juntos em layouts responsivos e quebras de página.

Não a coloque dentro de um parágrafo, item de lista, célula de tabela, destaque, acordeão, cartão clicável ou outro elemento de mídia. Não coloque duas imagens embutidas consecutivamente: combine pares verdadeiros em uma galeria ou adicione a explicação que distingue suas funções. Ela não pode ficar ao lado de uma tabela densa, vídeo, gráfico ou chamada para ação onde ambos os objetos competem por atenção. Mantenha pelo menos um parágrafo significativo entre unidades de mídia separadas, a menos que formem uma comparação explicitamente definida.

Use largura de conteúdo normal por padrão e uma apresentação mais estreita para um objeto pequeno ou retrato. Use um contêiner de mídia larga aprovado apenas quando o detalhe não puder ser lido de outra forma; nunca crie rolagem horizontal no nível da página.

Anatomia

1. Limite da figura: Agrupa o ativo, legenda e crédito como uma unidade no fluxo do documento.
2. Fonte da imagem: Resolve para um ativo aprovado e existente, em vez de um hotlink remoto ou espaço reservado.
3. Texto alternativo: Substitui a função contextual da imagem para leitores que não podem percebê-la; é vazio apenas para decoração.
4. Dimensões intrínsecas: Reservam a proporção correta antes de o arquivo chegar e previnem movimento de layout.
5. Candidatos responsivos: Permitem que o navegador escolha um arquivo de tamanho adequado, em vez de baixar a maior fonte em todos os lugares.
6. Tamanho renderizado: Mantém o detalhe relevante legível sem transbordar ou ampliar uma fonte fraca.
7. Legenda: Adiciona interpretação, identificação, data, escala ou procedência quando essa informação ajuda todo leitor.
8. Crédito: Registra criador e fonte quando o licenciamento ou a política editorial exigirem.

O nome do arquivo de imagem e o texto alternativo não são intercambiáveis. Um nome de arquivo estável ajuda na manutenção do ativo; o texto alternativo contextual explica o propósito da imagem nesta ocorrência. A mesma fotografia pode, portanto, ter texto alternativo diferente quando apoia pontos distintos, embora reutilizar uma imagem para pontos não relacionados seja um sinal de alerta.

Exemplos de design

O elemento suporta três variantes semânticas e dois tratamentos de largura. O comportamento de carregamento não é uma variante visual.

Imagem informativa, largura de conteúdo

Este é o padrão. A imagem contribui com detalhe ou evidência reconhecível, usa texto alternativo não vazio e permanece dentro do contêiner de leitura.

Imagem informativa, mídia larga

Use o contêiner largo aprovado apenas quando um mapa, fotografia detalhada ou saída legível precisar de mais espaço horizontal. O texto ao redor ainda possui o significado, e a apresentação móvel deve permanecer utilizável.

Imagem decorativa

A decoração não carrega informação única, usa alt="", não tem legenda explicativa e deve ser rara em conteúdo de formato longo para produção. Não deve ser a única expressão de humor, status, identidade ou resultado.

Imagem de detalhe com expansão opcional

Use expansão apenas quando a exibição normal embutida estabelece contexto, mas o detalhe fino requer uma visão maior. A imagem em si permanece compreensível sem ativar o link, e o nome acessível do controle descreve a ação.

Comportamento em janela de visualização estreita

Cada variante reduz dentro da janela de visualização, preserva a proporção e mantém a legenda anexada. Se o texto significativo se tornar ilegível, forneça um recorte para celular ou substitua a imagem por texto estruturado; forçar pinça-para-zoom não é a solução padrão.

Parâmetros

O contrato armazena decisões editoriais e de entrega. Bordas, sombras, espaçamento e valores de ponto de quebra pertencem ao renderizador.

A diretiva não possui campo de título: uma imagem embutida pertence à seção ao redor, em vez de criar uma nova seção. Seu primeiro parágrafo do corpo mapeia para caption; nenhum primeiro título é aceito. O crédito vem de metadados de ativo confiáveis quando disponíveis, impedindo que autores alterem silenciosamente informações de licença.

Sintaxe e exemplos de código

As três notações a seguir mapeiam a mesma fonte, texto alternativo, dimensões intrínsecas, tamanho, legenda e intenção de carregamento. Os caminhos de ativo de exemplo demonstram o contrato apenas; a fonte de produção deve resolver para um arquivo existente.

Diretiva Markdown portátil

:::inline-image{src="/cdn-assets/seo-playbook/examples/keyed-connector.webp" alt="Connector close-up showing the keyed notch aligned with the matching socket ridge" width=1600 height=1000 size=content loading=lazy}
The keyed notch allows insertion in only one orientation.
:::

O primeiro parágrafo é a legenda. Parágrafos adicionais, títulos, listas, botões e mídia aninhada são rejeitados porque transformariam uma figura focada em um contêiner de conteúdo geral.

Shortcode Hugo

{{< inline-image src="/cdn-assets/seo-playbook/examples/keyed-connector.webp" alt="Connector close-up showing the keyed notch aligned with the matching socket ridge" width="1600" height="1000" size="content" loading="lazy" >}}
The keyed notch allows insertion in only one orientation.
{{< /inline-image >}}

Parâmetros nomeados são usados exclusivamente. Esta é uma especificação de adaptador portátil, não uma afirmação de que um shortcode local está registrado. Até que o adaptador exista, use a implementação de figura semântica estabelecida do sistema de publicação; nunca adicione uma chamada de shortcode quebrada ao conteúdo de produção.

Bloco WordPress

<!-- wp:image {"id":412,"width":"auto","height":"auto","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large">
  <img src="/cdn-assets/seo-playbook/examples/keyed-connector.webp"
       alt="Connector close-up showing the keyed notch aligned with the matching socket ridge"
       width="1600" height="1000" loading="lazy">
  <figcaption class="wp-element-caption">The keyed notch allows insertion in only one orientation.</figcaption>
</figure>
<!-- /wp:image -->

Use os metadados da biblioteca de mídia, mas revise o texto alternativo contextual para este posicionamento. Não vincule à página de anexo por padrão.

Exemplos

Bom: uma imagem focada responde à pergunta visual

Um guia de instalação diz: “Antes de aplicar energia, alinhe o entalhe chaveado com a crista do soquete; forçar o conector pode entortar os pinos.” Em seguida, coloca esta figura:

O entalhe e a crista se alinham antes que a trava possa engatar.

Isso funciona porque a imagem chega após a razão para inspecioná-la, o recorte contém ambos os recursos correspondentes, e a legenda explica a relação em vez de dizer “imagem do conector”. A instrução e a consequência permanecem em texto. As dimensões intrínsecas previnem movimento durante o carregamento, e a imagem pode ter carregamento preguiçoso porque aparece bem abaixo da primeira janela de visualização.

Ruim: decoração interrompe sem explicar

Um artigo sobre configuração de analytics insere uma fotografia de banco de imagens em largura total de uma pessoa olhando gráficos coloridos entre uma etapa e seu aviso. Seu texto alternativo diz “analytics dashboard SEO optimization reporting data,” a fonte tem 5000 pixels de largura, nenhuma dimensão é declarada, e o arquivo carrega ansiosamente no meio da página.

A imagem é ruim porque não prova nenhum estado de configuração, separa uma ação arriscada de seu aviso, empilha palavras-chave no texto alternativo, baixa mais pixels do que o layout pode usar e pode deslocar o aviso quando sua altura se torna conhecida. Remova-a. Se a interface real contiver um controle ambíguo, substitua-a por uma captura de tela focada e atual e mantenha o aviso anexado à ação.

Marcação de esquema e acessibilidade

Uma imagem embutida não cria nenhuma entidade de esquema especial por padrão. Uma imagem significativa pode fornecer a propriedade image de Article, HowTo, Product, Review ou outra entidade apropriada. Use ImageObject apenas com um contentUrl estável e metadados disponíveis verídicos, como legenda, dimensões, criador e licença. Não marque decoração ou direitos não verificados.

Um bom texto alternativo descreve a função no contexto, não todos os objetos visíveis. Pergunte qual frase substituiria a imagem se ela não carregasse. “Connector close-up showing the keyed notch aligned with the matching socket ridge” é útil em um guia de instalação. “A black and silver object on a gray background” é visualmente literal, mas funcionalmente fraco. Evite “imagem de” e “foto de” a menos que o meio em si importe, como distinguir uma fotografia de uma simulação.

Cada <img> precisa de um atributo alt. Use texto não vazio para imagens informativas e alt="" para decoração. Omitir o atributo não é equivalente: alguns leitores de tela anunciam o nome do arquivo. Não coloque prosa essencial, instruções, citações ou longas séries de dados dentro de pixels. Se o texto visível na imagem for importante, repita-o no conteúdo ao redor.

Use <figure> e <figcaption> quando uma legenda pertencer à imagem. Não adicione um papel de figure manualmente. Uma imagem expansível precisa de um controle visível e operável por teclado com um nome descritivo, movimento de foco previsível, suporte a Escape quando abre um modal e acesso ao mesmo texto alternativo e legenda no tamanho ampliado. Não envolva toda imagem em um link não identificado para o arquivo fonte.

A entrega responsiva faz parte do SEO de imagens e da acessibilidade porque torna o conteúdo disponível sem atrasos desnecessários. Use srcset e sizes ou um pipeline de imagem equivalente para que o design responsivo possa selecionar um candidato adequado. Preserve a proporção, defina width e height intrínsecos e limite a largura máxima renderizada ao seu contêiner. Essas dimensões reservam espaço e reduzem a Mudança Cumulativa de Layout , o movimento do conteúdo da página enquanto os recursos carregam.

O carregamento preguiçoso adia um recurso fora da tela até que o leitor se aproxime dele. Use loading="lazy" para imagens abaixo da janela de visualização inicial. Não aplique carregamento preguiçoso a uma imagem que provavelmente aparecerá imediatamente, pois o atraso pode fazer com que o maior conteúdo visível chegue mais tarde. Use carregamento ansioso e fetchpriority="high" apenas quando a medição e a posição do template identificarem a imagem como um provável ativo primário acima da dobra; múltiplas imagens de alta prioridade anulam o sinal.

Regras de escrita

A escrita ao redor de uma imagem embutida faz a maior parte do trabalho interpretativo, então a brevidade no elemento não significa vagueza.

• Introduza a razão antes da figura em um parágrafo próximo. Não use linguagem de coordenadas como “abaixo” quando layouts responsivos ou sindicalizados podem mover o ativo.
• Escreva texto alternativo informativo para a função da imagem neste contexto exato. Alvo de 40–160 caracteres; use até 250 apenas quando a complexidade genuinamente exigir.
• Mantenha legendas de 5 a 30 palavras e uma única frase quando possível. Identifique, interprete, date, escale ou credite a imagem; não apenas repita o texto alternativo.
• Mostre um sujeito ou relação principal. Se o leitor precisar inspecionar mais de três áreas independentes, use uma captura de tela anotada, diagrama, tabela ou galeria.
• Use ortografia americana, linguagem simples e a mesma terminologia da seção ao redor. Texto alternativo não é um campo de palavras-chave.
• Mantenha todas as instruções, avisos, medidas, preços, datas e conclusões essenciais em texto HTML, mesmo que também apareçam nos pixels.
• Nunca coloque títulos, múltiplos parágrafos, listas, tabelas, botões, formulários, vídeo, áudio ou outra imagem dentro do corpo do elemento.
• Nunca use uma legenda vazia para criar espaçamento, um crédito inventado, um hotlink remoto, um ativo sem licença, dados de clientes sem permissão ou um caminho de espaço reservado inexistente.
• Nunca estique, distorça ou amplie uma imagem para preencher um espaço de design. Corte apenas quando o recorte preservar a evidência e o contexto que o texto discute.

Tipos de post que a utilizam

O array postTypes no frontmatter é a junção canônica. Um tipo de post pode restringir o requisito, mas não altera o campo do elemento ou o contrato de acessibilidade.

Lista de verificação de QA

• Propósito: O revisor pode declarar a informação, evidência ou reconhecimento únicos que a imagem adiciona.
• Posicionamento: O parágrafo anterior estabelece o que inspecionar, e nenhum aviso, qualificação ou citação foi separado de sua afirmação.
• Elemento correto: Uma única imagem embutida é mais apropriada do que uma captura de tela anotada, galeria, diagrama, tabela ou imagebox.
• Validade do ativo: A fonte existe, usa formato aprovado e caminho relativo à raiz, e tem direitos e procedência verificados.
• Privacidade: A imagem não contém dados de cliente não aprovados, nomes, endereços de email, tokens, detalhes de navegador ou pistas de localização.
• Recorte e qualidade: O assunto permanece legível nas larguras renderizada e móvel sem distorção, espaço vazio evitável ou compressão destrutiva.
• Texto alternativo: O atributo alt está presente e é contextualmente informativo ou intencionalmente vazio para decoração; não é nome de arquivo, duplicata de legenda ou lista de palavras-chave.
• Legenda: Quando presente, adiciona identificação, interpretação, data, escala ou procedência em 5–30 palavras.
• Dimensões: Largura e altura intrínsecas correspondem à proporção da fonte e reservam espaço de layout estável.
• Entrega responsiva: Os tamanhos candidatos correspondem a larguras de exibição realistas; a maior fonte não é enviada a todas as janelas de visualização por padrão.
• Carregamento: Imagens abaixo da dobra têm carregamento preguiçoso; imagens inicialmente visíveis não; alta prioridade de busca é limitada a um candidato primário medido.
• Comportamento móvel: A imagem cabe sem rolagem horizontal no nível da página, e seu detalhe significativo permanece legível sem zoom forçado.
• Texto de fallback: Instruções, avisos, medidas e conclusões essenciais existem em texto da página, não apenas em pixels.
• Dados estruturados: Quaisquer propriedades de esquema são precisas, apoiadas por conteúdo visível e omitidas para decoração.
• Paridade portátil: Markdown, Hugo e WordPress preservam a mesma fonte, texto alternativo, dimensões, legenda, crédito e intenção de carregamento.
• Capturas pendentes: Nenhum caminho inexistente é renderizado; cada exemplo solicitado permanece um comentário SCREENSHOT enquanto screenshotsPending = true.

FAQ

O template da academy renderiza as cinco perguntas revisadas armazenadas no frontmatter [[faq]] desta página. Elas cobrem texto alternativo, carregamento preguiçoso, legendas, dimensionamento e a decisão de remover uma imagem que não acrescenta nada.