Use of picture tag showing multiple images simultaneously

Question

Hello, I’m having some problems with the picture tag, in this case we use the tag to show images responsibly, adapting the image for each device, but if I want to show more than one image simultaneously, it is possible with this tag ?

Ex:

<figure class="item">
   <picture>
      <source srcset="cloud.png" media="(min-width:768px)" />
      <source srcset="children.png" media="(min-width:450px)" />
      <img src="bg.jpg" alt="imagem de fundo do banner" />    
   </picture>
</figure>

Display jpg constantly, and toggle (or show both png’s above jpg) only between png’s is possible ?

Answer 1

I don’t know if it suits you, but you can use a background image on the Figure tag, and the Pngs on top.

I made below a very simple model of what I’m talking about. (Also show "Whole Page" to see changing the images.)

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

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

Use two . png at the same time the way you want it gets complicated, because if they have the same media="(min-width: ;)" a going overwrite the other, and with different values they will never appear at the same time understands.

Another example, now with Two Images. Only they are used two tags <img> with the srcset and sizes within it. The background-image is on the tag <figure>

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

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

I also suggest reading these two articles to better understand the srcset and Sizes

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

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