Conteúdo do Curso
HTML Definitivo
HTML Definitivo
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 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:
index.html
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
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.
Obrigado pelo seu feedback!