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:
✔️ Usewidth:100%eheight:autopara 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:
💡 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!
