O título está escolhido, as cores resultam e os horários e preços já estão na página. Mesmo assim, ainda parece um modelo. As fotografias podiam estar no site de qualquer outro atelier.
Trocar as fotografias de um modelo HTML pelas suas é muitas vezes um dos últimos acertos antes de publicar. O mesmo acontece com uma página criada com IA ou entregue por um designer. A estrutura pode já estar bem resolvida, enquanto as imagens ainda precisam de mostrar os produtos, os serviços ou a coleção atual. Na página original, é possível avaliar cada fotografia ao lado do texto que a acompanha.
A página do atelier de cerâmica fictício Claywell dá-nos dois exemplos. Na abertura, a fotografia de uma bancada de trabalho toma o lugar de uma natureza-morta a preto e branco. Mais abaixo, uma ilustração de uma única taça substitui a fotografia de um conjunto de loiça.
Mudar imagens diretamente na página HTML que já tem
Abra o ficheiro no editor de ficheiros HTML online do HtmlDrag através de «Carregar HTML». O ficheiro do Claywell já inclui as imagens, o tipo de letra e os estilos originais. Assim, pode editar com a página do curso no seu conjunto à vista.
Antes de escolher uma fotografia, veja o que as imagens existentes fazem na página. Na abertura do Claywell, uma natureza-morta está ao lado de um cartão amarelo com informações do curso e de um plano aproximado de mãos a moldar barro. Ao trocar a fotografia da esquerda, pode avaliar o resultado com o título, o preço e a fotografia da direita à vista.
Escolher imagens a partir do que os visitantes querem ver
Uma loja de cerâmica e uma página de um curso podem usar fotografias semelhantes, mas quem as visita procura coisas diferentes. As peças acabadas mostram o resultado. Uma bancada com barro e ferramentas ajuda a imaginar como é fazer uma peça. Numa página para principiantes, é essa possibilidade de participar que a primeira fotografia deve transmitir.
Mais abaixo, na secção sobre o material, o visitante já quer ver os pormenores. Ao lado do título «Não há uma forma perfeita», uma única taça mostra o rebordo irregular e a textura do vidrado com mais clareza do que várias chávenas e pratos juntos. Cada imagem responde a uma pergunta diferente.
| Lugar e função | Imagem a procurar | O que deve ficar visível |
|---|---|---|
| Imagem de abertura ou cena de atividade | Uma cena que se entenda de imediato, com margem à volta do motivo. | A atividade num relance, ao lado do título e do botão principal. |
| Pormenor de produto ou material | Um motivo único, com boa luz e espaço à volta dos contornos importantes. | A forma, o acabamento e o pormenor referido no texto. |
| Imagem de apoio | Outro ângulo, uma textura ou um plano aproximado. | Um pormenor que a fotografia principal não mostra. |
Ao escolher os ficheiros, considere as proporções, a margem em torno do motivo e os pormenores que serão visíveis no tamanho final. Mesmo uma fotografia horizontal pode perder uma parte importante num quadro estreito. Uma imagem vertical com espaço à volta do motivo pode funcionar num quadro mais largo.
É útil escrever algumas indicações antes de procurar num arquivo de imagens ou pedir a alguém que prepare as fotografias.
Esta página apresenta um curso de cerâmica para principiantes. Para a abertura, escolher uma fotografia da bancada. Para a secção sobre o material, usar uma imagem em que uma única taça se veja bem. Deixar margem à volta das mãos e do rebordo da taça para os recortes no computador e no telemóvel. Manter a composição e as informações do curso já aprovadas e escolher imagens fiéis ao que está a ser apresentado.
As fotografias originais do Claywell são o ponto de partida. Na abertura havia uma natureza-morta. Na secção sobre o material, um conjunto de loiça. O texto ao lado de cada imagem ajuda a perceber o que deve ocupar aquele lugar.
Substituir a fotografia principal na composição original
A fotografia nova mostra as ferramentas, o barro e a bancada onde se trabalha. À direita, o plano aproximado das mãos mostra os movimentos de modelação. Em conjunto, as fotografias situam a atividade e mostram o que se faz no atelier.
No HtmlDrag, clique com o botão direito na fotografia que pretende mudar e escolha «Substituir imagem…». Quando há imagens e cartões muito próximos uns dos outros, confirme que selecionou a fotografia certa.
A janela inclui «Carregar do dispositivo» para usar um ficheiro do computador e «Usar imagem online» para indicar o URL de uma imagem alojada. Neste exemplo, carregámos o ficheiro local com a fotografia da bancada.
Depois da troca, volte a olhar para o início da página. Uma fotografia com mais pormenores chama a atenção, mas o preço do curso e o botão principal continuam a ter de ser fáceis de encontrar. É difícil avaliar esse equilíbrio só pela miniatura do ficheiro.
Aqui, a textura da bancada destaca-se ao lado do cartão amarelo mais simples. Mesmo depois do recorte, a cena percebe-se. Na sua página, veja se a fotografia explica a atividade e se é fácil passar do título para o botão principal.
Dar destaque a um pormenor de cada vez
Uma imagem de pormenor deve mostrar bem uma característica. Na cerâmica pode ser o rebordo, o vidrado ou a textura da superfície. Noutro produto pode ser um fecho, o acabamento ou um rótulo. Comece pelo que quer mostrar e escolha a distância do enquadramento a partir daí.
Para a segunda troca no Claywell, usámos uma ilustração de uma taça preparada previamente com IA. O vidrado claro e o contorno irregular fazem sentido ao lado do texto sobre a forma das peças.
Para esta imagem, usámos a mesma função de substituição. O ficheiro é vertical, mas a área da fotografia no computador é mais larga. O fundo à volta da taça permite recortar sem cortar o rebordo.
No plano aproximado vê-se a taça inteira ao lado da explicação. Vale a pena fazer a mesma pergunta em imagens de produto ou material: o pormenor que o texto descreve vê-se na imagem? Se desaparecer uma parte importante, experimente uma fotografia menos fechada ou outro recorte antes de mudar a composição da página.
Porque é que a nova imagem aparece cortada ou desfocada?
O ficheiro e a área onde é apresentado podem ter proporções diferentes. Nesse caso, a página pode cortar parte da imagem para preencher o espaço. A propriedade CSS object-fit: cover, por exemplo, mantém as proporções e corta o que ultrapassa a área.
É por isso que uma fotografia pode aparecer inteira na galeria e ficar cortada no site. Observe os limites do motivo na página e escolha um recorte que preserve os pormenores importantes. Esticar a imagem para a fazer caber pode alterar a forma do objeto que quer mostrar.
A pré-visualização no computador permite avaliar a primeira impressão ao tamanho normal de leitura. Percebe-se logo em que consiste a atividade? A imagem combina com o título? O botão principal encontra-se sem esforço?
Na secção sobre o material, a taça precisa de espaço para que se veja a sua forma e superfície enquanto se lê o texto. Abra a página na posição de cada imagem. Uma vista reduzida da página inteira pode esconder alguns problemas.
Se a imagem está desfocada, comece pelo ficheiro original. Ampliar uma miniatura para preencher um espaço grande não recupera os pormenores em falta. Escolha um original adequado, exporte-o para a web e confira o resultado no tamanho em que vai aparecer. Mostrá-lo mais pequeno na página, por si só, não reduz o tamanho do ficheiro descarregado.
Guardar as alterações e verificar a vista no telemóvel
Quando as duas fotografias estiverem bem integradas na página, use «Guardar versão». Se precisar do HTML para publicar no seu site, a janela de exportação inclui «Transferir HTML» e «Copiar HTML» na opção «HTML editado».
As duas substituições ficaram guardadas no projeto Claywell. É possível voltar a editar a secção sobre o material a partir desta versão, quando mudarem as datas, os produtos ou as fotografias da época.
Veja também a página à largura de um telemóvel. A área da fotografia pode ficar mais estreita, uma imagem de apoio pode deixar de aparecer e as informações do curso podem mudar de posição. Confirme que o motivo principal ainda se percebe. Na vista mais estreita do Claywell, a nova fotografia da bancada aparece ao lado do cartão amarelo.
Depois de mudar uma imagem, pode notar que falta uma frase de contexto. Pode inserir uma legenda sobre o material ou acrescentar uma ligação da fotografia de produto à respetiva ficha. Se os visitantes precisarem de comparar opções de curso, o HtmlDrag permite inserir uma tabela e editar as células, as linhas e as colunas.
Ao ajustar o conteúdo à volta das imagens, pode bloquear elementos já concluídos para reduzir o risco de os mover por engano. Também pode eliminar um elemento de uma promoção que já terminou. São pequenas alterações que ajudam a manter as imagens alinhadas com o conteúdo atual.
Antes de usar a página atualizada, confirme os pontos seguintes.
- As fotografias previstas foram substituídas e os motivos principais distinguem-se bem.
- Os pormenores importantes são visíveis no computador e no telemóvel.
- As imagens preparadas para a web estão nítidas no tamanho em que aparecem.
- As legendas, os textos alternativos e os créditos correspondem às novas imagens.
- As imagens com ligação abrem a página pretendida.
- A versão guardada e o HTML a publicar incluem as alterações.
Se mudou o motivo da fotografia, reveja também o texto alternativo. O guia da Google sobre imagens recomenda texto alternativo útil e coerente com a página. Descrever concretamente o que a imagem mostra ajuda mais do que repetir palavras-chave.
Perguntas frequentes sobre substituir imagens em HTML
Posso mudar imagens numa página HTML criada com IA?
Sim, desde que o ficheiro HTML abra corretamente no editor. Veja se os estilos e as imagens carregam, selecione a fotografia a substituir e aplique a nova. Se já tiver a imagem preparada, pode usá-la diretamente e evitar um novo pedido à IA.
Devo carregar um ficheiro ou usar o URL da imagem?
Carregue o ficheiro se já tiver a imagem aprovada no computador. Use um URL se a imagem estiver alojada num endereço estável e acessível. Confirme que o endereço abre diretamente o ficheiro da imagem. Se só tiver a ligação para uma galeria ou página de início de sessão, procure primeiro o endereço da própria imagem.
Posso usar uma fotografia vertical numa área horizontal?
Depende do espaço em torno do motivo. Na imagem da taça do Claywell, o fundo deixa margem suficiente para um recorte mais largo. Uma fotografia demasiado fechada pode perder pormenores importantes. Veja como fica na área real da página e à largura de um telemóvel.
Ao substituir a imagem, a legenda ou a ligação mudam também?
A imagem, a legenda, o crédito e o destino da ligação precisam de ser verificados separadamente. Depois da troca, veja se o texto descreve a imagem nova e se a ligação, quando existe, abre a página certa.
Qual deve ser o tamanho de uma imagem de substituição?
Escolha uma resolução adequada à área em que a imagem vai aparecer e um tamanho de ficheiro apropriado para a web. Uma fotografia grande de abertura costuma precisar de mais pormenor do que a imagem de um cartão pequeno. Veja o resultado na página e consulte o limite de carregamento em vigor.
Guardar a alteração atualiza o site que já está publicado?
As alterações ficam guardadas no projeto HtmlDrag. Se o site estiver alojado noutro local, use o HTML editado no processo de publicação desse site.
A fotografia da bancada ajuda a imaginar o que acontece no atelier. A imagem de uma única taça dá espaço à forma e ao vidrado. Se o seu modelo HTML ainda tiver fotografias provisórias ou antigas, abra-o no editor visual de HTML e substitua as fotografias onde já estão, com imagens que se ajustem a cada lugar.