Imagens e Mídia no HTML5
Domine a incorporação de imagens, áudio e vídeo com HTML5. Este guia detalha o uso de <img>, <picture>, <audio> e <video>, com dicas de acessibilidade e responsividade.
O HTML5 trouxe avanços significativos na incorporação de mídias nas páginas web. Além de imagens, agora é possível incluir áudio e vídeo de forma nativa, sem a necessidade de plugins externos, como acontecia no passado.
Trabalhando com Imagens #
O Elemento <img /> #
O elemento <img /> permite inserir imagens na página.
Sintaxe Básica #
<img src="caminho-da-imagem.jpg" alt="Descrição da imagem" />
Atributos Comuns #
Atributo | Descrição |
|---|---|
| Caminho ou URL da imagem. |
| Texto alternativo, fundamental para acessibilidade e SEO. |
| Texto que aparece ao passar o mouse (opcional). |
| Largura da imagem em pixels ou porcentagem. |
| Altura da imagem em pixels ou porcentagem. |
Exemplo Completo #
<img src="logo.png" alt="Logotipo da empresa" width="200" />
Boas Práticas #
-
Sempre use o atributo
altpara melhorar a acessibilidade e SEO. -
Utilize imagens otimizadas para web (.webp, .jpg, .png).
-
Controle dimensões via CSS sempre que possível, mantendo o HTML limpo.
Imagens Responsivas com <picture> #
O elemento <picture> permite definir diferentes imagens para diferentes tamanhos de tela, otimizando o carregamento e responsividade.
Exemplo #
<picture>
<source media="(max-width: 600px)" srcset="imagem-pequena.jpg" />
<source media="(max-width: 1200px)" srcset="imagem-media.jpg" />
<img src="imagem-grande.jpg" alt="Descrição da imagem" />
</picture>
- O navegador escolhe a melhor imagem de acordo com a resolução do dispositivo.
Trabalhando com Áudio #
O Elemento <audio> #
Permite incorporar áudio diretamente na página.
Sintaxe Básica #
<audio controls>
<source src="musica.mp3" type="audio/mpeg" />
<source src="musica.ogg" type="audio/ogg" />
Seu navegador não suporta áudio HTML5.
</audio>
Atributos Comuns #
Atributo | Descrição |
|---|---|
| Exibe os controles de reprodução. |
| Inicia automaticamente (não recomendado na maioria dos casos). |
| Reproduz em loop. |
| Começa sem som. |
Boas Práticas #
-
Sempre ofereça pelo menos dois formatos de áudio para compatibilidade (
.mp3e.ogg). -
Inclua um texto alternativo dentro da tag
<audio>para navegadores que não suportam áudio.
Trabalhando com Vídeo #
O Elemento <video> #
Permite inserir vídeos diretamente na página, sem plugins externos.
Sintaxe Básica #
<video controls width="640">
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
Seu navegador não suporta vídeo HTML5.
</video>
Atributos Comuns #
Atributo | Descrição |
|---|---|
| Exibe controles de reprodução. |
| Inicia automaticamente. |
| Repete o vídeo. |
| Começa sem som. |
| Imagem exibida antes da reprodução começar. |
| Define dimensões do player. |
Exemplo com Poster #
<video controls width="640" poster="capa-do-video.jpg">
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
Seu navegador não suporta vídeo HTML5.
</video>
Comparação: Incorporar Vídeo HTML5 vs. YouTube #
Incorporando via YouTube #
<iframe width="560" height="315" src="https://www.youtube.com/embed/ID_DO_VIDEO"
frameborder="0" allowfullscreen></iframe>
-
Vantagem: Economia de banda, YouTube lida com a entrega.
-
Desvantagem: Dependência de terceiros, exibição de sugestões, anúncios.
Incorporando via <video> #
-
Controle total sobre o player, aparência, privacidade e hospedagem.
-
Responsável por fornecer e otimizar os arquivos.
Melhores Práticas com Mídia #
-
Otimize imagens, áudios e vídeos para a web (compressão sem perder qualidade).
-
Utilize o atributo
altem imagens sempre. -
Use
<picture>e formatos modernos como.webppara imagens responsivas. -
Prefira
<audio>e<video>quando quiser controle total, ou use YouTube/Vimeo para economizar banda. -
Ofereça múltiplos formatos de áudio e vídeo para garantir compatibilidade entre navegadores.
Exemplo Prático Completo #
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imagens e Mídia no HTML5</title>
</head>
<body>
<h1>Imagens e Mídia no HTML5</h1>
<h2>Imagem Responsiva</h2>
<picture>
<source media="(max-width: 600px)" srcset="imagem-pequena.jpg" />
<source media="(max-width: 1200px)" srcset="imagem-media.jpg" />
<img src="imagem-grande.jpg" alt="Paisagem da montanha" />
</picture>
<h2>Áudio</h2>
<audio controls>
<source src="audio.mp3" type="audio/mpeg" />
Seu navegador não suporta áudio HTML5.
</audio>
<h2>Vídeo</h2>
<video controls width="640" poster="poster-video.jpg">
<source src="video.mp4" type="video/mp4" />
Seu navegador não suporta vídeo HTML5.
</video>
</body>
</html>
Conclusão #
O HTML5 tornou extremamente simples e poderoso trabalhar com mídias na web. Usar imagens, áudios e vídeos de forma correta melhora a acessibilidade, a experiência do usuário e a performance do site.