Imagem responsiva: como conferir o arquivo exibido no site

Para conferir uma imagem responsiva, identifique a versão selecionada pelo navegador, meça o espaço que ela ocupa na página e verifique se aparece com o detalhe necessário. O arquivo enviado à biblioteca, a imagem escolhida para aquela visita e o tamanho de exibição podem ser diferentes. Registre cada um antes de concluir que há erro.

O guia de imagem para web explica formatos, dimensões, exportação e preparação no WordPress. Este artigo aprofunda a conferência na página pública, com foco em fotografias e outras imagens rasterizadas inseridas como elementos de imagem. Fundos em CSS e desenhos vetoriais podem exigir outra inspeção.

Separe o arquivo original, o espaço na página e o recurso escolhido

O original é o arquivo guardado ou enviado ao site. A publicação pode oferecer versões menores dele. O espaço de exibição é a área ocupada pela imagem no layout, medida em pixels CSS, a unidade usada para organizar os elementos na página. Já o recurso selecionado é o endereço da versão que o navegador escolheu para aquela condição de acesso.

No HTML, srcset pode informar versões candidatas; sizes ajuda a comunicar o espaço previsto nos casos que usam descritores de largura. A documentação de imagens responsivas da MDN explica essa seleção. Viewport, densidade, zoom e condições de acesso participam da decisão; não há uma única versão obrigatória para todas as visitas.

Faça uma primeira conferência visual na página pública

Abra a página fora do editor e localize a imagem. Verifique se aparece por inteiro conforme o recorte previsto, se o assunto principal está visível e se há nitidez suficiente para a função da peça. Uma foto pode carregar sem permitir distinguir o detalhe do produto; são duas perguntas diferentes.

Repita a observação em uma tela estreita e em uma larga. Registre as condições de cada teste, incluindo navegador, tamanho da área da página e zoom. Redimensionar uma janela ajuda a encontrar problemas, mas não reproduz todas as condições de um celular físico.

Se o problema for o assunto cortado, consulte o guia de recorte de imagens no site. A escolha de outra resolução não corrige, por si só, um enquadramento que removeu a informação necessária.

Identifique o recurso sem confundir endereço com carregamento

No Chrome para computador, abra o modo de inspeção com Ctrl+Shift+C no Windows ou Cmd+Option+C no macOS e selecione a imagem. O painel Elements destaca o elemento correspondente. A orientação oficial do Chrome sobre o modo de inspeção mostra esse procedimento e as informações de dimensões disponíveis. Abrir o painel pode reduzir a área da página: anote a largura efetiva depois disso.

Na inspeção técnica do elemento img, a propriedade currentSrc informa o endereço escolhido pelo navegador. Ela é especialmente útil quando há várias candidatas. A referência de currentSrc na MDN esclarece que esse valor não depende do sucesso do carregamento. Encontrar um endereço não comprova que a imagem foi exibida.

Registre o endereço completo em seu controle interno e confira se corresponde à peça esperada. O nome pode ajudar a localizar a versão, mas um trecho como “1200” não comprova sua largura. Para isso, examine o arquivo correspondente e suas dimensões. Se você não trabalha com inspeção de elementos, envie o modelo abaixo à equipe que mantém o site, junto da página e da imagem afetada.

A propriedade complete também exige cuidado: ela pode ser verdadeira em uma imagem que falhou, como documenta a MDN sobre complete. Combine a observação da peça com os sinais de carregamento e erro. Não use somente um campo isolado para aprovar a imagem.

Entenda por que 600 pixels na página podem usar um arquivo de 1200

A densidade da tela relaciona pixels físicos a pixels CSS. A propriedade devicePixelRatio, ou DPR, expressa essa relação no contexto do dispositivo e também pode mudar com o zoom da página. Consulte a explicação de devicePixelRatio na MDN. Um DPR igual a 2 não significa que a página ficou duas vezes mais larga.

Exemplo fictício: uma fotografia original tem 1600 × 900 pixels. Em um layout sem bordas, recorte ou transformação, ela ocupa 600 × 337,5 pixels CSS. Para o exercício, suponha que o navegador tenha selecionado um arquivo de 1200 × 675 pixels, numa condição com DPR 2. Esses dados foram inventados para explicar a comparação; não são medições de uma página real.

Exemplo fictício · proporção 16:9

São três medidas diferentes da mesma imagem. O esquema não reproduz uma interface real.

Original: 1600 × 900 pixels

Arquivo de referência enviado ao site. As dimensões precisam ser conferidas no arquivo.

Exibição: 600 × 337,5 pixels CSS

Espaço ocupado na página, sem bordas, recorte ou transformação no exercício. Altura: 600 × 9 ÷ 16 = 337,5.

Recurso selecionado: 1200 × 675 pixels

Versão assumida no exercício, numa condição com DPR 2. Relação entre larguras: 1200 ÷ 600 = 2.

O que a conta não comprova

