HTML Academy · Aula

O elemento picture para direção artística

Trocar imagens completas com base nas condições da área de visualização.

Aula 3 de 414 etapas

O elemento picture para direção artística é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

Problema de direção de arte

Direção de arte significa fornecer um crop ou uma composição de imagem fundamentalmente diferente dependendo do tamanho da tela:

Foto de paisagem completa no computador
Crop de retrato ampliado no celular
Isso não pode ser resolvido apenas com srcset + sizes

O elemento picture

O elemento <picture> envolve vários elements <source> e uma alternativa <img>:

<picture>
  <source media="(min-width: 800px)" srcset="wide-crop.jpg">
  <source media="(min-width: 500px)" srcset="medium-crop.jpg">
  <img src="narrow-crop.jpg" alt="Team photo">
</picture>
<!-- Browser picks the first matching source -->
<!-- img is required as fallback and carries the alt attribute -->

Como picture funciona

O navegador avalia os elements <source> na ordem, de cima para baixo:

Verifica a condição media do primeiro elemento <source> — se corresponder, usa essa imagem
Verifica o segundo elemento <source> — se corresponder, usa essa imagem
Se nenhum corresponder, usa <img> como padrão

O elemento <img> ainda exibe a imagem escolhida e contém o texto alt.

Alternância de formato with picture

<picture> também pode selecionar formatos de imagem com base no suporte do navegador:

<picture>
  <!-- AVIF: best compression, newest support -->
  <source type="image/avif" srcset="photo.avif">
  <!-- WebP: great compression, wide support -->
  <source type="image/webp" srcset="photo.webp">
  <!-- JPEG: universal fallback -->
  <img src="photo.jpg" alt="Mountain photo">
</picture>
<!-- Browser picks the first format it supports -->

Combinação de direção de arte e formato

Você pode combinar condições de mídia e seleção de formato:

<picture>
  <source
    media="(min-width: 800px)"
    type="image/webp"
    srcset="hero-wide.webp"
  >
  <source
    media="(min-width: 800px)"
    srcset="hero-wide.jpg"
  >
  <source type="image/webp" srcset="hero-mobile.webp">
  <img src="hero-mobile.jpg" alt="Hero image" width="1200" height="600">
</picture>

O elemento img é obrigatório

O elemento <img> inside <picture> não é opcional:

Ele exibe a imagem selecionada
Ele contém o texto alt para acessibilidade
Ele contém width, height, loading e outros atributos
Sem ele, nada é exibido

Atributo media de source

O atributo media aceita consultas de mídia padrão do CSS:

<picture>
  <source media="(orientation: landscape)" srcset="landscape.jpg">
  <source media="(orientation: portrait)" srcset="portrait.jpg">
  <img src="portrait.jpg" alt="Scene">
</picture>

<!-- Other media features work too: -->
<!-- (prefers-color-scheme: dark) -->
<!-- (min-resolution: 2dppx) -->
<!-- (max-width: 600px) -->

source srcset with seleção responsiva

Combine direção de arte with srcset para obter controle total:

<picture>
  <!-- Desktop: wide hero, multiple resolutions -->
  <source
    media="(min-width: 1024px)"
    srcset="hero-1024.jpg 1024w, hero-2048.jpg 2048w"
    sizes="100vw"
  >
  <!-- Mobile: portrait crop -->
  <img
    srcset="hero-mobile-400.jpg 400w, hero-mobile-800.jpg 800w"
    sizes="100vw"
    src="hero-mobile-400.jpg"
    alt="Conference keynote speaker on stage"
  >
</picture>

Imagens para o modo escuro

Forneça imagens diferentes para usuários do modo escuro:

<picture>
  <source
    media="(prefers-color-scheme: dark)"
    srcset="logo-dark.svg"
  >
  <img src="logo-light.svg" alt="Company logo" width="120" height="40">
</picture>
<!-- Users with dark mode OS setting see logo-dark.svg -->
<!-- Everyone else sees logo-light.svg -->

picture versus CSS background-image

Quando usar <picture> em vez de fundos CSS:

Imagens de conteúdo — use <picture>: precisam de texto alternativo e fazem parte do conteúdo do documento
Imagens decorativas — use CSS background-image com consultas de mídia
Imagens importantes para SEO — use sempre <picture>: os rastreadores indexam elements img

Observação sobre acessibilidade

O atributo alt sempre pertence ao <img>, não ao <source>:

<picture>
  <source srcset="photo.webp" type="image/webp">
  <!-- alt goes on img, not source: -->
  <img src="photo.jpg" alt="Sunset over the Pacific Ocean">
</picture>
<!-- screen readers read img's alt, whichever source was selected -->

Carregamento lazy with picture

Adicione o carregamento lazy ao <img> inside <picture>:

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img
    src="photo.jpg"
    alt="Gallery photo"
    loading="lazy"
    width="800"
    height="600"
  >
</picture>

Verificação rápida

Qual elemento em um bloco picture deve estar sempre presente e contém o atributo alt?

Responda na aula interativa

Recapitulação: elemento picture

Direção de arte com picture:

<picture> envolve elements <source> e um <img>
O navegador escolhe o primeiro <source> correspondente
Use media para condições da área de visualização e type para seleção de formato
<img> é obrigatório — exibe a imagem e contém o texto alt
Combine with srcset + sizes para obter controle responsivo total

Grátis para começar

Aprenda HTML com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 40
Aulas: 159

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “O elemento picture para direção artística” é grátis?

Sim — o texto completo de “O elemento picture para direção artística” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “O elemento picture para direção artística”?

Trocar imagens completas com base nas condições da área de visualização. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “O elemento picture para direção artística”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

O elemento img: src, alt, width e height
Imagens responsivas com srcset e sizes
O elemento picture para direção artística
figure e figcaption

← Voltar para HTML Academy