# Preparar imagens para a web

Ajuste tamanho e corte, descreva conteúdo relevante e conserve originais e licenças. Uma imagem deve ter dimensão e proporção adequadas à sua função. Um projeto arquitetônico pode usar uma prévia leve e imagem maior quando necessária. Arquivo pequeno não serve se os detalhes ficam ilegíveis.

## Prepare imagens para o lugar onde serão usadas

Uma imagem deve ter dimensão e proporção adequadas à sua função. Uma capa ampla, uma miniatura de artigo e uma fotografia técnica não precisam necessariamente do mesmo ficheiro. Comece pelo espaço real no layout e pelos detalhes que precisam de continuar visíveis. Reduzir todos os recursos para um único tamanho pode criar perda de informação ou transferência desnecessária.

Revise o recorte em diferentes ecrãs. Uma fotografia horizontal pode perder o objeto principal numa área vertical. Quando isso acontece, ajuste o enquadramento ou utilize uma variante apropriada. A escolha não deve ficar totalmente dependente de um corte automático que ninguém inspecionou.

Declare dimensões ou proporção no layout para reservar espaço. Isso ajuda a evitar que o texto mude de posição quando a imagem chega. Verifique também o comportamento de imagens ausentes ou lentas. O sentido principal da página não deveria desaparecer apenas porque um recurso visual não foi carregado.

## Equilibre qualidade, formato e contexto

Formatos modernos podem reduzir transferência em muitos casos, mas a escolha deve considerar conteúdo e suporte necessário. Compare qualidade em tamanho de utilização, não apenas o ficheiro original ampliado. Uma fotografia com detalhe técnico exige avaliação diferente de um fundo decorativo.

Não carregue uma imagem muito maior apenas porque será reduzida por CSS. O navegador pode continuar a transferir o recurso completo. Variantes responsivas permitem escolher um tamanho mais adequado, desde que estejam configuradas corretamente. Confirme o recurso efetivamente solicitado no percurso de teste.

Texto importante dentro de uma imagem precisa de atenção. Uma fotografia de menu ou tabela pode ser difícil de ampliar e interpretar com tecnologias de assistência. Quando possível, publique essa informação também como conteúdo HTML estruturado. A imagem pode complementar a apresentação, sem ser o único meio de acesso aos dados.

## Inclua acessibilidade e direitos na preparação

O texto alternativo deve comunicar o conteúdo relevante da imagem no contexto da página. Não é um campo para acumular palavras-chave. Imagens puramente decorativas podem exigir tratamento diferente de fotografias que explicam um produto ou projeto. A decisão depende da função, não apenas do formato do ficheiro.

Confirme licença, autorização e créditos antes da publicação. Um recurso recebido numa conversa pode não estar autorizado para divulgação comercial. Registe origem e condições junto do inventário de imagens. Para fotografias de clientes ou espaços privados, avalie o nível de identificação necessário.

Na entrega, confira uma capa, uma miniatura e uma galeria com conteúdo real. Verifique recortes, nitidez, peso e textos alternativos. Organize nomes e versões para futuras substituições. Uma imagem bem preparada combina apresentação fiel, carregamento adequado e informação acessível, mantendo claro de onde veio e em que condições pode continuar a ser utilizada. Mantenha o original separado das versões publicadas quando os direitos permitirem. Essa organização possibilita novos recortes sem ampliar um ficheiro já reduzido e evita confundir a imagem de origem com a variante preparada para uma posição específica.

## Lista prática

- Escolher proporção
- Declarar dimensões
- Inspecionar compressão

**Um exemplo concreto:** Um projeto arquitetônico pode usar uma prévia leve e imagem maior quando necessária.

**Um limite importante:** Arquivo pequeno não serve se os detalhes ficam ilegíveis.

## Próximo passo

[Conte seu projeto à Orvunweb](/pt/iniciar-projeto/)

## Leituras relacionadas

- [Fotografia, tipografia e cores para sites](/pt/blog/fotografia-tipografia-e-cores-para-sites/)
- [Escolhas que deixam um site lento](/pt/blog/escolhas-que-deixam-um-site-lento/)
- [Apresentar um portfólio de arquitetura](/pt/blog/apresentar-um-portfolio-de-arquitetura/)
- [Site empresarial](/pt/servicos/site-empresarial/)
- [Comparar pacotes](/pt/pacotes/)


## Serviços relacionados

- [Site empresarial](/pt/servicos/site-empresarial/)

---

Locale: pt
Canonical: https://orvunweb.com/pt/blog/preparar-imagens-para-a-web/
Updated: 2026-09-16


- [W3C WAI — Images](https://www.w3.org/WAI/tutorials/images/)