Imagens e mídia

docs.scrimba.com

O texto carrega boa parte de uma página web, mas não tudo. Fotos, diagramas, ilustrações, clipes de vídeo e som também são conteúdo, e o HTML tem elementos para cada um deles. Este capítulo trata da marcação que coloca mídia em uma página: como você aponta para um arquivo de imagem, como você descreve essa imagem para pessoas que não conseguem vê-la e como você entrega o arquivo certo para a tela certa sem desperdiçar os dados de ninguém.

O elemento de imagem

Você coloca uma imagem em uma página com o elemento de imagem, escrito como <img>. Ele não tem conteúdo nem tag de fechamento. Em vez disso, você informa duas coisas por meio de atributos: qual arquivo mostrar e o que a imagem representa.

<img src="golden-retriever.jpg" alt="A golden retriever sitting in tall grass">

src é a fonte: o caminho ou endereço web do arquivo de imagem. alt é o texto alternativo: uma breve descrição da imagem em palavras. Se a imagem não carregar, ou se alguém estiver ouvindo a página com um leitor de tela em vez de olhar para ela, o texto do alt é o que essa pessoa recebe. Então escreva-o como se estivesse descrevendo a imagem para um amigo ao telefone.

O elemento <img> traz um arquivo externo para dentro da página. É um elemento vazio, então não tem tag de fechamento; tudo que ele precisa está em seus atributos. Dois deles são essenciais:

<img src="/images/team-photo.jpg" alt="The five members of the design team at their desks">

src é o caminho do arquivo, relativo à página, ou uma URL absoluta. alt é o texto alternativo, as palavras que substituem a imagem quando ela não é exibida ou não pode ser vista.

Acertar no alt é a parte que as pessoas pulam e não deveriam. Descreva o conteúdo e o propósito da imagem, não os detalhes do arquivo. "Gráfico de barras mostrando as vendas dobrando entre 2023 e 2024" diz ao leitor o que o gráfico mostra; "chart.png" não diz nada. Mantenha em uma frase e não comece com "Imagem de", o navegador já anuncia que se trata de uma imagem.

<img> é um elemento vazio que carrega um recurso externo e o exibe alinhado ao texto por padrão. Dois atributos fazem o trabalho de verdade: src (a URL do recurso) e alt (o texto alternativo). O restante desta seção é sobre o alt, porque é aí que a acessibilidade e a correção de uma imagem realmente se definem.

O atributo alt não é uma legenda nem uma descrição do arquivo. É um substituto: o texto que o navegador exibe no lugar da imagem quando ela está ausente, e o texto que um leitor de tela (um software que lê uma página em voz alta para pessoas que não conseguem vê-la) fala em vez de mostrar a imagem. O teste é a equivalência funcional. Se você removesse a imagem e colocasse seu texto de alt no lugar, a frase ainda faria sentido e transmitiria a mesma informação? Um bom alt passa esse teste; "photo1" não passa.

Disso derivam duas regras. Primeiro, descreva a função, não os pixels: um ícone de lupa dentro de um botão de busca tem alt="Buscar", não alt="lupa", porque a função dele na página é a ação, não o desenho. Segundo, imagens decorativas recebem um alt vazio. Quando uma imagem não agrega nenhuma informação, um floreio de fundo ou um divisor, escreva alt="" sem nada entre as aspas. Isso não é o mesmo que omitir o alt. Um alt vazio diz à tecnologia assistiva "ignore isso, não tem significado", enquanto a ausência do alt faz o leitor de tela recorrer a ler o nome do arquivo em voz alta, o que é pior do que o silêncio.

<!-- Significativa: descreva o que ela comunica -->
<img src="revenue-2024.png" alt="Revenue rose from 1.2 to 2.4 million across 2024">

<!-- Decorativa: alt vazio, para que a tecnologia assistiva a ignore -->
<img src="corner-flourish.svg" alt="">

JunoO elemento de imagem Uma imagem precisa de duas coisas: src, que é o arquivo a mostrar, e alt, que descreve a imagem em palavras. Escreva o alt como se estivesse contando para alguém ao telefone o que tem na foto. É a parte mais pulada, e é a parte que mais importa.

