Imagens Clicáveis

Imagens clicáveis são imagens em uma página web que podem ser clicadas, geralmente para navegar para outra página ou executar outras ações. Normalmente, essa abordagem é utilizada em lojas virtuais. Usuários estão acostumados a clicar em uma imagem e visualizar um cartão com a descrição completa do produto e o preço.

Para tornar uma imagem clicável, é possível envolver a tag <img> dentro de uma tag <a>. Por exemplo:

Neste exemplo, a tag <a> especifica a URL para a qual será feito o link no atributo href, e a tag <img/> especifica a imagem a ser exibida. Quando o usuário clica na imagem, o navegador irá navegar para a URL definida no atributo href.

Legenda de Imagem

É possível utilizar os elementos HTML figure e figcaption para associar uma legenda a uma imagem em uma página web. Veja um exemplo:

• figure: elemento que contém tanto os elementos figcaption quanto img;

• figcaption: especifica o texto da legenda, visível para os usuários;

• img: especifica a imagem a ser exibida.

Otimização de Imagens

Isto é importante para páginas web, onde arquivos de imagem grandes podem diminuir o tempo de carregamento e tornar o site mais lento. Seguindo as dicas a seguir, é possível melhorar o desempenho geral e a acessibilidade do site.

• Redimensionar imagens para o tamanho apropriado. Redimensione as imagens para o tamanho em que serão exibidas na página web, em vez de fazer upload de imagens grandes e redimensioná-las usando HTML ou CSS;

• Utilizar formatos de arquivo adequados. Geralmente, JPEGs são usados para fotografias, PNGs para gráficos e imagens com transparência. Evite arquivos BMP ou TIFF, que são maiores;

• Comprimir imagens. Existem diversas ferramentas online que podem comprimir imagens sem comprometer a qualidade. Faça isso antes de fazer upload das imagens para o site.

Nota

Você pode utilizar as seguintes fontes para comprimir imagens: Otimização de gráficos rasterizados, Otimização de gráficos vetoriais. Qual a diferença entre eles? - Considere isso no próximo capítulo.