Como dimensionar e posicionar fotos em um artigo com texto e imagens
Para um artigo legível, dimensione cada foto de acordo com a função que ela desempenha: dê a uma imagem que traz evidências ou contexto essenciais espaço suficiente para ser vista e mantenha uma imagem de apoio menor quando o texto ao redor já explicar o ponto. Posicione-a ao lado do trecho que ela esclarece, preserve uma ordem de leitura clara e verifique o layout em larguras estreitas. Este guia foca na organização de fotos em um artigo digital; as mesmas escolhas focadas no propósito podem orientar um layout impresso, mas o comportamento na tela exige uma verificação própria.
Comece pela função da foto
Antes de mover ou redimensionar uma foto, decida o que o leitor deve absorver dela. É uma evidência que ele precisa inspecionar, um exemplo que torna um trecho mais fácil de visualizar ou apenas decoração? Essa distinção é mais útil do que começar com uma largura de imagem predefinida.
Se a foto traz informações que o texto não contém, dê a ela espaço suficiente para que os detalhes relevantes fiquem legíveis. Uma imagem pequena de um documento, objeto ou processo pode falhar em sua tarefa principal se o leitor não conseguir examiná-la. Se a foto apenas ilustra um ponto já explicado no texto, um tamanho menor pode ser suficiente — ou a imagem pode nem ser necessária. Esta é uma regra prática de design inferida a partir do propósito da foto, e não um padrão de tamanho universal. O guia de imagens do GOV.UK Design System afirma de forma semelhante que as imagens devem atender a uma necessidade real do usuário e servir como auxílios visuais, enquanto as informações obrigatórias devem permanecer disponíveis por escrito. Suas recomendações foram criadas para serviços governamentais online; portanto, considere-as uma referência útil, e não um livro de regras para todo tipo de artigo.
Uma ajuda prática para a tomada de decisões é atribuir a cada foto uma de três funções: inspecionar, ilustrar ou ornamentar. "Inspecionar" geralmente exige uma exibição maior e uma explicação ou legenda que direcione a atenção para o detalhe relevante. "Ilustrar" frequentemente pode ficar em um tamanho moderado perto do parágrafo que ela apoia. "Ornamentar" não tem função informativa; considere omiti-la ou mantê-la visualmente discreta. Essas categorias são uma ferramenta prática de edição, não uma terminologia obrigatória das fontes.
Escolha o tamanho pela importância e pelo espaço disponível
Use a coluna de texto do artigo como seu limite inicial. Uma foto que abrange toda a largura da coluna é fácil de notar e dá mais espaço para conteúdos detalhados; reserve esse tratamento para imagens cuja importância justifique a pausa visual. Uma foto menor, alinhada à coluna, pode apoiar um ponto próximo sem competir com o título ou com o texto. Evite escolher o tamanho apenas porque o arquivo original é grande: as dimensões exibidas devem se adequar ao layout e às informações que os leitores precisam ver.
Aqui está uma decisão ilustrativa, e não um modelo comprovado: suponha que uma coluna de conteúdo de 700 pixels de largura contenha uma foto mostrando um objeto de duas partes cuja diferença é essencial para o trecho. Uma exibição próxima à largura total da coluna pode facilitar a comparação. Se a mesma foto for apenas uma ambientação geral e o parágrafo contiver a explicação, uma exibição mais estreita pode preservar o destaque para o texto. O valor de 700 pixels é apenas um exemplo de largura de coluna; não é um padrão recomendado.
Quando uma foto aparece ao lado do texto em uma tela ampla, trate os dois como uma unidade emparelhada. Dê à imagem largura suficiente para exibir seu tema e ao texto espaço suficiente para que a leitura continue confortável. Se um deles ficar apertado, empilhe-os em vez de encolher a foto e espremer o texto em uma faixa estreita. Em telas menores, uma sequência de coluna única costuma ser a disposição mais clara: o texto, depois a foto correspondente e, em seguida, o próximo trecho. A explicação do W3C sobre o Critério de Sucesso Reflow da WCAG 2.2 descreve como muitas páginas de artigos podem se adaptar a uma única coluna e explica o objetivo de evitar a rolagem bidirecional para conteúdos de leitura comuns. Ela também observa exceções para conteúdos cujo significado ou uso exija um layout bidimensional. O ponto principal para o layout de um artigo é garantir que a combinação de imagem e texto não force os leitores a rolar a tela lateralmente para acompanhar a leitura.
Posicione cada foto onde sua conexão seja clara
Coloque a foto perto da frase ou parágrafo que explica o motivo de ela estar ali. Se os leitores tiverem que rolar por vários parágrafos não relacionados para encontrar a imagem, a conexão poderá ficar confusa. Da mesma forma, uma foto grande inserida no meio do argumento de uma frase pode interromper a linha de raciocínio. Um posicionamento limpo geralmente fica após o primeiro trecho que introduz o assunto ou diretamente antes de uma etapa em que a imagem é necessária.
Use uma legenda quando ela acrescentar algo específico: identifique o tema, aponte um detalhe ou explique por que a imagem é importante. Não use uma legenda para repetir a frase ao redor palavra por palavra. Se a foto exigir uma inspeção atenta, diga o que observar no texto próximo e também na legenda; os leitores não devem ter que adivinhar o objetivo apenas pelo posicionamento.
A relação entre a foto e o texto também é fundamental para a leitura não visual. O Tutorial de Imagens do W3C afirma que imagens informativas precisam de alternativas de texto que transmitam suas informações essenciais, enquanto imagens decorativas podem usar uma alternativa vazia para que a tecnologia assistiva possa ignorá-las. As orientações do W3C para imagens informativas enfatizam que a alternativa textual deve expressar o significado da imagem no contexto, e não apenas listar objetos visíveis. Como uma verificação prática, pergunte-se: se alguém não pudesse ver esta foto, quais informações perderia? Coloque as informações essenciais no texto do artigo e forneça uma alternativa de texto adequada para a imagem. Se a imagem não acrescentar nada além do texto adjacente, repetir a descrição pode ser desnecessário.
Preserve o formato útil da foto
A proporção de aspecto de uma foto — a relação entre largura e altura — afeta o espaço que ela ocupa e o que permanece visível. Comece encaixando a foto inteira dentro da área escolhida. Corte apenas quando o tema principal continuar nítido e o corte não remover detalhes dos quais o leitor precisa. Um corte em orientação paisagem pode funcionar bem para uma imagem principal ampla; uma imagem em formato retrato pode funcionar melhor em uma largura menor dentro da coluna. Essas são escolhas de composição, não regras fixas.
Se um corte remover o contexto, alterar o significado aparente ou ocultar um detalhe discutido no artigo, use um corte diferente ou exiba a imagem nas proporções originais. Para diagramas, rótulos ou documentos, verifique o tamanho final de exibição: textos embutidos em uma foto podem ficar pequenos demais para serem lidos. O guia de imagens do GOV.UK geralmente desaconselha o uso de texto dentro de imagens porque ele pode ser difícil de ler, copiar, redimensionar ou acessar com um leitor de tela; quando o texto for indispensável à imagem, forneça o mesmo significado também no conteúdo textual próximo.
Verifique o layout no tamanho que os leitores usam
Visualize o artigo em uma largura ampla de desktop e em uma largura estreita de dispositivo móvel. Certifique-se de que a foto não ultrapasse os limites da coluna de texto, não cubra conteúdos nem deixe o texto espremido ao lado dela. Siga a sequência de leitura: do título ao parágrafo e à foto. Quando o layout for empilhado, a imagem ainda deve aparecer perto do trecho que ela explica. Verifique também as legendas e eventuais detalhes importantes na imagem no tamanho real de exibição.
Para páginas da web, o tamanho de exibição e o tamanho do arquivo são decisões separadas. Um arquivo de origem grande pode ser necessário para uma exibição ampla, mas enviar arquivos desnecessariamente pesados para telas menores pode desperdiçar dados. O guia do web.dev sobre imagens responsivas explica como os navegadores podem selecionar entre diferentes tamanhos de imagem para diversas condições de exibição, destacando que não há um número único e correto de versões de uma imagem. Esta é uma orientação de implementação para publicação na web; ela não determina o local onde a imagem deve ficar no artigo.
Uma sequência rápida de decisão
Defina a função. A foto foi feita para ser inspecionada, para ilustrar o texto ou apenas para decorar a página?
Encontre a âncora. Identifique o trecho que a introduz ou depende dela e, em seguida, posicione a foto ao lado desse trecho.
Defina a largura de exibição. Dê espaço suficiente para evidências essenciais; deixe uma foto de apoio ocupar menos espaço se os detalhes não forem indispensáveis.
Verifique o corte. Mantenha o assunto principal e todo o contexto relevante visíveis.
Leia o layout em voz alta na sequência. Em uma tela estreita, confirme se o texto e a foto continuam aparecendo em uma ordem lógica e se o texto permanece legível.
Descreva as informações. Adicione uma legenda quando ela ajudar e forneça uma alternativa de texto com base na função da imagem.
A regra prática é simples: deixe que a importância determine o destaque, que o texto relacionado determine o posicionamento e que a visualização em telas estreitas revele se a disposição continua funcionando. Se a foto for difícil de entender no tamanho escolhido, aumente-a, simplifique o corte ou explique o detalhe relevante no texto.