Tag HTML <picture>

O elemento <picture> é um contêiner para um ou mais elementos <source> e um elemento <img>, que é o último elemento filho do bloco.

O elemento <source> contém versões de uma imagem para diferentes cenários de dispositivo de exibição. O elemento <img> descreve o tamanho da imagem e outros atributos. O navegador considera cada um dos elementos <source> filhos e carrega a imagem mais adequada. Se nenhuma correspondência for encontrada, o navegador exibe a imagem especificada pela tag <img>.

O elemento <picture> permite especificar múltiplas imagens para melhor adaptação a diferentes tamanhos de viewport, evitando a necessidade de dimensionar uma única imagem. Ele pode ser usado para os seguintes propósitos:

recortar e modificar imagens para diferentes condições de mídia,
oferecer formatos de imagem alternativos quando formatos específicos não são suportados.

Nota: As propriedades object-position e object-fit se aplicam ao elemento de fallback <img> para controlar seu dimensionamento e alinhamento dentro do contêiner.

A tag <picture> é nova no HTML5.

Sintaxe

A tag <picture> vem em pares. O conteúdo é escrito entre as tags de abertura (<picture>) e fechamento (</picture>).

Tag HTML <picture>

<picture>
  <source media="...">
  <source media="...">
  <img src="...">
</picture>

Exemplo da tag HTML `<picture>`:

Tag HTML <picture>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <picture>
      <source media="(min-width: 650px)" srcset="https://api.w3docs.com/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg" />
      <source media="(min-width: 430px)" srcset="https://api.w3docs.com/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" />
      <img src="https://api.w3docs.com/uploads/media/news_gallery/0001/01/thumb_366_news_gallery_list.jpeg" alt="Cityscape at sunset" style="width:auto;" />
    </picture>
    <p>Some information about pictures</p>
  </body>
</html>

Experimente Você Mesmo »

O navegador avalia os elementos <source> em ordem e carrega o primeiro cuja consulta media corresponde ao viewport atual. Se nenhum <source> corresponder, ele recorre ao elemento <img>. O elemento <picture> tem amplo suporte em todos os navegadores modernos.

O atributo alt no elemento de fallback <img> é obrigatório: qualquer imagem que o navegador renderize, ele usa esse único texto alt. Sempre escreva uma descrição do conteúdo real da imagem, não um placeholder como alt="img".

Duas funções do <picture>

<picture> resolve dois problemas diferentes, e você escolhe a técnica pelo atributo que coloca nos elementos <source>:

Direção de arte — exibe um recorte ou composição diferente dependendo do viewport. Uma fotografia panorâmica ampla no desktop, um recorte de retrato ajustado no mobile. Use o atributo media (uma consulta de mídia CSS) para selecionar a imagem correta.
Negociação de formato — serve a mesma imagem em um formato mais moderno e menor quando o navegador suporta (AVIF ou WebP), com fallback para JPEG/PNG em outros casos. Use o atributo type (um tipo MIME) para que o navegador ignore formatos que não consegue decodificar.

O navegador percorre a lista <source> de cima para baixo e usa o primeiro que tanto corresponde (sua consulta media, se houver) quanto é suportado (seu type, se houver). A ordem importa: coloque sua opção mais preferida primeiro.

Troca de formato (AVIF, depois WebP, depois JPEG)

Este é o uso mais comum no mundo real de <picture>. Navegadores modernos que entendem AVIF fazem o download do arquivo menor; os mais antigos recorrem ao WebP, e qualquer outro recebe o JPEG universalmente suportado. O navegador carrega exatamente uma imagem.

<picture>
  <source type="image/avif" srcset="photo.avif" />
  <source type="image/webp" srcset="photo.webp" />
  <img src="photo.jpg" alt="A red fox standing in fresh snow" />
</picture>

Como os elementos <source> carregam apenas um type, todos os três são oferecidos a cada navegador — ele simplesmente escolhe o primeiro formato que consegue decodificar. Nenhuma consulta de mídia está envolvida aqui; trata-se puramente do formato do arquivo.

Direção de arte (recortes diferentes com `media`)

Aqui o objetivo é mudar qual imagem é exibida, não apenas seu formato. Em telas de 800px ou mais largas, o navegador recebe um recorte de banner amplo; telas mais estreitas recebem um recorte quadrado que mantém o assunto legível em um telefone.

<picture>
  <source media="(min-width: 800px)" srcset="hero-wide.jpg" />
  <source media="(max-width: 799px)" srcset="hero-square.jpg" />
  <img src="hero-square.jpg" alt="Team celebrating a product launch" />
</picture>

Use media sempre que o conteúdo da imagem deve diferir entre breakpoints.

Troca de resolução com `srcset` e `sizes`

Se você precisa apenas da mesma imagem em diferentes tamanhos de pixel — não um recorte ou formato diferente — geralmente não precisa de <picture>. Um único <img> com srcset e sizes permite que o navegador escolha a melhor resolução para a tela, viewport e densidade de pixels do dispositivo:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="A red fox standing in fresh snow"
/>

Como interpretar isso:

srcset lista imagens candidatas, cada uma marcada com um descritor de largura (400w significa que o arquivo tem 400px de largura). O navegador conhece a largura real de cada arquivo sem precisar baixá-lo.
sizes informa ao navegador a largura com que a imagem será exibida. Aqui lê-se: "abaixo de 600px de viewport a imagem ocupa a largura total (100vw); caso contrário, ocupa a metade (50vw)." O navegador combina isso com a proporção de pixels do dispositivo para escolher o candidato mais econômico do srcset.
src permanece como fallback para navegadores que ignoram srcset.

srcset com descritores de largura também funciona dentro de um elemento <source>, portanto você pode combinar troca de resolução com direção de arte ou troca de formato.

Quando você realmente precisa de `<picture>`?

Objetivo	Usar
Mesma imagem, deixar o navegador escolher a melhor resolução para a tela	`<img srcset>` + `sizes`
Mesma imagem em um formato moderno menor (AVIF/WebP) com fallback	`<picture>` + `type`
Um recorte/composição diferente por breakpoint (direção de arte)	`<picture>` + `media`

Regra prática: use <picture> somente quando precisar controlar qual arquivo o navegador utiliza (formato ou recorte). Para simplesmente "servir o tamanho certo", <img srcset> é mais simples e suficiente.

Atributos

Estes atributos se aplicam aos elementos <source> dentro de <picture>:

Atributo	Valor	Descrição
media	media_query	Especifica uma consulta de mídia para corresponder ao tamanho do viewport.
srcset	URL	Especifica o URL da imagem a ser usada em diferentes situações.
sizes	length	Especifica a largura da imagem para diferentes tamanhos de viewport.
type	MIME_type	Especifica o tipo MIME do recurso vinculado (ex.: `image/webp`).
src	URL	Especifica o URL da imagem. Usado como alternativa ao `srcset`.

Cada elemento <source> deve incluir um atributo srcset ou src. O elemento de fallback <img> usa o atributo src.

A tag <picture> suporta os Atributos Globais.

Prática

O que o elemento HTML picture faz?

Incorpora conteúdo de áudio em um documento.Define um contêiner para vários candidatos de source e uma imagem de fallback, permitindo que o navegador carregue a imagem mais adequada para o dispositivo, tamanho de tela ou formato suportado.Funciona apenas para gráficos vetoriais como SVG.Cria automaticamente um hiperlink ao redor de uma imagem.

Sintaxe

Exemplo da tag HTML <picture>: