💡 Dica de responsividade: Use sempre max-width: 100% e height: auto como base. Use object-fit para controles avançados.
🎨 Figure e Figcaption
IMAGEM DE EXEMPLO
(Paisagem de montanha)
🏔️ Vista panorâmica da Serra da Mantiqueira ao amanhecer
GRÁFICO DE EXEMPLO
(Vendas 2024)
📊 Crescimento de vendas no primeiro trimestre de 2024
<figure>
<img src="paisagem.jpg" alt="Vista da montanha">
<figcaption>
Vista panorâmica da Serra da Mantiqueira ao amanhecer
</figcaption>
</figure>
<figure>
<img src="grafico.png" alt="Gráfico de vendas">
<figcaption>
Crescimento de vendas no primeiro trimestre de 2024
</figcaption>
</figure>
🚀 Vantagens do Figure: Melhor semântica, acessibilidade aprimorada, SEO otimizado e agrupamento lógico de imagem + legenda.
📁 Formatos de Imagem
🖼️
JPEG (.jpg)
Uso: Fotos
Vantagem: Arquivo pequeno
Desvantagem: Perde qualidade
🎨
PNG (.png)
Uso: Logos, ícones
Vantagem: Transparência
Desvantagem: Arquivo maior
🎬
GIF (.gif)
Uso: Animações
Vantagem: Movimento
Desvantagem: Poucas cores
📐
SVG (.svg)
Uso: Ícones, logos
Vantagem: Escalável
Desvantagem: Complexo para fotos
⚡
WebP (.webp)
Uso: Web moderna
Vantagem: 30% menor
Desvantagem: Suporte limitado
<!-- Escolha o formato certo -->
<img src="foto.jpg" alt="Foto de família"> <!-- JPEG para fotos -->
<img src="logo.png" alt="Logo da empresa"> <!-- PNG para logos -->
<img src="icone.svg" alt="Ícone de menu"> <!-- SVG para ícones -->
<img src="animacao.gif" alt="Loading..."> <!-- GIF para animações -->
<!-- Fallback para WebP -->
<picture>
<source srcset="imagem.webp" type="image/webp">
<img src="imagem.jpg" alt="Descrição">
</picture>
<!-- Imagem como link -->
<a href="pagina-destino.html">
<img src="banner.jpg" alt="Clique para saber mais">
</a>
<!-- Imagem com link externo -->
<a href="https://site.com" target="_blank" rel="noopener">
<img src="logo-parceiro.png" alt="Visite nosso parceiro">
</a>
<!-- CSS para efeito hover -->
<style>
.link-img {
transition: transform 0.3s ease;
}
.link-img:hover {
transform: scale(1.05);
}
</style>
⚡ Otimização e Performance
<!-- Lazy Loading - carrega apenas quando necessário -->
<img src="imagem-pesada.jpg" alt="Descrição" loading="lazy">
<!-- Srcset para diferentes resoluções -->
<img src="pequena.jpg"
srcset="pequena.jpg 480w,
media.jpg 800w,
grande.jpg 1200w"
sizes="(max-width: 480px) 100vw,
(max-width: 800px) 50vw,
25vw"
alt="Imagem responsiva">
<!-- Picture para diferentes formatos -->
<picture>
<source media="(min-width: 800px)" srcset="desktop.webp">
<source media="(min-width: 400px)" srcset="tablet.webp">
<img src="mobile.jpg" alt="Imagem adaptativa">
</picture>
<!-- Preload para imagens críticas -->
<link rel="preload" as="image" href="hero-image.jpg">
💡 Dicas de otimização:
✅ Use loading="lazy" para imagens abaixo da dobra
✅ Comprima imagens antes de subir (TinyPNG, ImageOptim)
✅ Use WebP quando possível
✅ Implemente srcset para diferentes telas
✅ Use ferramentas como Lighthouse para medir performance