Trabalhando com Imagens Clicáveis, Legendas e Otimização

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 realizar outras ações. Normalmente, essa abordagem é utilizada em lojas online. Os 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:

• View the Code
• Open the Live Page

Neste exemplo, a tag <a> especifica a URL para a qual será feito o link no atributo href, e a tag <img/> indica a imagem a ser exibida. Quando o usuário clica na imagem, o navegador irá 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 abaixo, é possível melhorar o desempenho geral e a acessibilidade do site.

• Redimensionar imagens para o tamanho adequado. Redimensione as imagens para o tamanho em que serão exibidas na página web, em vez de enviar 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. 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 enviar as imagens para o site.