Quando usar picture para selecionar outra imagem

O elemento picture permite escolher entre fontes com condições e fornecer um img como fallback.

Antes de começar

Decida se a imagem precisa de crop ou composição diferente no mobile ou se basta redimensionar o mesmo arquivo.

Passo a passo

1. Declare as fontes condicionais e mantenha um <img> final com src, dimensões e alternativa textual.

2. Teste condições atendidas e não atendidas, além de um navegador que use o fallback.

Limites e cuidados

Não troque o assunto representado por uma versão incompatível com o conteúdo.

Continue na biblioteca

Fonte oficial: Imagens responsivas — web.dev.