Multimídia: imagens responsivas, áudio e vídeo

O problema das imagens em telas diferentes

A mesma foto precisa ficar boa num celular de 360 px e num monitor de 2560 px. Se você servir sempre a versão gigante, o celular baixa megabytes que não precisa; se servir a pequena, no monitor ela fica borrada feito lembrança antiga. Você quer o melhor dos dois mundos, e é exatamente isso que as imagens responsivas entregam.

srcset e sizes: o navegador escolhe o arquivo

Com srcset você oferece várias versões da mesma imagem em diferentes resoluções, e o navegador escolhe a mais adequada conforme a tela e a largura disponível.

<img
  src="foto-800.jpg"
  srcset="foto-400.jpg 400w, foto-800.jpg 800w, foto-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Pôr do sol sobre o mar"
/>

• srcset: lista de arquivo larguraReal w. O 400w significa "este arquivo tem 400 pixels de largura".
• sizes: diz ao navegador que largura a imagem vai ocupar no layout conforme o viewport. Aqui: em tela estreita ocupa 100% da largura; caso contrário, 50%.
• src: fica como fallback para navegadores antigos.

Com ambos os dados (larguras disponíveis + largura de apresentação), o navegador faz a conta e baixa exatamente o arquivo certo. Você dá as opções; ele escolhe por você.

<picture>: trocar a imagem, não só o seu tamanho

srcset serve quando é a mesma imagem em escalas diferentes. Quando você quer servir imagens diferentes (recortes distintos, outro formato, modo escuro) você usa <picture> com vários <source>:

<picture>
  <source srcset="banner.avif" type="image/avif" />
  <source srcset="banner.webp" type="image/webp" />
  <img src="banner.jpg" alt="Banner da campanha" />
</picture>

O navegador avalia os elementos <source> em ordem e fica com o primeiro que suportar. A <img> final não é opcional: é obrigatória, é o fallback e é a que carrega o alt. Esqueça dela e você fica sem rede de proteção.

Lembre-se: <source> também aceita media (media="(min-width: 800px)") para escolher conforme o tamanho da tela, ideal para art direction (um recorte panorâmico no desktop e outro quadrado no celular).

Áudio

<audio> reproduz som. O atributo controls mostra os botões de reprodução. Dentro dele você pode oferecer vários formatos com <source>:

<audio controls>
  <source src="podcast.mp3" type="audio/mpeg" />
  <source src="podcast.ogg" type="audio/ogg" />
  Seu navegador não suporta áudio.
</audio>

O texto solto do final só aparece se o navegador não entender <audio>.

Vídeo

<video> funciona da mesma forma. Atributos úteis: controls (barra de controle), width/height, poster (imagem prévia) e muted/autoplay/loop.

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

Boa prática: use autoplay apenas junto com muted (os navegadores bloqueiam o autoplay com som, e com razão) e ofereça sempre controls para que a pessoa possa pausar.

⚠️ Cilada clássica: esquecer o alt nas imagens. Sem alt, quem usa leitor de tela só ouve "imagem" e fica sem saber o que ela mostra. O alt não é enfeite: é a imagem contada em palavras.