0

In the following code below, the media query condition is mentioned in two instances inside the source element.
1- media attribute
2- sizes attribute 

<picture>
<source media="(max-width: 700px)" sizes="(max-width: 500px) 50vw, 10vw"
srcset="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 380w">

<source media="(max-width: 1400px)" sizes="(max-width: 1000px) 100vw, 50vw"
srcset="stick-figure.png 416w, stick-figure-hd.png 800w">

<img src="stick-original.png" alt="Human">
</picture>

I am curious what is the logical reason behind using the media query condition in the mentioned two instances when it could be done in one instance (in media attribute). Isn't it redundant?

Jake
  • 244
  • 2
  • 16

1 Answers1

0

I got it!

First step: media attribute: We make the choice

There are two different images (art-direction, like cropped-images/different-aspect-ration) associated with each media-condition stated inside media attribute.

2nd step: sizes attribute: browser makes the choice

In step-1 a specific image is chosen by us(not browser),

  1. now as we enter in 2nd step

    • we'd find there are provided variants of the same images(same images with just different resolution) in srcset attribute

    • The variants of the same images are provided in the srcset attribute to chose from

  2. The browser will making the choice according to the media-condition given in sizes attribute.

    • the browser will decide and choose which images fits the best

Conclusion

In step-1
we decide the image depending upon the media-condition.
In Step-2
the browser decides the images(the different variant of the same image which we chosen in step-1) out of the choices given in srcset attribute

Jake
  • 244
  • 2
  • 16