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/> define a imagem a ser exibida. Quando o usuário clica na imagem, o navegador irá navegar para a URL especificada 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

Este é um aspecto importante para páginas web, pois arquivos de imagem grandes podem tornar o carregamento da página mais lento e deixar o site menos responsivo. Seguindo as dicas a seguir, é possível melhorar o desempenho geral e a acessibilidade do site.

• Redimensionar imagens para o tamanho adequado. Redimensionar as imagens para o tamanho em que serão exibidas na página, em vez de fazer upload de imagens grandes e redimensioná-las usando HTML ou CSS;
• Utilizar formatos de arquivo apropriados. Geralmente, JPEGs são usados para fotografias, PNGs para gráficos e imagens com transparência. Evitar arquivos BMP ou TIFF, que são maiores;
• Comprimir imagens. Existem diversas ferramentas online que permitem comprimir imagens sem perda de qualidade. Realizar a compressão antes de fazer upload das imagens para o site.