Não sei se te atende, mas vc pode usar um Background imagem na tag Figure, e os PNGs por cima.

Fiz abaixo um modelo bem simples do que estou falando. *(Exiba também "Página Toda" para ver mudando as imagens.)*

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    .item {
        background: url(http://placecage.com/600/200) no-repeat;
        background-size: cover;
        padding: 10px;
        position: relative;
        display: flex;
    }
    picture {
        margin: auto
    }

<!-- language: lang-html -->

    <figure class="item">
      <picture>
         <source srcset="https://cdn.sstatic.net/Sites/br/img/sprites.svg?v=554232ea0d79" media="(min-width:768px)" />
         <source srcset="https://lh3.googleusercontent.com/nYhPnY2I-e9rpqnid9u9aAODz4C04OycEGxqHG5vxFnA35OGmLMrrUmhM9eaHKJ7liB-=w170" media="(min-width:450px)" />
         <img src="http://placecage.com/300/300" alt="imagem de fundo do banner" />    
      </picture>
    </figure>

<!-- end snippet -->