<picture>: O Elemento PICTURE
Última atualização: 2026-10-13
<picture>O Elemento PICTURE
Fornece várias fontes de imagem para um img, deixando o navegador escolher a melhor pelo viewport, resolução etc.
| Categoria | Links e Mídia |
|---|---|
| Modelo de Conteúdo | Conteúdo de fluxo |
| Pais Permitidos | Qualquer elemento que aceite conteúdo de fluxo |
| Tag de Fechamento | Sim — requer fechamento </picture> tag |
| Status | Padrão |
📝 Sintaxe
<picture>fontes de imagem</picture>▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <picture> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
Dica： picture deve conter um img como fallback; source apenas escolhe, o img é sempre o que renderiza.
❓ Perguntas Frequentes
QQual é a diferença entre picture e img?
A
<picture> é o «seletor de formato/corte» da img: contém vários <source> e uma <img> de fallback, e o navegador escolhe o melhor recurso conforme as condições (formato novo, cortes diferentes). A img sozinha carrega um único recurso. Atenção: picture em si não exibe nada — a troca real acontece na img.QComo oferecer fallback WebP com picture?
Asource com o formato novo, img com o antigo como base:
<picture><source type='image/webp' srcset='a.webp'><img src='a.jpg' alt='…'></picture>. Navegadores com WebP escolhem o source; os sem suporte caem automaticamente no jpg da img.QComo usar o atributo media de picture?
AEscreva media queries no source para «cortes diferentes por tela»:
<source media='(max-width: 600px)' srcset='small.jpg'>. O source que casar com a condição tem prioridade; entre vários sources, vale o primeiro que casar na ordem de escrita — o fallback é sempre a img.🏷️ Tags Relacionadas
💡 Casos Relacionados
Mais estudos de caso em breve — volte mais tarde.
📚 Tutoriais Relacionados
