Jump to content
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.
- – -
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.