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 -->

Usar dois .png ao mesmo tempo da forma que vc quer fica complicado, pq se eles tiverem o mesmo `media="(min-width: ;)"` um vai *sobrescrever o outro*, e com valores diferentes eles *nunca vão aparecer ao mesmo tempo* entende.

Outro exemplo, agora com Duas imagens. Só que são usei duas tags `<img>` com o `srcset` e `sizes` dentro dela. O `background-image` está na tag `<figure>`

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

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

    html, body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }
    .item {
        background: url(http://placecage.com/600/400) no-repeat;
        background-size: cover;
        padding: 10px;
        position: relative;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 60%;
    }
    img {
        margin: auto;
    }

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

    <figure class="item">
        <picture>
            <!-- <source srcset="no.png" 
            media="(min-width:400px)" 
            /> -->
            <!-- <img src="http://placecage.com/300/300" alt="imagem de fundo do banner" />     -->

            <img src="https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/114/f-cross_256-128.png"
                srcset="https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/114/f-cross_256-512.png 800w,
                https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/114/f-cross_256-256.png 400w,
                        https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/114/f-cross_256-128.png 200w"
                sizes="(min-width: 33%) 33.3vw,
                        50vw"
                alt="A rad wolf" />

            <img src="https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/137/f-check_256-128.png"
                srcset="https://cdn4.iconfinder.      com/data/icons/icocentre-free-icons/137/f-check_256-512.png 800w,
                        https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/137/f-check_256-256.png 400w,
                        https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/137/f-check_256-128.png 200w"
                sizes="(min-width: 33%) 33.3vw,
                        50vw"
                alt="A rad wolf" />

        </picture>
    </figure>


<!-- end snippet -->

> Sugiro também a leitura desses dois artigos para entender melhor o ***srcset*** e ***sizes***

https://ericportis.com/posts/2014/srcset-sizes/

https://bitsofco.de/the-srcset-and-sizes-attributes/