'Do not select photos in different sizes with tags picture

Did I mistype the sizes section? I do not think it switches properly between images. Is it mandatory to write the sizes section?

<picture>
        <source
          type="image/webp"
          srcset="
            images/banner@1x_w200.webp   200w,
            images/banner@2x_w709.webp   709w,
            images/banner@3x_w1029.webp 1029w,
            images/banner@4x_w1262.webp 1262w,
            images/banner@5x_w1400.webp 1400w
          "
          sizes="(min-width:200px) 60vw, 200px,
          (min-width:709px) 70vw, 709px,
          (min-width:1029px) 80vw, 1029px,
          (min-width:1262px) 90vw, 1262px
          (min-width: 1400px) 100vw, 1400px"
        />
        <source
          type="image/png"
          srcset="
            images/banner@1x_w200.png   200w,
            images/banner@2x_w709.png   709w,
            images/banner@3x_w1029.png 1029w,
            images/banner@4x_w1262.png 1262w,
            images/banner@5x_w1400.png 1400w
          "
        />
        <img class="hero__image" src="images/banner@5x_w1400.png" alt="" />
      </picture>
htmlimageresponsive


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions