Imagens de Propósito Especial

Imagens clicáveis

Imagens clicáveis são imagens em uma página web nas quais se pode clicar, tipicamente para navegar para outra página web ou realizar outras ações. Geralmente, precisamos dessa abordagem ao lidar com lojas online. Os usuários se acostumam a clicar na imagem e obter um cartão com uma descrição completa do produto e preço.

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

Neste exemplo, a tag <a> especifica a URL para a qual se deve linkar no atributo href, e a tag <img/> especifica a imagem a ser exibida. Quando o usuário clica na imagem, o navegador vai para o URL especificado no atributo href.

Legenda de imagem

Podemos usar os elementos HTML figure e figcaption para associar uma legenda a uma imagem em uma página web. Aqui está 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

A otimização de imagens é essencial para páginas web, onde arquivos grandes podem diminuir o tempo de carregamento e deixar o site lento. Seguindo as dicas a seguir, podemos melhorar significativamente o desempenho e a acessibilidade do site.

• Redimensione as imagens para o tamanho apropriado. Ajuste o tamanho das imagens para o que será exibido na página web, em vez de carregar imagens grandes e redimensioná-las usando HTML ou CSS;
• Use formatos de arquivo apropriados. Geralmente, utilizamos JPEG para fotografias e PNG para gráficos e imagens com transparência. Evite arquivos maiores em BMP ou TIFF;
• Comprima as imagens. Há uma enorme quantidade de ferramentas online que podem comprimir imagens sem comprometer a qualidade. Faça isso antes de fazer o upload das imagens para o site.

Nota

Podemos usar as seguintes fontes para comprimir imagens: otimização de gráfico raster, otimização de gráfico vetorial. Qual é a diferença entre eles? - Vamos considerar isso no próximo capítulo.