Não determina a escolha de todo navegador, nem peso em bytes, velocidade ou qualidade. Seleção do endereço e sucesso de carregamento devem ser conferidos separadamente.

Descrição da figura

À esquerda, o arquivo original tem 1600 por 900 pixels. Uma seta o relaciona a uma página ilustrativa à direita, onde a imagem ocupa 600 por 337,5 pixels CSS em proporção 16 para 9. A indicação DPR 2 identifica a premissa de densidade do exercício. Abaixo, o arquivo selecionado tem 1200 por 675 pixels. Dividir 1200 pela largura de exibição de 600 resulta em 2. A versão selecionada foi assumida para fins didáticos, sem regra determinística do navegador. O endereço escolhido não comprova carregamento, e as medidas não demonstram peso em bytes ou velocidade. Todas as cenas e dimensões são fictícias; o esquema não reproduz uma interface real.

A conta relaciona dimensões; ela não informa o tamanho em bytes, o tempo de download ou uma nota de qualidade. Compressão, conteúdo da fotografia e condições de apresentação precisam de avaliação própria. O exemplo não estabelece um tamanho universal de arquivo nem demonstra ganho de desempenho.

Não use naturalWidth como sinônimo automático de pixels do arquivo

A propriedade naturalWidth representa a largura intrínseca corrigida pela densidade, em pixels CSS. Ela não deve ser tratada automaticamente como a largura bruta do arquivo selecionado. A referência de naturalWidth na MDN faz essa distinção. No relatório, identifique qual medida foi obtida e por qual método.

Para uma fotografia rasterizada, uma largura natural disponível pode ajudar a investigar se o navegador conseguiu obter dados da imagem. Ainda assim, isso não substitui a conferência do assunto, da nitidez, do recorte e da correspondência com a versão pretendida. Preserve a diferença entre conseguir carregar e estar adequado ao uso.

Compare os testes antes de pedir uma correção

Se uma imagem maior continuar selecionada depois de estreitar a janela, não conclua imediatamente que a configuração falhou. O navegador pode aproveitar um recurso já disponível em cache, como explica a documentação de imagens responsivas. Registre a sequência do teste para a equipe conseguir reproduzir a observação.

Se aparecer uma versão antiga, reúna o endereço selecionado, a referência correta e as condições em que ocorreu. Se o arquivo estiver certo, mas o detalhe ficar borrado, examine a resolução e a compressão pertinentes àquela exibição. Se houver corte indevido, investigue a composição e o comportamento do layout. Cada evidência orienta uma correção diferente.

Guarde um registro que outra pessoa consiga conferir

Página pública e posição da imagem:
Função da peça e detalhe indispensável:
Data, navegador e versão:
Dispositivo real ou janela redimensionada:
Largura efetiva da área da página e zoom:
DPR observado, se disponível:
Original de referência e dimensões verificadas:
Largura e altura de exibição, em pixels CSS:
Endereço selecionado (currentSrc):
Arquivo correspondente e dimensões verificadas:
Imagem apareceu? Houve indicação de erro?
Nitidez e detalhe necessário preservados?
Recorte corresponde ao destino?
Sequência do teste e condição de cache conhecida:
Captura da observação:
Problema, resultado esperado e responsável:
Ajuste aplicado e escopo:
Resultado da nova conferência, data e conferente:

Uma conferência suficiente para o problema identificado permite localizar a peça, reconhecer a versão observada e repetir as condições do teste. A equipe pode então ajustar as versões disponíveis, as informações de tamanho ou o layout conforme o diagnóstico. Registre a alteração realizada e reabra a página pública para confirmar seu efeito.

Perguntas frequentes sobre imagem responsiva

Uma imagem de 1200 pixels está errada se aparece com 600 pixels na página?

Essa diferença, por si só, não indica erro. O arquivo e o espaço em pixels CSS são medidas diferentes. Observe a densidade da tela, o recurso selecionado, a nitidez necessária e o comportamento do layout.

currentSrc comprova que a imagem carregou?

Não. A propriedade informa o endereço selecionado pelo navegador. Confira também a presença da imagem e os sinais de carregamento ou erro antes de aprová-la.

naturalWidth sempre informa a largura em pixels do arquivo baixado?

Não automaticamente. É uma largura intrínseca corrigida pela densidade, em pixels CSS. Para registrar as dimensões do arquivo selecionado, examine o arquivo correspondente e identifique o método usado.

Preciso alterar o tema para conferir uma imagem responsiva?

A conferência começa pela observação e pela inspeção da página pública. Uma eventual alteração depende do diagnóstico e de seu escopo. Primeiro registre a imagem, as condições, o recurso selecionado e o problema que precisa ser corrigido.

Se você precisa organizar a produção de imagens e a revisão das páginas, converse conosco sobre a apresentação visual do seu conteúdo. Podemos ajudar a definir critérios de preparação e conferência. A implantação de ajustes técnicos e o acompanhamento do site precisam de escopos próprios.