EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語

Mídia HTML

Páginas web não são só texto — imagens, áudio e vídeo tornam o conteúdo mais rico. <img>, <audio> e <video> são as três tags HTML5 principais para incorporar recursos multimídia.

A Tag de Imagem

<img> é uma tag vazia — use src para especificar o caminho da imagem e alt para fornecer um texto alternativo.

Formatos de Imagem Suportados

Formato Características Casos de Uso
JPG/JPEG Compressão com perda, arquivos pequenos, sem transparência Fotos, imagens complexas
PNG Compressão sem perda, suporta fundo transparente Ícones, capturas de tela, imagens com transparência
GIF Suporta animação, máximo 256 cores Animações simples, ícones
WebP Formato de próxima geração, melhor compressão, suporta transparência Navegadores modernos
SVG Formato vetorial, escala infinita sem perda de qualidade Ícones, logotipos, gráficos
💡 Recomendação: Prefira WebP (tamanho pequeno, boa qualidade). Use JPG/PNG como fallback para navegadores mais antigos. SVG é ideal para ícones e logotipos — não fica embaçado ao ampliar.

Exemplo

HTML 
<img src="/assets/images/tutorials/html-landscape-photo.webp" alt="Foto de paisagem cênica" width="400" height="300">
<img src="/assets/images/tutorials/html-company-logo.webp" alt="Logo da Empresa" title="Clique para voltar ao início">
▶ Experimente
📌 O Atributo alt: É exibido quando a imagem falha ao carregar; lido em voz alta pelos leitores de tela para auxiliar usuários com deficiência visual; ajuda os mecanismos de busca a entender o conteúdo da imagem. Nunca o omita.

A Tag de Áudio

A tag <audio> incorpora músicas, podcasts e efeitos sonoros. Adicionar o atributo controls exibe os controles de reprodução.

Formatos de Áudio Suportados

Formato Características Suporte do Navegador
MP3 Compressão com perda, arquivos pequenos, melhor compatibilidade Todos os navegadores
OGG Formato open source, boa compressão Chrome, Firefox, Edge
WAV Sem compressão, melhor qualidade, arquivos grandes Todos os navegadores
AAC Melhor compressão que MP3 Navegadores modernos
💡 Estratégia de Compatibilidade: MP3 tem a melhor compatibilidade, mas para garantir que todos os navegadores possam reproduzir, use <source> para fornecer ambos os formatos MP3 e OGG.

A Tag <source>: Fallback Multi-formato

Diferentes navegadores suportam diferentes formatos de mídia. Usar tags <source> permite fornecer múltiplas fontes de formato — o navegador seleciona automaticamente o primeiro formato que suporta:

HTML 
<audio controls>
  <source src="musica.mp3" type="audio/mpeg">
  <source src="musica.ogg" type="audio/ogg">
  Seu navegador não suporta reprodução de áudio.
</audio>

Notas de Sintaxe:

Tipos MIME Comuns:

Formato Tipo MIME
MP3 audio/mpeg
OGG Áudio audio/ogg
MP4 video/mp4
WebM video/webm

Exemplo

HTML 
<audio src="musica.mp3" controls>
Seu navegador não suporta a reprodução de áudio.
</audio>

<!-- Compatibilidade com múltiplos formatos -->
<audio controls>
<source src="musica.mp3" type="audio/mpeg">
<source src="musica.ogg" type="audio/ogg">
Seu navegador não suporta a reprodução de áudio.
</audio>
▶ Experimente

A Tag de Vídeo

A tag <video> incorpora vídeos, também suportando controls e as dimensões width/height.

Formatos de Vídeo Suportados

Formato Características Suporte do Navegador
MP4 Formato mais universal, boa compressão Todos os navegadores
WebM Formato open source do Google, tamanho menor Chrome, Firefox, Edge
OGG Formato open source Chrome, Firefox
💡 Estratégia de Compatibilidade: MP4 tem a melhor compatibilidade. Use <source> para fornecer ambos os formatos MP4 e WebM.

Exemplo

HTML 
<video src="video.mp4" controls width="400">
Seu navegador não suporta a reprodução de vídeo.
</video>

<!-- Múltiplos formatos + imagem de capa -->
<video controls width="400" poster="capa.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Seu navegador não suporta a reprodução de vídeo.
</video>
▶ Experimente
💡 Dicas de Formato de Mídia: MP3 e MP4 oferecem a melhor compatibilidade — praticamente todos os navegadores os suportam. WebM é um formato aberto do Google com tamanhos de arquivo menores. Usar <source> com múltiplos formatos permite que o navegador escolha automaticamente o que suporta.

❓ Perguntas Frequentes

P O atributo alt é obrigatório? Posso omiti-lo?
R Sempre inclua alt. Ele serve para três propósitos：1）exibe texto alternativo quando a imagem falha ao carregar, melhorando a experiência do usuário; 2）ajuda leitores de tela a descrever imagens para usuários com deficiência visual; 3）dá contexto aos mecanismos de busca sobre suas imagens, melhorando SEO. Para imagens decorativas, use alt="" vazio para dizer aos leitores de tela para ignorá-las.
P Que formato de imagem devo usar? Qual é a diferença entre JPG, PNG e WebP?
R Escolha com base na necessidade：1）JPG é bom para fotos — compressão com perda, arquivos pequenos, sem transparência; 2）PNG é bom para ícones e capturas de tela — compressão sem perda, suporta fundo transparente, mas arquivos maiores; 3）WebP é formato de próxima geração — melhor compressão que JPG e PNG, suporta transparência, todos os navegadores modernos suportam. Prefira WebP; use JPG/PNG como fallback para navegadores mais antigos.
P Por que devo definir atributos width e height em imagens?
R Dois benefícios：1）O navegador sabe as dimensões da imagem antes de carregar, reservando espaço correto e prevenindo deslocamento de layout; 2）Ajuda a melhorar pontuações do Core Web Vitals (métrica CLS). Nota：se definir apenas um atributo, o outro será calculado proporcionalmente. Imagens responsivas geralmente definem apenas width e deixam height se adaptar automaticamente.
P MP3 e MP4 têm ótima compatibilidade — por que oferecer outros formatos?
R Embora MP3/MP4 tenham a melhor compatibilidade, outros formatos têm vantagens：WebM é menor, OGG é open source gratuito, WAV tem a melhor qualidade. Fallback multi-formato permite：1）diferentes navegadores terem a melhor experiência; 2）redes ruins escolherem arquivos menores; 3）atualização suave quando novos formatos ganharem suporte. Recomendação：no mínimo, forneça MP3/MP4 como fallback, adicione WebM/OGG como opção de otimização.

📖 Resumo

📝 Atividades

  1. Prática com imagens: Insira uma imagem com os atributos alt e title, depois altere o src para um caminho inválido e observe como o navegador trata a situação.
  2. Incorporação de player de mídia: Use <audio> e <video> para incorporar um arquivo de áudio e um arquivo de vídeo (você pode usar recursos públicos disponíveis online).
100%