<picture>

Várias fontes de imagem; o navegador escolhe uma.

<picture> não desenha nada: é um invólucro de elementos <source> que termina obrigatoriamente num <img>. O navegador percorre a lista, para na primeira fonte que aceita e entrega o resultado ao img, que continua responsável pelo alt e pelo layout.

Serve para trocar o corte da foto no celular ou oferecer AVIF com JPEG de reserva. Se a única diferença for o tamanho do arquivo, srcset e sizes no próprio <img> bastam.

<picture>
  <source media="(min-width: 60rem)" srcset="/imagens/exsicata-larga.avif" type="image/avif">
  <source srcset="/imagens/exsicata.avif" type="image/avif">
  <img src="/imagens/exsicata.jpg" alt="Exsicata 042 sobre papel pardo">
</picture>

{esc(legenda)}