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