Uma imagem está pronta para um website quando tem uma finalidade clara, autorização de utilização, um enquadramento adequado, um ficheiro eficiente e uma alternativa textual que corresponde à sua função. O ficheiro mais pequeno nem sempre é a melhor escolha: os visitantes continuam a precisar de reconhecer um produto, ler um diagrama ou perceber a ideia de uma ilustração. Verifique a imagem na página em que será utilizada antes de a aprovar.
Use esta checklist ao preparar um novo site, substituir um banner demasiado pesado ou entregar uma pasta de materiais a um programador. Comece por uma imagem representativa, acorde as decisões e aplique depois o processo às restantes. Guarde o original separadamente para que uma futura reformulação não dependa de uma exportação já comprimida.
1. Defina o que a imagem precisa de comunicar
Escreva uma frase que descreva a função de cada imagem. Uma fotografia de produto pode mostrar um acabamento; um diagrama pode explicar uma sequência; uma textura decorativa pode simplesmente reforçar o ambiente da página. Se ninguém conseguir descrever essa função, reconsidere se vale a pena descarregar a imagem. Uma página mais leve também pode resultar da remoção de imagens desnecessárias, e não apenas da compressão das existentes.
Registe a origem, o autor ou fornecedor, a utilização permitida e os créditos exigidos junto do ficheiro original. Confirme se a autorização abrange a utilização prevista no website e eventuais edições ou recortes. Receber um ficheiro por email não resolve, por si só, estas questões. Encaminhe dúvidas sobre autorizações para o titular dos direitos ou um profissional qualificado; trata-se de uma verificação de gestão de materiais, não de aconselhamento jurídico.
No caso de imagens conceptuais geradas, guarde o pedido de geração e o respetivo registo, e identifique honestamente a sua função. Não apresente um espaço de trabalho, uma equipa ou um produto imaginados como uma fotografia da empresa. Remova informações pessoais desnecessárias das capturas de ecrã e inspecione a exportação final, incluindo o que aparece em separadores do navegador ou painéis de conta.
2. Escolha um formato adequado ao conteúdo
Escolha um formato inicial, exporte uma versão de teste e compare-a com o original no tamanho em que as pessoas a vão ver. Imagens diferentes reagem de forma diferente às mesmas definições de codificação. Não existe um valor de qualidade ou uma extensão de ficheiro que deixe automaticamente todos os materiais prontos para publicação.
- Fotografias e ilustrações detalhadas: compare WebP ou AVIF com um JPEG bem codificado. Escolha a opção que preserva os detalhes importantes com um tamanho de transferência aceitável.
- Logótipos e diagramas simples: considere SVG quando existir um original vetorial de confiança. Reveja o SVG fornecido antes de o adicionar ao site e mantenha o texto essencial disponível na página.
- Imagens raster que exigem contornos exatos ou transparência: compare PNG com uma exportação WebP adequada, sem perdas ou com transparência. Inspecione linhas finas, letras e contornos translúcidos sobre o fundo real.
- Materiais animados: comece por perguntar se o movimento acrescenta informação. Uma imagem estática pode transmitir a mesma ideia com menos distrações e uma implementação mais simples.
Estas opções são pontos de partida para testes, não uma exigência de criar todos os formatos. Cada variante adicional precisa de uma razão e de uma configuração que a sirva corretamente. Um AVIF inutilizado ao lado do JPEG publicado não melhora nada. Guarde as definições de exportação no registo da imagem para que outra pessoa consiga reproduzir uma correção sem ter de adivinhar.
3. Ajuste as dimensões ao esquema da página
Distinga as dimensões do original, as dimensões de apresentação e o recorte. Uma fotografia pode conter milhares de píxeis e aparecer num cartão pequeno. Exportar o original completo da câmara para todos os cartões desperdiça transferência sem necessariamente tornar o cartão mais útil. No sentido inverso, ampliar uma exportação pequena num ecrã grande torna a falta de nitidez evidente.
A marcação de imagens responsivas pode disponibilizar várias larguras através de srcset, enquanto sizes descreve a largura prevista no esquema da página. O navegador seleciona um recurso com base nessa informação e no seu ambiente. Use picture quando a composição precisar de mudar, por exemplo, para um recorte mais fechado no telemóvel. A MDN explica a distinção entre alternar resoluções e adaptar a composição no seu guia de imagens responsivas.
Para a revisão, liste os espaços reais: banner de largura total, imagem de conteúdo em duas colunas, cartão e pré-visualização para redes sociais. Verifique num telemóvel estreito e num ecrã largo. Mantenha o tema principal afastado das margens que desaparecem com o recorte. Se um rosto, uma etiqueta ou uma característica importante ficar cortada, alterar a compressão não resolve o problema; altere o recorte ou o esquema.
Defina atributos width e height adequados para que o navegador possa reservar espaço a partir da proporção da imagem. Certifique-se de que o CSS responsivo e quaisquer recortes alternativos são compatíveis com esse espaço reservado. Teste o carregamento inicial e a página completamente carregada: uma captura de ecrã estável pode esconder um salto que ocorreu antes.
4. Comprima sem perder a razão de ser da imagem
Compare as exportações lado a lado no tamanho de apresentação previsto. Procure faixas nos gradientes, halos nos contornos finos, detalhes esbatidos e franjas inesperadas nas áreas transparentes. Nas imagens de produtos, confirme que uma textura ou diferença de cor não desapareceu. O compromisso aceitável depende do que o visitante precisa de perceber.
Acorde um limite de tamanho orientador para cada espaço e investigue as exceções. Uma imagem de instruções detalhada pode justificar mais bytes do que um cartão decorativo. O limite deve suscitar uma conversa útil sobre formato, recorte e dimensões; não deve impor um resultado ilegível nem transformar-se numa regra universal inventada, como “todas as imagens têm de ficar abaixo de 100 KB”.
Meça o ficheiro que o navegador realmente recebe. Um sistema de conteúdos pode voltar a comprimir um carregamento, servir uma variante inesperada ou manter uma imagem anterior em cache. Inspecione a página apresentada e a resposta de rede depois da publicação. Guarde um original aprovado e exportações com nomes claros, em vez de voltar a gravar repetidamente uma imagem já comprimida através de outro processo com perdas.
5. Escreva o texto alternativo de acordo com a função da imagem
Comece pelo conteúdo envolvente. As imagens informativas precisam de uma alternativa textual que transmita o seu significado relevante; as imagens decorativas usam normalmente um alt="" vazio. Se uma imagem fornecer o nome acessível de uma ligação ou botão, descreva a ação ou o destino. Os diagramas complexos precisam de uma explicação mais completa disponível nas proximidades. A árvore de decisão da W3C para o texto alternativo ajuda a distinguir estas situações.
Por exemplo, um pormenor numa página sobre materiais pode usar “Puxador de latão escovado com bordo arredondado”. Um ícone com ligação para descarregar um ficheiro precisa de indicar a finalidade desse ficheiro, não de descrever a seta. Um brilho decorativo atrás de um título não deve anunciar “fundo azul brilhante” a cada utilizador de leitor de ecrã. A mesma imagem pode precisar de uma alternativa diferente noutra página porque a sua função mudou.
Escreva de forma concisa e natural, incluindo apenas os detalhes que ajudem a substituir a informação visual relevante. Não encha o atributo de palavras-chave dos serviços. Verifique se uma legenda ou um parágrafo adjacente já transmite a mesma informação e evite tornar a leitura desnecessariamente repetitiva. Traduza as alternativas juntamente com a página, incluindo qualquer significado afetado por etiquetas ou capturas de ecrã localizadas.
Reveja a página com as imagens indisponíveis e inspecione os nomes acessíveis das ligações com imagens. Isto permite detetar informação em falta e anúncios duplicados que uma revisão visual pode não revelar. As verificações automáticas podem assinalar um atributo em falta, mas não conseguem avaliar de forma fiável se uma frase descreve o elemento certo.
6. Carregue a imagem importante no momento certo
A imagem principal visível à entrada não deve ser atrasada pelo carregamento diferido. As imagens mais abaixo na página são candidatas a loading="lazy". Reserve também o espaço delas. As orientações do web.dev sobre carregamento diferido explicam por que motivo as imagens inicialmente visíveis precisam de um tratamento diferente das que ficam fora da área inicial de visualização.
Verifique qual é a imagem que efetivamente se torna o maior elemento visível da página. Um banner decorativo grande pode competir com o título e o conteúdo útil. Se a imagem principal for provavelmente o elemento Largest Contentful Paint, torne-a detetável cedo e avalie se é adequado atribuir-lhe prioridade elevada de obtenção. Dar prioridade elevada a todas as imagens elimina essa distinção útil.
Teste com um carregamento novo e uma ligação limitada, percorrendo depois toda a página. Procure espaços que continuam vazios, deslocações visíveis do conteúdo e transferências muito maiores do que os espaços de apresentação exigem. Trate uma auditoria local de desempenho como evidência sobre a página e a configuração testadas, não como uma promessa para a ligação ou o dispositivo de todos os visitantes.
7. Use uma ficha de decisões antes de exportar
Guarde este pequeno registo na pasta de materiais. Liga uma decisão visual a uma verificação de implementação e dá ao próximo editor algo mais útil do que um nome de ficheiro terminado em “final”. Preencha uma linha por função quando o mesmo original aparecer em vários locais.
| Decisão | Registar e verificar |
|---|---|
| Finalidade e origem | O que a imagem explica; ficheiro original; registo de autorização ou aprovação. |
| Local e recorte | Página e espaço; larguras de apresentação; ponto focal; recorte para telemóvel. |
| Exportação | Formato escolhido; dimensões em píxeis; tamanho do ficheiro; definições; revisão visual. |
| Alternativa | Função informativa, decorativa ou funcional; texto localizado; explicação próxima. |
| Entrega | Variantes responsivas; dimensões reservadas; comportamento de carregamento; URL publicado. |
Imagine uma loja de cerâmica hipotética a preparar uma fotografia de uma taça para uma página de produto. O original é uma fotografia aprovada com 4000 píxeis de largura. A equipa verifica o espaço real do produto, exporta duas larguras úteis, compara JPEG e WebP e escolhe a versão que preserva o detalhe do vidrado. O recorte para telemóvel mantém o bordo visível. A alternativa descreve o acabamento relevante; o texto adjacente do produto apresenta as dimensões e as instruções de conservação.
Este exemplo é um processo de decisão, não uma receita obrigatória de exportação nem um resultado obtido para um cliente. Um pormenor de textura, um diagrama de dimensões e uma imagem decorativa de campanha levariam a escolhas diferentes. Registe a razão de cada exceção para que a atualização seguinte não a anule.
8. Verifique a descoberta e a página final
Use elementos de imagem normais para conteúdo significativo, disponibilize uma alternativa funcional em src e mantenha os URLs das imagens acessíveis aos rastreadores quando pretende que sejam descobertas. Use nomes de ficheiro descritivos e coloque as imagens junto de texto relevante. As orientações da Google sobre SEO para imagens explicam estas práticas e referem também que a Google não indexa imagens de fundo em CSS. Estas verificações ajudam na descoberta, mas não garantem indexação nem posições nos resultados.
- Confirme a imagem aprovada, o recorte e a alternativa em todos os idiomas publicados.
- Verifique o ficheiro responsivo selecionado, as dimensões intrínsecas e o comportamento de carregamento.
- Siga as ligações de imagens com o teclado e confirme que os seus nomes fazem sentido.
- Inspecione a pré-visualização para redes sociais separadamente; pode usar outro recorte e outro ficheiro.
- Mantenha o original, as definições de exportação e o registo de autorização disponíveis para a próxima atualização.
Se a preparação de imagens fizer parte de um projeto de website mais amplo, consulte o serviço de websites da Digital Studio e inclua os materiais existentes e as imagens em falta no seu briefing do website. Uma lista clara de materiais ajuda o projeto a começar com decisões concretas sobre o que manter, substituir ou criar.
