You’ve missed the point. Your solution is elegant but it doesn’t work because, as others have alluded to, of prefetching. By the time the CSS is parsed and your media query is run, the browser has long since requested the original src of the image and is busy downloading it.
The point is to find a solution without wasted bandwidth and unnecessary requests. We can swap sources from data- attributes now with JavaScript, but it doesn’t solve the problem.
- – -
I can’t speak for Mat, but I do think that much if the urgency behind picture is that we can’t just solve it with JavaScript (at least not very well) in the meantime and wait for a standards-based solution to come much later.
I also think that complaints about the verbosity of picture are overstated – Mat mentioned “hero” images and its worth remembering that picture is not supposed to supplant img entirely, just to be used where its really needed. It’s typically unlikely to be more than 1 or 2 images per page and 2 or 3 sources per image, if its used at all.
David Goss
@Rudie
You’ve missed the point. Your solution is elegant but it doesn’t work because, as others have alluded to, of prefetching. By the time the CSS is parsed and your media query is run, the browser has long since requested the original src of the image and is busy downloading it.
The point is to find a solution without wasted bandwidth and unnecessary requests. We can swap sources from data- attributes now with JavaScript, but it doesn’t solve the problem.
- – -
I can’t speak for Mat, but I do think that much if the urgency behind picture is that we can’t just solve it with JavaScript (at least not very well) in the meantime and wait for a standards-based solution to come much later.
I also think that complaints about the verbosity of picture are overstated – Mat mentioned “hero” images and its worth remembering that picture is not supposed to supplant img entirely, just to be used where its really needed. It’s typically unlikely to be more than 1 or 2 images per page and 2 or 3 sources per image, if its used at all.