Imagens no HTML: Como Exibir e Manipular Imagens no HTML

As imagens no HTML são um dos elementos mais importantes para tornar uma página web atrativa e envolvente.

Neste post, você aprenderá:

✅ Como adicionar imagens ao HTML.
✅ Como definir tamanhos e formatos.
✅ Como otimizar imagens para diferentes dispositivos.
✅ Como criar mapas de imagem para links interativos.

Vamos lá! 🚀

---

Inserindo Imagens no HTML

Para adicionar imagens em HTML, utilizamos a tag <img>.

Exemplo básico:

<img src="imagens/gato.jpg" alt="Foto de um gato">

Entendendo os atributos:

✔️ src → Define o caminho da imagem.
✔️ alt → Texto alternativo, exibido se a imagem não carregar.
✔️ width e height → Define a largura e altura da imagem.

Exemplo com tamanhos definidos:

<img src="cachorro.jpg" alt="Foto de um cachorro" width="300" height="200">

💡 Dica: O texto alternativo (alt) também ajuda no SEO e na acessibilidade para pessoas com deficiência visual.

---

Imagens Locais x Imagens Externas

Podemos usar imagens de duas formas diferentes:

1️⃣ Imagem local (armazenada no próprio site)

<img src="imagens/logo.png" alt="Logo da empresa">

2️⃣ Imagem externa (hospedada em outro servidor)

<img src="https://exemplo.com/logo.png" alt="Logo da empresa">

💡 Dica:
✔️ Prefira imagens locais para manter controle sobre o carregamento.
✔️ Use imagens externas somente de fontes confiáveis para evitar problemas de carregamento.

---

Definindo o Tamanho da Imagem

Podemos definir a largura (width) e altura (height) diretamente no HTML ou usando CSS.

📌 Definição no HTML:

<img src="paisagem.jpg" alt="Foto de uma paisagem" width="500" height="300">

📌 Definição no CSS (Recomendado!):

<img src="paisagem.jpg" alt="Foto de uma paisagem" style="width:100%; height:auto;">

📌 Definição no CSS externo:

img {
    width: 100%;
    height: auto;
}

💡 Dica:
✔️ Use width:100% e height:auto para tornar a imagem responsiva.
✔️ Evite definir tamanhos fixos, pois podem quebrar o layout em telas menores.

---

Imagens Responsivas com HTML5

No HTML5, podemos usar a tag <picture> para carregar imagens diferentes dependendo do tamanho da tela.

Exemplo de código:

<picture>
    <source media="(max-width: 600px)" srcset="logo-pequena.png">
    <source media="(min-width: 1200px)" srcset="logo-grande.png">
    <img src="logo-padrao.png" alt="Logo da empresa">
</picture>

🔹 O que acontece aqui?

✔️ Se a tela for menor que 600px, o navegador carrega logo-pequena.png.
✔️ Se a tela for maior que 1200px, carrega logo-grande.png.
✔️ Se nenhuma regra for atendida, carrega logo-padrao.png.

💡 Dica: Use <picture> para otimizar imagens em sites responsivos!

---

Mapas de Imagem – Criando Links em Partes da Imagem

Os mapas de imagem permitem criar links clicáveis em diferentes áreas de uma mesma imagem.

Exemplo – Criando um mapa de imagem interativo:

<img src="mapa-do-brasil.png" usemap="#brasil" alt="Mapa do Brasil">

<map name="brasil">
    <area shape="circle" coords="137,231,71" href="rj.html" alt="Rio de Janeiro">
    <area shape="poly" coords="363,146,273,302,452,300" href="sp.html" alt="São Paulo">
    <area shape="rect" coords="520,160,641,302" href="mg.html" alt="Minas Gerais">
</map>

🔹 Como funciona?

✔️ usemap="#brasil" → Relaciona a imagem ao mapa.
✔️ <map name="brasil"> → Define um mapa interativo.
✔️ <area shape="circle" coords="x,y,radius" → Define áreas clicáveis (círculo, retângulo, polígono).

💡 Ferramentas para criar mapas de imagem:

✅ Image Map Generator
✅ Adobe Dreamweaver

---

Otimização de Imagens para a Web

Para otimizar imagens, siga estas dicas:

✔️ Use formatos adequados:

• JPEG → Melhor para fotos.
• PNG → Suporta transparência.
• SVG → Melhor para ícones e gráficos vetoriais.
• WEBP → Formato otimizado para web.

✔️ Comprima imagens para melhorar o carregamento:

✅ Ferramentas online:

• TinyPNG
• Squoosh

💡 Dica: Sempre use imagens leves para não prejudicar o tempo de carregamento da página.

---

Conclusão

📌 Resumo do que aprendemos hoje:

✅ Como adicionar imagens no HTML.
✅ Como definir tamanhos e responsividade.
✅ Como usar <picture> para carregar imagens otimizadas.
✅ Como criar mapas de imagem para links interativos.
✅ Como otimizar imagens para um site mais rápido.

Agora que você já domina imagens no HTML, no próximo post, vamos aprender sobre Tabelas em HTML! 🚀

💬 Dúvidas? Comente abaixo!

Navegação

<< Estilos CSS no HTML: Como Personalizar a Aparência das Páginas WebTabelas no HTML: Como Criar e Estruturar Dados >>