Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Trabalhando com Imagens Clicáveis, Legendas e Otimização | Trabalhando com Mídia e Tabelas
HTML Definitivo
course content

Conteúdo do Curso

HTML Definitivo

HTML Definitivo

1. Compreendendo o Desenvolvimento Web
2. Tags e Atributos HTML
3. Estrutura do Documento HTML
4. Trabalhando com Mídia e Tabelas

book
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:

html

index.html

copy
  • 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 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.

question mark

Como tornar uma imagem clicável em uma página da web?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 3

Pergunte à IA

expand
ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

course content

Conteúdo do Curso

HTML Definitivo

HTML Definitivo

1. Compreendendo o Desenvolvimento Web
2. Tags e Atributos HTML
3. Estrutura do Documento HTML
4. Trabalhando com Mídia e Tabelas

book
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:

html

index.html

copy
  • 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 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.

question mark

Como tornar uma imagem clicável em uma página da web?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 3
Sentimos muito que algo saiu errado. O que aconteceu?
some-alt