<picture>

Você está lendo a versão em inglês deste conteúdo porque ainda não há uma tradução para este idioma. Ajude-nos a traduzir este artigo!

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.

<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.

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

Especificações

Specification Status Comment
HTML Living Standard
The definition of '<picture>' in that specification.
Padrão em tempo real Initial definition

Compatibilidade entre navegadores

A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser contribuir com os dados, acesse https://github.com/mdn/browser-compat-data e envie-nos um pull request.

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 38 (Yes) 38 (38) Edge 13 25 9.1
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 38 (Yes) 38.0 (38) Não suportado 25 iOS 9.3

Veja também