O texto a seguir é adaptado de um artigo de Jason Grigsby e você pode ler o texto original em Don’t use <picture> (most of the time).

O suporte dos navegadores para a especificação picture está chegando e, como diz Marcos Cáceres, é hora de "sair picturizando tudo!"

Só que não!

Mas você de usar picture desde já para servir imagens responsivas. Não há porque esperar.

Confuso? Não é só você.

<picture> vs. picture

Os padrões são desenvolvidos de um modo não linear. As ideias evoluem e se unem. E geralmente não sabemos onde vamos chegar ao final de cada processo. Neste caso, acabou nascendo uma especificação chamada "picture" que contém muito mais do que o elemento <picture>.

O problema que você quer resolver define qual solução você precisa

Uma das primeiras partes do trabalho assumido pelo Responsive Images Community Group foi definir os casos de uso de imagens responsivas.

Você não precisa saber todos os casos, mas precisa entender a diferença entre os dois casos mais comuns de uso a fim de saber que parte da especificação picture resolverá seus problemas. Esses dois casos são:

• Mudança de resolução: precisamos selecionar um arquivo diferente para uma mesma imagem em diferentes resoluções por qualquer motivo. Os motivos para isso podem ser diferentes tamanhos de tela, densidades de pixels, ou evitar o download desnecessário de imagens grandes demais.
• Direção de arte: neste caso, por alguma razão precisamos modificar o conteúdo da imagem sob determinadas condições. Também precisemos de um corte diferente na imagem para telas pequenas. Ou no caso de uma imagem de destaque contendo texto e simplesmente mostrar uma versão menor tornaria o texto ilegível.

Basicamente, se você puder redimensionar uma imagem sem fazer nenhuma outra mudança, e tem outro arquivo com a resolução necessária, estamos falando de mudança de resolução. Se você precisa mudar qualquer coisa na imagem além da resolução, estamos falando de direção de arte.

Para a maioria das imagens responsivas, você não precisa do elemento <picture>

Além que você tenha em vista a direção de arte, não precisa usar o elemento <picture>. Na verdade, estaria fazendo um desserviço aos seus usuários.

A especificação picture suporta sintaxes que podem ser usadas sem o tal elemento. Um exemplo dado por Yoav Weiss no artigo Native Responsive Images fica mais ou menos assim:

<img src="cat_500px.jpg"
 srcset="cat_750px.jpg 1.5x, cat_1000px.jpg 2x"
 width="500px" alt="lolcat">

Isso dá ao navegador opções diferentes conforme a densidade da tela. A seguir um exemplo mais complicado:

<img sizes="(max-width: 30em) 100vw,
 (max-width: 50em) 50vw,
 calc(33vw - 100px)"
 srcset="swing-200.jpg 200w,
 swing-400.jpg 400w,
 swing-800.jpg 800w,
 swing-1600.jpg 1600w"
 src="swing-400.jpg" alt="Kettlebell Swing">

Eu recomendo a leitura do artigo do Yoav para entender melhor cada detalhe.

Quando você usa os atributos srcset e sizes em um elemento <img>, você está provendo informações que o navegador pode usar para decidir qual imagem é mais apropriada para o uso baseado em uma série de fatores que você não tem ciência.

Como designer ou desenvolvedor, você não tem como saber qual a largura de banda do usuário, ou se ele declarou algum tipo de preferência com relação à resolução de imagens que ele deseja ver. Se damos ao navegador informações através do atributo srcset ou sizes, ele poderá tomar decisões mais inteligentes a respeito de qual arquivo carregar.

Mas nada disso é possível quando você usa <picture> e seus atributos media:

<picture>
 <source media="(min-width: 45em)" srcset="large.jpg">
 <source media="(min-width: 32em)" srcset="med.jpg">
 <img src="small.jpg" alt="The president giving an award.">
</picture>

Quando você especifica media queries para as fontes da imagem, está criando regras para o navegador obedecer. Ele não terá condições de tomar decisões inteligentes de download baseadas nas preferências do usuário, rede, etc.

Você deve ditar as condições de decisão de download moderadamente. Na verdade, só deve usar isso para fins de direção de arte, não para determinar a resolução.

Leia o artigo original (em inglês).