An update on responsive images
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 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)
How srcset really works (-ish!)
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 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.
For a much better explanation read Bruce Lawson’s great html5doctors post
Tab’s suggestion
On the mailing list Tab Atkins (& others) suggested the following CSS like notation might be more helpful:
<img src=”mobile.jpg” alt=”” srcset=”medium.jpg min-width:600px, desktop.jpg min-width:1000px”>
And the browser would be free to choose any 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.
Going forward
I’d suggest you all join up to the mailing list, but if you don’t want to receive dozens of emails a day, feel free to leave comments/thoughts below.
* 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.
Thanks for the mailing list link Phil. My two cents are that the
pictureelement, while great as it is, is still verbose over one line using the familiarimgelement. I am still annoyed however over the confusion of viewports and the misalignment of what is width and what is height. This also follows along with James Pearce’s research where devices can’t seem to get it straight either.Come on now you know? width is width and height is height. W stands for width and H stands for height just as it does in the wild we like to call the ‘real world’ or ‘planet earth.’