Conteúdo do Curso
HTML Supremo
HTML Supremo
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:
index
index
index
figure
- elemento que contém tanto os elementosfigcaption
quantoimg
;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.
Obrigado pelo seu feedback!