Código HTML para ampliar imagens para um site

Quer você esteja criando um site para vender seus produtos ou simplesmente mostrando a fotos de suas férias para seus amigos, você concluirá que uma imagem vale mais que mil palavras. Ao incluir muitas imagens grandes em uma página, ela pode ficar confusa, o que frustrará os usuários. A solução é mostrar versões menores das imagens na página através do uso de um código HTML simples e vinculá-las às maiores.

Vincular imagens grandes

A maneira básica de usar o código HTML para ampliar a imagem é basicamente vincular cada imagem grande a uma versão menor, chamada “miniatura”. Quando os leitores clicarem em uma imagem pequena, ela será carregada na tela para retornar à página anterior, use o botão “Voltar” no seu navegador. Este código faz uso de tags HTML e .

Benefícios

Existem vários benefícios para vincular imagens grandes através do uso de miniaturas. Como imagens grandes não são incluídas diretamente no site, cada página é carregada mais rapidamente, reduzindo o risco de os visitantes experimentarem conexões lentas e perder a paciência, gerando um site diferente. Além disso, os usuários decidirão por si próprios se desejam fazer upload de imagens maiores, em vez de serem impostas a eles, especialmente para aqueles que usam conexões com limites de download, bem como aqueles que pagam por sua conexão com base no valor do download . Esses usuários não excedem o limite para não precisar pagar dinheiro extra se não quiserem.

Considerações

O código básico é baseado nos visitantes que usam o botão “Voltar” para voltar para onde estavam. Isso pode confundir alguns usuários que podem fechar a janela que contém a imagem grande e, portanto, não há como retornar à página anterior. Uma alternativa é abrir cada imagem grande em uma nova janela, embora isso possa confundir os usuários da mesma maneira que eles podem não perceber a abertura da janela e se perguntar por que o botão “Voltar” não funciona. Outra alternativa é criar um arquivo HTML para cada imagem maior e um link para esse arquivo HTML em vez de ir diretamente para a imagem. Isso permite incluir um link que leva de volta à página anterior com cada imagem, obtendo simplicidade na navegação.

Alternativas

CSS e JavaScript oferecem maneiras de ampliar as imagens na mesma página, em vez de forçar o usuário a navegar por uma nova. A desvantagem desse método é que ele se baseia na inclusão de imagens grandes na página que ficam ocultas até que o usuário interaja com as imagens em miniatura. Se um lote de imagens estiver na página, o que aumenta é o tempo de carregamento da página exponencialmente. No entanto, esse método pode não funcionar para usuários que visitam sua página com um navegador antigo ou com seus smartphones.

Referências

 

Você pode estar interessado:

Deixe um comentário