We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Esta tradução está incompleta. Por favor, ajude 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.

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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

Etiquetas do documento e colaboradores

Colaboradores desta página: lionzo, luisfvieira, gepetobio, FLR, jtec-info
Última atualização por: lionzo,