Como Inserir Imagens em Páginas HTML

Aprenda a usar a tag <img> para inserir imagens em suas páginas HTML. Descubra a importância dos atributos src, alt, width e height com exemplos práticos.

Como Inserir Imagens em Páginas HTML

Imagens são elementos visuais importantes que ajudam a enriquecer o conteúdo de um site, tornando-o mais atraente e informativo. Em HTML, a tag <img> é usada para inserir imagens. Neste post, vamos explorar como usar essa tag e seus principais atributos: src, alt, width e height.

Atributo `src`

O atributo src (source) especifica o caminho da imagem que você deseja inserir. Pode ser um caminho relativo ou absoluto. Aqui está um exemplo básico:

<img src="imagens/exemplo.jpg" alt="Descrição da imagem">

Exemplo de Imagem com `src`

Atributo `alt`

O atributo alt (alternative text) fornece um texto alternativo para a imagem, que é exibido caso a imagem não possa ser carregada. Também é importante para a acessibilidade e SEO:

<img src="imagens/exemplo.jpg" alt="Descrição detalhada da imagem">

Exemplo de Imagem com `alt`

<img src="imagens/exemplo.jpg" alt="Paisagem montanhosa ao pôr do sol">

Atributos `width` e `height`

Os atributos width e height são usados para definir a largura e altura da imagem, respectivamente. Esses atributos ajudam a controlar o tamanho da imagem na página:

<img src="imagens/exemplo.jpg" alt="Descrição da imagem" width="600" height="400">

Exemplo de Imagem com `width` e `height`

<img src="imagens/exemplo.jpg" alt="Descrição da imagem" width="600" height="400">

Exemplo Completo

Aqui está um exemplo completo de como usar a tag <img> com todos os atributos mencionados:

<img src="<https://www.exemplo.com/imagens/exemplo.jpg>" alt="Descrição detalhada da imagem" width="600" height="400">

Visualização do Exemplo Completo

!https://www.exemplo.com/imagens/exemplo.jpg

Dicas de SEO para Imagens em HTML

Use descrições detalhadas no alt: Isso melhora a acessibilidade e ajuda os mecanismos de busca a entenderem o conteúdo da imagem.
Otimize o tamanho da imagem: Imagens menores carregam mais rápido, melhorando o desempenho do site.
Use formatos adequados: Formatos como JPEG e PNG são comuns, mas considere o uso de formatos modernos como WebP para melhor compressão e qualidade.

Conclusão

Inserir imagens em suas páginas HTML é simples com a tag <img>. Entender e usar corretamente os atributos src, alt, width e height é fundamental para garantir que suas imagens sejam exibidas corretamente e contribuam para a acessibilidade e o SEO do seu site. Experimente adicionar imagens às suas páginas e veja como elas podem melhorar o conteúdo visual.