Hey everyone,<\/p>\n
I guess a lot of you guys aren’t signed up to the whatwg mailing list so I thought it’d be good to give an update on what’s going on. I don’t claim to be an authority, in fact I’m sure my knowledge is flawed; Also things are moving so fast that any information here might be plain wrong by the time you read it! (please leave a comment if you see an error)<\/p>\n
How srcset really works (-ish!) For a much better explanation read Bruce Lawson’s great html5doctors post<\/a> Tab’s suggestion Going forward * there is discussion whether “600w” should reference the maximum viewport or minimum viewport, however for the sake of brevity I’m going to just to talk about minimum.<\/p>\n","protected":false},"excerpt":{"rendered":" Hey everyone, I guess a lot of you guys aren’t signed up to the whatwg mailing list so I thought it’d be good to give an update on what’s going on. I don’t claim to be an authority, in fact … Continue reading
\n<\/strong>When an image tag reads <img src=”mobile.jpg” alt=”” srcset=”medium.jpg 600w, desktop.jpg 1000w”> what this means is: default to mobile.jpg, unless the viewport width<\/strong> is greater* than 600px then the browser is free to choose mobile.jpg or medium.jpg as it sees fit. Once the viewport width is greater than 1000px the browser is free to choose any of the three images.<\/strong><\/p>\n
\n<\/strong><\/p>\n
\n<\/strong>On the mailing list Tab Atkins (& others) suggested the following CSS like notation might be more helpful<\/a>:
\n<img src=”mobile.jpg” alt=”” srcset=”medium.jpg min-width:600px, desktop.jpg min-width:1000px”>
\nAnd the browser would be free to choose any<\/strong> image where it’s corresponding media query is satisfied (this is different to <picture> where the browser gets no choice). Also only a subset of media queries would be allowed (min-width, max-width and maybe min-pixel-density). This is more friendly to developers that know CSS, it’s more readable and allows for units other that px to be used. On the downside it’s slightly more verbose.<\/p>\n
\n<\/strong>I’d suggest you all join up to the mailing list<\/a>, but if you don’t want to receive dozens of emails a day, feel free to leave comments\/thoughts below.
\n<\/strong><\/p>\n