Pular para conteúdo

Aula 05 - Imagens e SVG 🖼️

Dando Vida e Cor ao seu Site

👋 Olá!

Um site sem imagens é como um livro sem capa.

Hoje vamos aprender a inserir e otimizar conteúdos visuais! 📸

Agenda de Hoje 📅

  1. A Tag
  2. Atributos Fundamentais
  3. Formatos: Raster vs Vetor
  4. O Poder do SVG
  5. Caminhos de Arquivos
  6. Performance e Otimização

📸 1. A Tag

  • Tag auto-contida (não fecha).
  • Depende essencialment de atributos. 
<img src="foto.jpg" alt="Descrição">

Atributo src 🔗

  • Source (Origem).
  • É o caminho onde a imagem está salva.

Atributo alt 🗣️

  • Alternative Text.
  • Para leitores de tela (acessibilidade).
  • Para o Google (SEO).
  • Importante: Se a imagem não carregar, o texto aparece.

📂 2. Formatos de Imagem

Raster (Pixels) 🟦

  • Feitas de pequenos pontos.
  • Perdem qualidade se aumentarem muito.
  • Ex: JPG, PNG, WebP.

Vetor (Matemática) 📈

  • Feitas de fórmulas geométricas.
  • Qualidade infinita!
  • Ex: SVG.

Qual escolher? 🤔

  • JPG: Fotos complexas.
  • PNG: Transparência.
  • WebP: Versão moderna e leve de tudo.
  • SVG: Logos e ícones.

⚡ 3. O Mundo SVG

O que é? 🎨

  • Scalable Vector Graphics.
  • É código Puro! 💻
  • Pode ser editado com CSS.

Exemplo de Código SVG

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

📊 Vantagem Visual

graph LR
    Raster[Raster - Pixels] -- Aumentar --> Blur[Fica Embaçado]
    Vector[Vetor - SVG] -- Aumentar --> Sharp[Continua Nítido]

🛣️ 4. Organização de Arquivos

Onde colocar as imagens?

Pasta de Assets 📁

  • Nunca deixe imagens soltas na raiz.
  • Crie uma pasta assets ou imagens.

Caminhos Relativos 📍

  • Se a imagem está na pasta assets: 
<img src="assets/perfil.webp">

🚀 5. Performance

  • Imagens pesadas matam o site. 💀
  • Use ferramentas de compressão.
  • Prefira WebP sempre que possível.

Resumo da Aula ✅

  • <img> precisa de src e alt.
  • alt é obrigatório para acessibilidade.
  • SVG é código e não perde qualidade.
  • Organize imagens em pastas.

Próxima Aula 📊

Tabelas

Vamos aprender a organizar dados de forma estruturada!

Dúvidas? 🤔

"Uma imagem vale mais que mil palavras, mas uma imagem otimizada vale mil visitas."