src: attr(data-src)

I’m sorry if this has been addressed already, but I couldn’t find anything similar. And I could be a bit off as I have not followed all the discussions regarding responsive images.


But. Having "media queries" within the html doesn’t feel like the best solution.
Could the responsive images be defined like this instead? (might need some additions to the new attr())


CSS:
@media (min-width: 400px) {    img {        src: attr(data-src-sm image, src);    }
}


@media (min-width: 800px) {    img {        src: attr(data-src-lg image, src);    }
}


@media (min-width: 400px) and (min-device-pixel-ratio: 1.5) {
    img {
        src: attr(data-src-sm2x image, src);
    }
}


@media (min-width: 800px) and (min-device-pixel-ratio: 1.5) {
    img {
        src: attr(data-src-lg2x image, src);
    }
}


HTML:
<img 
src=”image.jpg” 
data-src-sm=”image-sm.jpg” 
data-src-sm2x=”image-sm2x.jpg”
data-src-lg=”image-lg.jpg” 
data-src-lg2x=”image-lg2x.jpg”
/>


ALTERNATIVE (with some changes to the CSS too):
<picture
data-src-sm=”image-sm.jpg” 
data-src-sm2x=”image-sm2x.jpg”
data-src-lg=”image-lg.jpg” 
data-src-lg2x=”image-lg2x.jpg”
/>
    <img src=”image.jpg” />
</picture>


Or what is lacking with this solution compared to current <picture>/srcset-specification where pretty much everything is defined in the markup?


/Daniel