JunoO elemento de imagem<img> é um elemento vazio: sem tag de fechamento, tudo fica nos atributos. Descreva o que a imagem diz, não o arquivo, e nunca comece com Imagem de, o navegador já sabe que é uma imagem. O alt de um gráfico deveria contar a alguém o número que o gráfico está mostrando.

JunoO elemento de imagem Um bom alt é um substituto, não uma legenda: coloque-o na frase e o sentido deve continuar de pé. Descreva a função, não o desenho, então um ícone de busca fica Buscar. E alt="" para imagens decorativas é uma escolha válida, ela diz ao leitor de tela para pular, enquanto a ausência do alt faz ele ler o nome do arquivo em voz alta.

Imagens responsivas

Uma foto que parece nítida em um notebook pode ser muito maior do que um celular precisa. Enviar esse arquivo em tamanho grande para uma tela pequena desperdiça os dados do visitante e deixa a página mais lenta. O HTML permite oferecer ao navegador algumas versões da mesma imagem e deixar que ele escolha a que se encaixa melhor.

Você não precisa disso em todas as imagens enquanto está começando. Um único <img> com um arquivo de tamanho razoável já é suficiente. Mas ajuda saber que essa possibilidade existe: a mesma foto pode vir em vários tamanhos, e o navegador escolhe.

<img src="beach-800.jpg" alt="Waves rolling onto a quiet beach at sunset">

Imagens responsivas deixam o navegador escolher um arquivo com base na tela. Em vez de fixar uma única fonte, você lista várias com srcset e descreve o quão larga a imagem será exibida com sizes. O navegador faz as contas e baixa a que melhor se encaixa.

<img
  src="beach-800.jpg"
  srcset="beach-400.jpg 400w, beach-800.jpg 800w, beach-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Waves rolling onto a quiet beach at sunset">

Em srcset, cada item associa um arquivo à sua largura real em pixels (400w significa que o arquivo tem 400 pixels de largura). Em sizes, você informa ao navegador quanto espaço a imagem vai ocupar: aqui ela preenche toda a largura da viewport (100vw) em telas de até 600 pixels, e metade da largura (50vw) nos demais casos. O src permanece como alternativa para navegadores mais antigos. Note que o alt é escrito uma única vez e vale para todas as fontes, já que todas são a mesma imagem.

Quando você precisa de mais do que uma simples troca de tamanho, use o <picture>. Ele envolve vários elementos <source> e um <img>, e o navegador usa o primeiro <source> que corresponder. Isso resolve a direção de arte, servir uma imagem recortada de forma diferente em diferentes larguras, e também formatos de arquivo modernos:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Two cyclists climbing a mountain road at dawn">
</picture>

O navegador lê de cima para baixo, escolhe o primeiro formato que entende e recorre ao <img> simples se nenhum corresponder. O <img> interno é obrigatório; é ele que de fato é renderizado e é onde o alt fica.

Imagens responsivas resolvem um problema de troca de resolução: a mesma imagem, com dimensões de pixel diferentes para telas diferentes, escolhida pelo navegador antes do download, para que ninguém pague pelo custo de pixels que não vai conseguir ver. Existem duas ferramentas, e elas respondem a perguntas diferentes.

srcset com sizes responde "qual resolução?". Você fornece ao navegador um conjunto de arquivos candidatos, cada um marcado com sua largura intrínseca em pixels usando o descritor w, e um valor de sizes informando quão larga a imagem vai ser exibida em vários pontos de quebra. Um ponto de quebra (breakpoint) é o limite de largura de tela em que o layout muda. O navegador combina sua dica de sizes com a densidade de pixels do dispositivo para escolher o menor arquivo que ainda parece nítido.

<img
  src="product-800.jpg"
  srcset="product-400.jpg 400w, product-800.jpg 800w, product-1200.jpg 1200w"
  sizes="(max-width: 700px) 100vw, 350px"
  alt="Leather backpack shown from the front">

