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 elementosfigcaptionquantoimg;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!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Can you show me an example of how to use figure and figcaption with an image?
What are some best practices for making images accessible on the web?
Can you explain the difference between raster and vector graphic optimization?
Awesome!
Completion rate improved to 2.56Trabalhando com Imagens Clicáveis, Legendas e Otimização
Deslize para mostrar o menu
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 elementosfigcaptionquantoimg;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!
