Uma fotografia de arquitetura existe para ser vista grande. É esse o ponto: a escala, a luz a atravessar um vão, o encontro de dois materiais. Reduzida a uma miniatura, deixa de dizer aquilo que tinha para dizer.
O ficheiro que sai da máquina não é o que a página serve
Os originais de alta resolução servem para arquivo e impressão. Para o site, confirme se a plataforma cria e serve versões adequadas a cada ecrã. Reduzir a imagem apenas na folha de estilos não reduz o ficheiro que o navegador descarrega.
Entre o original e a página há uma preparação, e ela não é um detalhe de implementação: é o produto. O original fica intacto no arquivo. O que a página serve são derivados, e cada um responde a três perguntas: em que larguras a imagem vai mesmo aparecer no desenho, até onde se pode comprimir antes de a diferença se notar nessa largura, e em que formato o navegador a lê melhor.
A imagem de abertura pode determinar o tempo de espera
A LCP mede quando aparece o maior elemento de conteúdo visível no ecrã, que pode ser uma imagem, texto ou vídeo. O limiar considerado bom é 2,5 segundos ou menos no percentil 75 dos carregamentos, avaliando telemóvel e computador separadamente. Uma fotografia de abertura pode ser esse elemento; confirma-se na medição da página. Explicamos as três métricas no artigo o seu site no telemóvel de um cliente.
As imagens visíveis quando a página abre devem carregar sem adiamento. Nas que ficam fora dessa primeira área, loading="lazy" permite ao navegador adiar o pedido até se aproximarem do ecrã. Para a imagem importante de abertura, fetchpriority="high" sugere uma prioridade superior. O navegador decide como organizar os pedidos; convém confirmar o resultado num telemóvel.
Escolher o formato pela fotografia
WebP e AVIF são opções para reduzir o tamanho das fotografias face a um JPEG de qualidade visual semelhante. O resultado depende da imagem e da compressão escolhida. Compare as versões no tamanho em que serão vistas: a textura da pedra e os detalhes de uma fachada não devem desaparecer para baixar o peso do ficheiro.
A MDN documenta o suporte destes formatos nos principais navegadores e recomenda uma alternativa para AVIF. O elemento picture permite oferecer AVIF e manter outra versão para um navegador que não o suporte.
Um telemóvel não tem de receber a imagem de um monitor
Enviar sempre o maior ficheiro pode gastar dados sem melhorar a imagem que a pessoa vê. Com srcset, a página indica as versões disponíveis; com sizes, indica o espaço que a imagem vai ocupar. O navegador pode escolher tendo em conta esse espaço e a densidade de píxeis do ecrã. Um telemóvel com um ecrã denso pode precisar de mais píxeis do que a sua largura aparente sugere.
Outra decisão é o que a MDN chama o problema de direção artística. Não é servir a mesma
fotografia mais pequena: é servir outro enquadramento. Um exterior largo, com o edifício
ao centro e o terreno à volta, pode funcionar num monitor e perder detalhe numa coluna estreita. Com
o elemento picture e uma condição de largura, o telemóvel recebe um corte
mais fechado, escolhido por quem escolheu o enquadramento e não pelo navegador.
Dimensões declaradas, para a página não saltar
A CLS mede a instabilidade visual causada por deslocações inesperadas do conteúdo, e o limiar considerado bom é 0,1 ou menos. As imagens sem espaço reservado são uma causa comum. Declarar width e height, ou reservar a proporção com CSS, ajuda o navegador a guardar o espaço da imagem antes de ela chegar.
Numa grelha de projetos, reservar espaço para as imagens ajuda a manter as ligações no lugar. Sem essa reserva, a chegada de uma fotografia pode deslocar o projeto em que a pessoa se preparava para tocar.
O arquivo é um problema de curadoria antes de ser técnico
Resolvida a parte mecânica, sobra a que nenhuma ferramenta resolve. Um atelier acumula obra, e é bom que acumule. A página que a mostra não pode acumular ao mesmo ritmo, senão deixa de ser um argumento e passa a ser um inventário. A distinção é esta: o arquivo é o registo completo do trabalho e serve o atelier; a página é uma seleção feita para alguém que ainda não decidiu se telefona. Podem coexistir. Não podem ser o mesmo objeto.
Uma ordem do projeto mais recente para o mais antigo é simples de manter, mas dá destaque à última obra. Se o visitante procura um tipo de obra, agrupar por habitação, reabilitação, interiores ou equipamento pode ser mais útil. A seleção deve ajudá-lo a encontrar trabalho relevante para o que pretende.
E depois há o que fica de fora, que é a parte difícil porque cada peça custou trabalho a alguém:
- As fotografias que precisam de ser explicadas para se perceberem.
- As variações do mesmo ângulo, guardadas porque nenhuma era claramente a melhor.
- As imagens de obra que não dizem nada a quem não esteve lá.
- Os concursos e os estudos, a menos que estejam identificados como tal. Nada aparece descrito como construído se não foi construído: é a única regra desta lista que não se negoceia.
Retire as imagens que repetem o mesmo argumento. Uma sequência escolhida deve ajudar a perceber o projeto sem obrigar o visitante a procurar entre variações do mesmo ângulo.
O que faz uma página de projeto merecer o seu comprimento
Uma página de projeto longa não é um defeito. É um defeito quando é longa sem razão. Ganha o comprimento quando cada peça faz alguma coisa que as outras não fazem:
- Uma linha, logo no topo, a dizer o que aquilo é: programa, ano, escala em palavras, e o lugar no grau de detalhe que o cliente autorizou tornar público.
- A primeira imagem escolhida para apresentar a ideia do projeto, mesmo que o visitante não continue a galeria.
- Um desenho: planta, corte ou implantação. É o que separa a página de um atelier de uma galeria de fotografias bonitas, e é o que um cliente atento procura quando quer perceber a ideia e não só o acabamento.
- Um parágrafo de intenção, curto, escrito para quem não é do meio.
- Créditos: fotografia, especialidades, construção. O que a licença das fotografias permite confirma-se com o fotógrafo antes de publicar, não depois.
- Texto alternativo adequado à função da imagem. Nas fotografias informativas, descreva o que importa; nas imagens puramente decorativas, use
alt="". Se uma imagem funciona como ligação, o nome acessível deve permitir perceber o destino.
E o que não ganha o comprimento: o parágrafo que descreve por palavras o que a fotografia ao lado já mostra.
Peça para ver como entra a próxima obra
Antes de escolher quem constrói o site, leve um projeto representativo e peça uma demonstração: acrescentar título, imagens e créditos, preparar a versão inglesa, rever no telemóvel e publicar. Confirme quem faz cada passo e se uma alteração exige intervenção da agência.
Peça também para testar o percurso até ao contacto: o visitante consegue identificar o projeto sobre o qual está a perguntar? A equipa recebe esse contexto e sabe em que língua responder? Estas são perguntas para a demonstração e para a proposta, não funcionalidades que se devam dar por adquiridas.
Dar espaço à obra, com uma página bem preparada
Uma boa preparação permite procurar o equilíbrio entre detalhe, peso e facilidade de consulta. A seleção de projetos, as versões de imagem e a forma de atualizar o arquivo devem ser decididas em conjunto. É esse trabalho que apresentamos na nossa página para ateliers de arquitetura.
Traga um projeto representativo e explique-nos como o atelier publica novas obras. Podemos partir daí para perceber o que o site precisa de mostrar e quem o vai manter: marque uma chamada de 15 minutos.
Fontes
- O que a LCP mede e o limiar de 2,5 segundos: Largest Contentful Paint (LCP), web.dev.
- Os três limiares e o percentil 75 dos carregamentos reais: Web Vitals, web.dev.
- Não adiar o carregamento das imagens visíveis de início: Browser-level image lazy loading for the web, web.dev.
- Dimensões declaradas e reserva de espaço contra o salto da página: Optimize Cumulative Layout Shift, web.dev.
- Formatos de imagem e suporte de navegadores: Image file type and format guide, MDN.
- Troca de resolução,
srcset,sizese o problema de direção artística: Responsive images, MDN. - Valores de
loadinge defetchpriority: <img>: The Image Embed element, MDN. - Texto alternativo e função da imagem: Images Tutorial, W3C.
Fontes consultadas novamente a 10 de setembro de 2026. As recomendações de seleção e apresentação são critérios editoriais; não representam resultados medidos num atelier.