O elemento <picture> responde a uma pergunta diferente: "qual fonte por completo?". Ele serve para casos em que o próprio arquivo deve mudar, e não apenas sua escala. Dois motivos comuns. Direção de arte, em que um banner largo se transforma em um recorte alto e estreito em telas pequenas para que o assunto permaneça visível, exige arquivos de imagem diferentes, não um único arquivo redimensionado. E a negociação de formato, em que você oferece um formato moderno com uma alternativa de reserva, exige que o navegador escolha pelo que consegue decodificar.

<picture>
  <source media="(max-width: 600px)" srcset="hero-portrait.avif" type="image/avif">
  <source media="(max-width: 600px)" srcset="hero-portrait.jpg">
  <source srcset="hero-wide.avif" type="image/avif">
  <img src="hero-wide.jpg" alt="Chef plating a dish in a busy kitchen">
</picture>

A ordem importa: o navegador pega o primeiro <source> cujo media e type ele satisfaz, então coloque suas opções mais preferidas e mais restritas primeiro. O <img> final é obrigatório e é o elemento que a página de fato renderiza; srcset e sizes nas fontes alimentam esse elemento, mas alt, width, height e o comportamento de carregamento ficam todos naquele <img> interno.

JunoImagens responsivas A mesma foto pode vir em alguns tamanhos, e o navegador pode escolher o que se encaixa na tela para que um celular não baixe um arquivo do tamanho de um notebook. Você não precisa disso desde o primeiro dia; um <img> simples é suficiente. A opção está lá para quando uma página começa a ficar pesada no celular.

JunoImagens responsivas Use srcset e sizes quando quiser que o navegador escolha um tamanho, e <picture> quando quiser trocar o próprio arquivo, para um recorte diferente ou um formato moderno. O <img> dentro do <picture> é obrigatório e é onde o alt fica. Escreva o alt uma única vez; todas as fontes são a mesma imagem.

JunoImagens responsivas Duas funções diferentes: srcset com sizes escolhe uma resolução, <picture> escolhe uma fonte inteira para direção de arte ou negociação de formato. As fontes são lidas de cima para baixo, e vale a primeira que combinar, então coloque as mais restritas primeiro. Tudo que é renderizado ainda depende do <img> interno, então é ali que ficam o alt e o dimensionamento.

Vídeo e áudio

O HTML pode reproduzir vídeo e som sem nenhum plug-in. Para um clipe, você usa o elemento <video>; para som, <audio>. Adicione o atributo controls e o navegador te dá de graça um botão de play, uma linha do tempo e um controle de volume.

<video src="tutorial.mp4" controls></video>

<audio src="podcast-episode.mp3" controls></audio>

Diferente de uma imagem, esses elementos têm tag de fechamento, porque você pode colocar texto alternativo ou configurações extras entre a tag de abertura e a de fechamento. A coisa mais importante para lembrar no início: sempre inclua controls, ou o visitante não terá nenhuma forma de apertar o play.

Os elementos <video> e <audio> incorporam um player de mídia nativo na página. O atributo controls mostra a interface embutida do navegador para reproduzir, pausar, avançar e controlar o volume; sem ele, não há controle nenhum.

<video src="product-demo.mp4" controls width="640" poster="demo-cover.jpg"></video>

Alguns atributos valem a pena. poster define uma imagem estática mostrada antes do vídeo começar a rodar, para que o player não seja uma caixa preta. width reserva o tamanho do player. Você também pode adicionar autoplay, loop e muted, embora a maioria dos navegadores só permita autoplay quando o vídeo também está muted, então esses dois andam juntos.

Para oferecer mais de um formato de arquivo, remova o src e liste elementos <source> dentro do vídeo. O navegador reproduz o primeiro que conseguir:

<video controls width="640" poster="demo-cover.jpg">
  <source src="product-demo.webm" type="video/webm">
  <source src="product-demo.mp4" type="video/mp4">
  Your browser cannot play this video.
</video>

O texto depois das fontes é o conteúdo de reserva, mostrado apenas se o navegador não conseguir reproduzir nenhuma delas. O <audio> funciona da mesma forma, com o mesmo padrão de controls e <source>, menos os atributos visuais como poster e width.

<video> e <audio> incorporam o pipeline de mídia nativo do navegador, decodificação, buffer e uma interface de player já pronta, sem precisar de um plug-in de terceiros. Ambos aceitam controls (para mostrar a interface nativa) e ambos aceitam vários elementos <source> filhos, o que permite oferecer vários codecs (os formatos de compressão em que um arquivo de vídeo ou áudio está codificado) e deixar o navegador escolher o primeiro que conseguir decodificar.

