Documentação: Imagens Dinâmicas, Áudio e Vídeo em HTML

Baseado no Capítulo 11 do Curso de HTML/CSS do Prof. Gustavo Guanabara

1. Imagens Dinâmicas

Conceito

Imagens que se adaptam automaticamente ao tamanho da tela do usuário, melhorando a performance e a experiência em dispositivos móveis.

Tags e Atributos

• <picture>: Contêiner para definir múltiplas fontes de imagem.
• <source>: Define condições para carregar diferentes imagens.
  • Atributos:
    • media: Define a condição de tamanho da tela (ex: (max-width: 750px)).
    • srcset: Caminho da imagem a ser carregada.
    • type: Formato da imagem (ex: image/png).
• <img>: Imagem padrão (fallback).

Exemplo de Código

<picture>
    <source media="(max-width: 750px)" srcset="imagem-pequena.png" type="image/png">
    <source media="(max-width: 1050px)" srcset="imagem-media.png" type="image/png">
    <img src="imagem-grande.png" alt="Imagem flexível">
</picture>

Boas Práticas

• Use imagens em três tamanhos (ex: 300px, 700px, 1000px).
• Reduza o tamanho do arquivo (em bytes) para evitar sites lentos.
• Teste a ordem das tags <source> (do menor para o maior tamanho).

2. Áudio em HTML

Tag <audio>

Reproduz arquivos de áudio diretamente no navegador.

Atributos Principais

• controls: Exibe controles de play/pause.
• autoplay: Inicia a reprodução automaticamente.
• loop: Repete o áudio indefinidamente.
• preload: Define o pré-carregamento:
  • metadata: Carrega apenas informações básicas.
  • none: Não carrega até o usuário interagir.
  • auto (padrão): Carrega o arquivo inteiro.

Formatos Suportados

• MP3 (mais compatível), OGG, WAV.

Exemplo de Código

<audio controls preload="metadata">
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    <p>Seu navegador não suporta áudio. <a href="audio.mp3">Baixe o arquivo</a></p>
</audio>

3. Vídeo em HTML

Tag <video>

Reproduz vídeos hospedados localmente.

Atributos Principais

• width: Define a largura do vídeo.
• poster: Imagem de capa antes da reprodução.
• controls: Exibe controles de reprodução.
• autoplay: Inicia automaticamente (pode ser bloqueado por navegadores).

Formatos Suportados

• MP4 (recomendado), WEBM, OGG.

Exemplo de Código

<video width="600" poster="capa.jpg" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <p>Seu navegador não suporta vídeos.</p>
</video>

4. Hospedagem Externa de Vídeos

Por que usar?

• Reduz consumo de banda do servidor.
• Melhora a compatibilidade com dispositivos.

Serviços Recomendados

• YouTube:
  • Gratuito, mas vídeos públicos.
  • Use <iframe> para incorporar.
• Vimeo:
  • Permite vídeos privados (pago).
  • Ideal para conteúdos exclusivos.

Exemplo de Incorporação (YouTube)

<iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/ID_DO_VIDEO" 
    frameborder="0" 
    allowfullscreen>
</iframe>

5. Ferramentas Úteis

• GIMP: Editor de imagens gratuito para redimensionar e otimizar arquivos.
• Handbrake: Conversor de vídeos para formatos compatíveis (MP4, WEBM).

6. Impacto no SEO e Experiência do Usuário

• Sites lentos penalizam a indexação no Google.
• Imagens/vídeos não otimizados aumentam a taxa de rejeição (usuários abandonam o site).
• Sempre priorize:
  • Balanceamento entre qualidade e tamanho de arquivo.
  • Uso de media queries e tags semânticas.

Dica Final: Acesse o repositório do curso para exercícios práticos e desafios! 🚀