Elemento picture HTML

Um único img basta em muitas páginas. Quando você precisa de arquivos diferentes para telas ou formatos distintos — um recorte largo no desktop, um recorte mais apertado no celular, ou um formato moderno com fallback JPEG — o elemento picture oferece candidatos. O navegador escolhe um; seu img de fallback cobre clientes mais antigos e a acessibilidade.

O que picture acrescenta

picture é um contêiner. Dentro dele você coloca zero ou mais elementos source e exatamente um img de fallback. Cada source pode declarar quando se aplica (media) ou qual formato é (type), e onde o arquivo fica (srcset). O img não é decoração opcional: é o fallback obrigatório e o lugar do alt.

Resposta direta

Envolva um ou mais elementos <source> e um <img> de fallback dentro de <picture>. Use media para condições de viewport e type para formatos como WebP. O img ainda precisa de src e alt. Iniciantes podem começar com duas larguras da mesma foto antes de reunir todos os formatos modernos.

Direção artística com media

Direção artística significa recortes ou layouts diferentes para viewports diferentes — não só “a mesma foto menor”. media em source permite apontar layouts largos e estreitos para arquivos distintos.

Lendo o exemplo com media

• Os source costumam ser listados de condições mais específicas para as mais amplas nos padrões de ensino comuns; o navegador ainda avalia e escolhe uma correspondência
• srcset em source aponta para a URL do arquivo candidato
• O img final fornece src e alt quando nenhum source corresponde ou quando o suporte a picture é incompleto
• Redimensione a janela na prática para ver qual arquivo é adequado — use a rede das DevTools se quiser confirmar a requisição

Escolha de formato com type

Às vezes a mesma composição é enviada como WebP para navegadores com suporte e como JPEG para os demais. type informa ao navegador o tipo MIME para que ele possa ignorar formatos não suportados sem baixá-los primeiro.

Mantenha o escopo do primeiro dia pequeno

Você não precisa de todos os formatos e de todos os breakpoints na primeira tentativa. Faça um picture com dois candidatos sensatos funcionar, mantenha alt honesto no img e depois expanda. Descritores de densidade srcset responsivos e atributos sizes avançados vêm depois, conforme você avança.

alt permanece no img

Não coloque o texto de acessibilidade só em source. Leitores de tela e a renderização de fallback dependem do img. As regras decorativas da sessão Images ainda valem: imagens informativas precisam de alt real; decoração pura pode usar alt="".

picture vs um único img

Use um img simples quando um arquivo basta. Recorra a picture quando realmente precisar de arquivos diferentes para condições — direção artística de viewport ou troca de formato. Marcação extra sem necessidade real só complica a manutenção.

Ordem e hábitos de fallback

Liste os elementos source antes do img. Sempre inclua o img. Se esquecer o fallback, alguns navegadores e muitos validadores didáticos tratarão o padrão como incompleto. Teste com uma janela estreita e uma larga, e com um navegador que pode não preferir seu formato sofisticado.

Pratique no seu editor

1. Prepare duas larguras de imagem da mesma foto (ou dois arquivos claros de prática).
2. Monte um picture com duas media queries em source e um img de fallback.
3. Redimensione a janela do navegador e observe qual arquivo é adequado.
4. Confirme que alt permanece no img, não só em um comentário.
5. Opcionalmente adicione um source WebP com type="image/webp" acima de um img JPEG e confirme que o padrão ainda mostra uma imagem em todo lugar.

Erros fáceis

• Esquecer o img de fallback
• Colocar alt só em source em vez de no img
• Complicar com muitos formatos antes de o padrão media básico funcionar
• Usar picture quando um único img otimizado bastaria
• Recortes desalinhados que surpreendem usuários quando o viewport cruza um breakpoint
• Confundir srcset em source com o href de um link

Resumo

• picture oferece vários candidatos de imagem; o navegador escolhe um
• Use source mais um img de fallback obrigatório
• media orienta a escolha por viewport; type orienta a escolha de formato
• alt permanece no img
• Comece simples: duas larguras ou um formato moderno mais um fallback JPEG