Direção de arte responsiva é escolher como a mesma ideia visual aparece em espaços diferentes. Em uma imagem de capa, isso pode significar reposicionar o assunto dentro do mesmo arquivo ou preparar outra composição para telas estreitas. Comece pelo que o leitor precisa reconhecer. Se um corte conserva a ação, o contexto e o espaço para a manchete, aproveite o arquivo existente. Quando um desses elementos desaparece, desenhe uma versão própria e especifique em que condição ela entra.

Defina o que a imagem precisa mostrar

Imagine uma página sobre um coletivo de encadernação. A fotografia larga mostra duas pessoas em uma bancada, com uma delas costurando a lombada de um livro. A outra organiza ferramentas e ajuda a situar a cena. Na capa do celular, o retângulo disponível corta as duas mãos quando a imagem é centralizada. É possível deslocar o enquadramento até o livro, mas a cabeça da pessoa passa a ocupar uma faixa estreita da foto. A decisão depende do papel que a imagem tem na abertura. Se o assunto é o processo manual, preserve as mãos e a costura.

Escreva uma frase para a função da foto, antes de criar os quadros. “Apresentar a costura manual que caracteriza o trabalho do coletivo” é uma instrução melhor para o recorte que “mostrar o coletivo”. Marque no arquivo os elementos indispensáveis e a região em que a manchete pode ficar legível. Depois avalie a imagem junto do texto de verdade. Se a manchete precisa migrar para fora da foto em telas pequenas, a versão compacta pode usar um enquadramento mais fechado e dispensar a área de respiro à esquerda.

Compare o recorte automático e a composição dedicada

Faça um teste simples com três retângulos. Use um formato horizontal, um intermediário e o espaço mais estreito que sua página pretende oferecer. Coloque a mesma foto nos três, preencha o quadro e mova o ponto de interesse. No navegador, o equivalente costuma combinar object-fit: cover e object-position. O primeiro preenche a caixa preservando a proporção e admite cortes. O segundo posiciona a imagem dentro dessa caixa. O arquivo continua o mesmo e a operação reduz o trabalho de exportação.

Se a foto perder a relação entre objeto e ação na menor caixa, monte uma versão compacta a partir da imagem original. Veja se uma fotografia alternativa da mesma série explicaria melhor o trabalho. Em uma foto de equipe, por exemplo, preservar todas as pessoas em um retângulo estreito talvez só produza rostos pequenos. Um retrato de duas pessoas em atividade pode cumprir melhor a função editorial, desde que a legenda e o contexto acompanhem a mudança. Use a discussão de moodboards para direção visual para registrar quais características unem essas imagens.

Separe composição de resolução

Ao entregar a imagem para desenvolvimento, separe duas perguntas. A primeira é qual composição cabe naquela situação. A segunda é quantos pixels o navegador precisa baixar para renderizar a composição escolhida. O elemento picture permite definir fontes com condições de mídia para alternar enquadramentos. Para a mesma composição, srcset pode oferecer arquivos de diferentes larguras e sizes descreve o espaço de exibição esperado quando se usam descritores de largura. O navegador usa essas informações e as condições do dispositivo para selecionar um candidato.

O padrão HTML do WHATWG documenta a direção de arte como um dos usos de imagens adaptativas. O guia do web.dev distingue imagens que trocam o conteúdo visual daquelas que trocam somente de resolução. Compare os exemplos com o seu protótipo. Se todas as larguras usam o mesmo enquadramento, o teste principal é de resolução. Se a fotografia se aproxima das mãos em uma delas, a mudança pertence à composição. Padrão HTML do WHATWG e guia de imagens responsivas do web.dev.

Entregue os limites junto com as imagens

Uma tabela simples de entrega pode informar a condição de troca, a proporção de cada recorte e os arquivos disponíveis. Escolha a condição no ponto em que a composição começa a falhar. Em uma página onde a legenda passa para baixo perto de 700 pixels, a troca pode acompanhar essa reorganização. Em outra página, a coluna da foto pode ficar estreita mais cedo, por causa da barra lateral. Teste os pontos intermediários e pense em como o mesmo módulo será usado em outro lugar. Uma regra de mídia por largura de tela precisa fazer sentido em todas as páginas que a recebem.

Peça à equipe que reserve espaço para a proporção correspondente antes de carregar a imagem. Observe a abertura com a rede limitada. Se o texto salta assim que a capa aparece, confira a proporção reservada no layout e a do arquivo efetivo. Também veja se a versão compacta ficou realmente mais leve. A redução de largura pode coexistir com uma exportação mais pesada se a qualidade ou o formato mudarem demais. Compare o tamanho transferido junto da nitidez, especialmente em texturas finas como papel, cabelo e tecido.

Acompanhe o teste de rede com uma medida da abertura. No Web Almanac de 2025, imagens representaram 76% dos elementos de Largest Contentful Paint nas páginas móveis da amostra. Para o projeto, isso significa que vale verificar se a foto é o maior elemento visível na área inicial e em que momento ela aparece. Use a versão compacta em uma simulação de rede lenta e compare o que acontece com o título e a foto. A medida complementa a revisão do enquadramento. Capítulo de desempenho do Web Almanac.

Revise o sentido da imagem em cada largura

O texto alternativo pertence ao elemento img da composição e continua associado ao recurso selecionado dentro de picture. Planeje recortes que sustentem a mesma descrição quando a imagem é informativa. “Pessoa costurando a lombada de um livro em uma bancada” serve para as duas versões se ambas mostram a ação. Se a capa estreita mostrar apenas ferramentas, essa descrição deixa de servir. Avalie se a nova foto realmente pertence à mesma peça ou se o conteúdo precisa de outro tratamento. O guia de texto alternativo em imagens editoriais aprofunda essa relação entre a imagem e o contexto da página.

A revisão visual também precisa incluir as bordas. Fotografe ou desenhe com margem de trabalho em torno do assunto. Na hora de medir a legibilidade de texto sobre foto, olhe a área mais clara ou mais escura que fica atrás das letras em cada composição. Se a leitura depende de uma sobreposição, verifique o resultado no arquivo final e com uma manchete que ocupe mais linhas. Um recorte que funcionava para o título da estreia pode exigir mudanças assim que o CMS receber outra matéria.

Quando basta indicar um ponto focal?

Um ponto focal costuma resolver quando a identidade da imagem está concentrada em uma região e todos os formatos ainda preservam o que a página precisa comunicar. Teste deslocamentos pequenos nos dois sentidos antes de aprovar. Se a margem for muito apertada, sinalize a limitação na entrega e prepare um recorte dedicado. Em um sistema editorial, essa anotação também orienta quem substitui a foto depois.

O que conferir antes de publicar?

Abra a página estreita, a intermediária e a larga. Identifique o recurso carregado no navegador, confira o espaço reservado, leia a manchete e compare a informação visível com a descrição da imagem. Em cada largura, pergunte a alguém que não viu a foto inteira o que está acontecendo na cena. Se a resposta permanece coerente, os recortes funcionam como versões da mesma abertura editorial.