thanks.

I also bookmarked this article to Instapaper over the weekend and just took a look, and the last point under “cons” is an interesting problem. The technique he proposes, as well as the one you propose here, will probably cause image detection failures if the page is pinned to Pinterest, posted as a link to Facebook, or shared in other scenarios that detect and copy images.

Using data-attributes for this would be pretty sweet, but like you pointed out, it’s not quite here yet, and probably a long time coming. You could write a little jQuery to generate that CSS, but that might be over-engineering.

Let me know if you end up doing something with it.

/* mobile/no media query support */
   [role="img"] {
       background-image: attr('data-small-img');
       padding-top: attr('data-aspect-ratio-padding');
   }
   @media screen and (min-width: 800px) {
       [role="img"] {
            background-image: attr('data-standard-img');
       }
    }
    @media screen and (min-device-pixel-ratio: 1.5) {
       [role="img"] {
            background-image: attr('data-hires-img');
       }
    }

…but if I understand it correctly, the css attr() function in CSS2.1 can only be applied to generated content, and its status in CSS3 is currently listed as “at-risk”. It was drafted, I believe, as being able to supply a value to any CSS property, like I want it to do here.

That really seems like it would be a accessible and flexible solution to the incredibly annoying responsive-image src problem.