Imagens no site: como preparar arquivos sem perder informação
Atualizado: há 7 horas
Uma imagem pode estar bonita na pasta e falhar na página: o produto fica cortado, o detalhe importante desaparece ou o arquivo demora a chegar. Preparar imagens no site exige decidir qual informação precisa permanecer visível e em que situação ela será consultada. Reduzir o peso é parte desse trabalho, mas não substitui a revisão do conteúdo.
O roteiro abaixo organiza essa preparação por decisões. Ele serve para reunir arquivos antes de criar um site e para revisar uma página que já existe. A proposta é manter uma referência do original, comparar alternativas e registrar por que cada versão foi escolhida.
Imagens no site: comece pela função de cada imagem
Antes de exportar, escreva uma frase sobre o que a imagem deve esclarecer. Ela mostra o acabamento de um produto? Identifica uma pessoa? Apresenta um espaço? Se a resposta for apenas “preencher a seção”, vale reconsiderar a escolha. Uma fotografia que exige muita explicação talvez esteja ocupando o lugar de uma informação que deveria aparecer no texto.
Exemplo fictício: uma marcenaria prepara a página de uma bancada. A foto principal apresenta o conjunto; outra aproxima a borda e a união das peças. Usar a mesma fotografia ampla nas duas posições não resolve a segunda tarefa. A equipe escolhe outro enquadramento e mantém, no texto, as especificações que o cliente precisa comparar.
Defina o recorte antes de diminuir o arquivo
Monte uma prévia na posição real da página e confira as versões de computador e celular. Marque os elementos que não podem desaparecer: puxador, rosto, logotipo ou encaixe. Se um recorte estreito não comportar essa informação, mude a composição ou selecione outra imagem. Não peça ao visitante que deduza o que ficou fora.
Guarde o arquivo original e nomeie as versões por finalidade, como bancada-visao-geral e bancada-detalhe-borda. Nossa sugestão é registrar também quem escolheu a foto e em qual página ela entra. Esse inventário ajuda quando alguém troca a imagem meses depois e precisa entender a decisão anterior.
A largura de exibição orienta a entrega
O web.dev explica que imagens responsivas permitem escolher arquivos conforme o espaço disponível e a densidade de pixels do dispositivo. A largura em pixels CSS na página e a largura do arquivo são medidas relacionadas, mas não equivalentes em todas as telas. web.dev: desempenho de imagens
Em um exemplo fictício, uma foto ocupa cerca de 600 pixels CSS em determinada seção. Isso é um ponto de partida para testar versões, não uma ordem para exportar tudo com 600 pixels. Peça a quem implementa o site que confira qual arquivo o navegador realmente baixa em cada cenário. Essa verificação é especialmente útil quando a plataforma gera variações automaticamente.
Escolha o formato pela comparação
WebP e AVIF podem oferecer boa compressão, mas o resultado precisa ser avaliado para cada imagem e configuração. Fotografias, transparências e desenhos têm exigências diferentes; a escolha do formato deve considerar essas características. web.dev: escolha de formato
Exporte alternativas e observe a imagem no tamanho de uso. Procure alterações nas bordas, áreas de cor suave e detalhes que justificam a fotografia. Compare também o tamanho dos arquivos. O web.dev lembra que o mesmo número de qualidade não produz resultados equivalentes entre formatos e ferramentas; por isso, compare as imagens resultantes. web.dev: nível de compressão
Escreva o contexto junto da fotografia
O Google recomenda colocar imagens próximas de conteúdo pertinente, usar nomes descritivos e escrever texto alternativo útil ao contexto, sem acumular palavras-chave. Esse texto também contribui para a acessibilidade. Google Search Central: boas práticas para imagens
No exemplo da marcenaria, “bancada de madeira com borda arredondada” informa mais que “foto do nosso trabalho”. Ainda assim, não transforme o texto alternativo em catálogo: medidas, opções e condições de contratação devem estar disponíveis no conteúdo da página. Revise a descrição sempre que a imagem mudar; copiar a anterior sem conferir pode comunicar outro produto.
Revise o conjunto e meça na página
Nossa ficha de revisão pode ter cinco itens. Preencha-a depois de publicar uma versão de teste e antes de considerar a imagem aprovada:
Função: consigo dizer o que esta imagem esclarece para o visitante?
Enquadramento: o detalhe necessário aparece nas prévias de computador e celular?
Arquivo: registrei dimensões, formato e peso da versão escolhida?
Contexto: o texto próximo e a descrição correspondem à imagem atual?
Entrega: conferi no navegador qual arquivo foi solicitado e como a página se comportou?
Compare o desempenho antes e depois em condições semelhantes, registrando dispositivo e conexão. O Search Central indica o PageSpeed Insights como ferramenta de análise de velocidade. Use o relatório para investigar a página; uma troca de arquivo, isoladamente, não explica todo o carregamento. Google Search Central: velocidade e qualidade
Se houver conflito entre leveza e informação, volte à função definida no início. Pode ser melhor trocar a fotografia ou separar um detalhe do conjunto. Para planejar essas decisões dentro do projeto, conheça o serviço de criação de websites da Briccitly. Criação de websites da Briccitly
Comentários