<picture>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2016.

O elemento HTML <picture> é um container usado para especificar múltiplos elementos <source> para um elemento específico <img> contido nele. O navegador irá escolher a imagem mais adequada de acordo com o layout atual da página, caracteristicas do dispositivo em que será exibido (p.e. um dispositivo normal ou um hiDPI), e a habilidade do navegador de renderizar um certo tipo de imagem (p.e., envie uma imagem WebP para os navegadores baseados no Chromium ou PNG para navegadores não-Chromium); se não houver correspondência entre os elementos <source>, o arquivo especificado pelo elemento <img> será selecionado. A imagem selecionada é então exibida no espaço ocupado pelo elemento <img>.

Categorias de conteúdo Conteúdo de fluxo, conteúdo fraseado, conteúdo embutido
Conteúdo permitido Zero ou mais elementos <source>, seguidos de um elemento <img>, opcionalmente mesclado com elementos de suporte para scripts (por exemplo, <script> e <template>).
Omissão de tag Nenhuma, as tags de abertura e fechamento são mandatórias
Parentes permitidos Qualquer elemento que permita conteúdo embutido (embedded).
Papéis ARIA permitidos Nenhum
Interface do DOM HTMLPictureElement

Atributos

Esse elemento só inclui elementos globais.

Exemplo 1: Uso com atributo media

O atributo media permite você especificar uma media query que o navegador irá avaliar para selecionar um elemento <source> . Se a media query retornar falso, o elemento <source> é ignorado.

html
<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN" />
</picture>

Exemplo 2: Uso com atributo type

O atributo type lhe permite especificar um tipo MIME para o(s) recurso(s) fornecido(s) no atributo srcset do elemento <source>. Se o navegador não suporta o tipo especificado, o elemento <source> é ignorado.

html
<picture>
  <source srcset="mdn-logo.svg" type="image/svg+xml" />
  <img src="mdn-logo.png" alt="MDN" />
</picture>

Especificações

Specification
HTML Standard
# the-picture-element

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também