<video controls width="640" height="360" poster="demo-cover.jpg" preload="metadata">
  <source src="demo.webm" type="video/webm">
  <source src="demo.mp4" type="video/mp4">
  <track kind="captions" src="demo-captions.en.vtt" srclang="en" label="English" default>
  Your browser cannot play this video.
</video>

Duas preocupações de produção dominam aqui. A primeira é a acessibilidade, tornar a mídia utilizável por pessoas que não conseguem ouvi-la ou vê-la. É para isso que serve o <track>: ele associa um arquivo de texto sincronizado, geralmente no formato WebVTT (um formato de legenda em texto simples, com arquivos terminados em .vtt), à mídia. kind="captions" fornece uma versão em texto da fala e dos sons importantes para espectadores surdos ou em um ambiente sem som, o que descreve a maioria das pessoas rolando o feed em público. kind="subtitles" traduz o diálogo para outro idioma. O atributo default ativa uma faixa automaticamente, sem o usuário precisar procurar por ela. Um vídeo sem legendas exclui uma parte real do seu público, e as legendas também ajudam os mecanismos de busca, que não conseguem assistir a um vídeo mas conseguem ler uma transcrição.

A segunda preocupação é a largura de banda. preload controla o quão antecipadamente o navegador busca a mídia antes da reprodução: preload="none" não baixa nada até o usuário apertar o play, preload="metadata" pega apenas a duração e as dimensões, e preload="auto" pode baixar o arquivo inteiro. Use metadata ou none como padrão para qualquer conteúdo abaixo da primeira tela, porque um vídeo que carrega automaticamente é uma das coisas mais pesadas que uma página pode fazer silenciosamente. E a mesma ressalva do autoplay se aplica: os navegadores bloqueiam a reprodução automática com som, então um vídeo em autoplay precisa estar muted, o que é mais um motivo para as legendas importarem.

JunoVídeo e áudio<video> reproduz um clipe e <audio> reproduz som, sem precisar de plug-ins. Adicione controls ou não vai haver botão de play e o visitante fica sem saída. Ambos têm tag de fechamento, porque você pode encaixar configurações e texto de reserva dentro deles, diferente de uma imagem.

JunoVídeo e áudio Sempre adicione controls, defina um poster para que o player não seja um retângulo preto, e liste elementos <source> para oferecer mais de um formato. autoplay só funciona se o vídeo estiver muted, então esses dois andam juntos. O áudio segue o mesmo padrão, sem os atributos visuais.

JunoVídeo e áudio Adicione um <track> com legendas; a maioria das pessoas assiste sem som, e os mecanismos de busca leem o texto que não conseguem assistir. Mantenha o preload em metadata ou none para qualquer coisa abaixo da primeira tela, um vídeo que carrega automaticamente é uma das formas mais silenciosas de deixar uma página pesada. E a reprodução automática com som é bloqueada, então autoplay significa muted, o que é mais um motivo para legendar.

Dimensionamento, carregamento lento e desempenho

Quando uma imagem carrega, ela pode empurrar o resto da página. Você está lendo um parágrafo, uma foto termina de carregar acima dele e, de repente, o texto pula para baixo. Esse pulo é irritante, e você pode evitá-lo: informe o tamanho da imagem ao navegador com antecedência usando width e height.

<img src="team-lunch.jpg" alt="The team sharing lunch on the office balcony"
     width="800" height="600">

Com esses números, o navegador reserva a quantidade certa de espaço antes de a imagem chegar, então nada pula quando ela aparece. Você informa as dimensões reais em pixels do arquivo, e o CSS ainda pode redimensioná-la na tela.

As imagens afetam duas coisas que você sente como usuário: o quanto a página se movimenta enquanto carrega e quantos dados ela consome. O HTML oferece atributos para ambas as questões.

Definir width e height evita o deslocamento de layout, o conteúdo pulando de lugar enquanto as imagens carregam. Quando você declara as dimensões, o navegador reserva esse espaço imediatamente, em vez de colapsar a imagem para nada e depois expandi-la quando o arquivo chega.

<img src="article-header.jpg" alt="Overhead view of a busy newsroom"
     width="1200" height="675" loading="lazy">

O atributo loading="lazy" diz ao navegador para não baixar a imagem até que o leitor esteja quase rolando até ela. Para imagens bem abaixo em uma página longa, isso economiza dados e acelera a primeira renderização. Uma regra: não use carregamento lento na imagem que o visitante vê primeiro, no topo da página. Essa você quer carregada o mais rápido possível, então deixe o loading de fora dela (ou defina loading="eager").

A mídia costuma ser a parte mais pesada de uma página, então os atributos que regem seu carregamento são controles de desempenho. Nenhum deles é enfeite. Três importam de verdade.

Primeiro, o deslocamento cumulativo de layout (cumulative layout shift), uma medida de quanto o conteúdo visível se movimenta enquanto a página carrega. A causa mais comum é uma imagem sem tamanho declarado: o navegador dá a ela altura zero, monta o layout de tudo abaixo, e então reflui a coluna inteira quando o arquivo chega e sua altura real é conhecida. Você evita isso informando ao navegador a proporção com antecedência. Defina width e height com as dimensões reais em pixels do arquivo, e o navegador calcula a proporção e reserva a caixa correta mesmo enquanto o CSS redimensiona a exibição:

<img src="feature.jpg" alt="Solar panels across a green field"
     width="1600" height="900" loading="lazy" decoding="async">

Você pode expressar a mesma intenção em CSS com a propriedade aspect-ratio; o ponto é que a proporção precisa ser conhecida antes de os pixels serem baixados.

Segundo, loading="lazy" adia o download de imagens fora da tela até que o leitor se aproxime delas, reduzindo a carga inicial em páginas longas. A exceção crítica é o elemento LCP (Largest Contentful Paint, o maior bloco ou imagem visível sem precisar rolar a página, e uma métrica que os navegadores e o ranqueamento de busca acompanham). Usar carregamento lento nessa imagem atrasa exatamente aquilo que a métrica mede, então o destaque principal, visível já na primeira tela, deve carregar imediatamente.

Terceiro, decoding="async" permite que o navegador decodifique a imagem fora da thread principal, de modo que transformar bytes comprimidos em pixels não bloqueie o resto da renderização. É uma vantagem pequena e segura para imagens que não são a primeira coisa na tela.

O formato é a outra ferramenta disponível. WebP e AVIF são formatos de imagem modernos que comprimem muito mais do que JPEG ou PNG com a mesma qualidade visual; o AVIF geralmente vence em tamanho de arquivo, o WebP em suporte dos navegadores e velocidade de codificação. O custo é a compatibilidade e as ferramentas envolvidas, e é exatamente para gerenciar isso que existe o <picture> com fontes por type: ofereça AVIF primeiro, WebP em seguida, e um JPEG ou PNG como alternativa final, e cada navegador recebe o melhor arquivo que ele consegue de fato decodificar.

JunoDimensionamento, carregamento lento e desempenho Dê a cada imagem um width e um height e a página para de pular enquanto as fotos carregam. Use o tamanho real em pixels do arquivo; o CSS ainda pode encolhê-lo na tela. Esse único hábito resolve o defeito de carregamento mais irritante que existe.

JunoDimensionamento, carregamento lento e desempenhowidth e height reservam espaço para que nada se desloque enquanto as imagens carregam, e loading="lazy" adia o download das imagens até que estejam quase entrando na tela. A única imagem que não deve usar carregamento lento é a primeira da página; essa deve carregar imediatamente.

JunoDimensionamento, carregamento lento e desempenho Declare width e height (ou defina aspect-ratio) para que o navegador reserve a caixa e o layout pare de pular; a proporção só precisa ser conhecida antes de os pixels chegarem. Use carregamento lento em tudo, exceto no destaque principal visível na primeira tela, já que atrasar sua maior imagem visível atrasa exatamente a métrica que a acompanha. E ofereça AVIF ou WebP através do <picture> com um JPEG como alternativa, para que cada navegador receba o menor arquivo que consegue decodificar.