Imagens

Elemento <img />

<img src="//picsum.photos/id/221/640/450" alt="Lorem Picsum" />

Elemento <img /> dentro do elemento <figure>

<figure>
    <img src="//picsum.photos/id/1011/640/450" alt="Photo by Roberto Nickson">
    <figcaption>
        Animi commodo, aperiam atque nulla interdum. Nemo eveniet. Lobortis facilisis.
        <span class="cite">Photo by Roberto Nickson on Lorem Picsum</span>
    </figcaption>
</figure>

Picture - Elemento <picture>

<picture>
    <source media="(min-width:1280px)" srcset="//picsum.photos/id/1044/1400/650" />
    <source media="(min-width:992px)" srcset="//picsum.photos/id/1014/1280/600" />
    <source media="(min-width:768px)" srcset="//picsum.photos/id/1028/1000/550" />
    <source media="(min-width:640px)" srcset="//picsum.photos/id/1027/770/500" />
    <source media="(min-width:480px)" srcset="//picsum.photos/id/1025/640/450" />
    <source media="(min-width:320px)" srcset="//picsum.photos/id/1020/480/300" />
    <img src="//picsum.photos/id/1044/1400/550" alt="Lorem Picsum images" />
</picture>

Explicação rápida para quem não conhece bem o elemento picture. Ele funciona de modo parecido com os elementos audio e video, onde adicionamos diferentes arquivos ultilizando a tag source, e a primeira que se encaixa nas preferências é aquela que será usada.

Minimize a página ou use o modo responsivo do navegador para ver seu funcionamento.