RE: src: attr(data-src)

Hi Daniel,

I suggest you read back through the threads from last week. This approach was covered extensively with some well written responses from Bruce Lawson, Jason Grigsby, and others.

- Jason


Sent from my Android phone using Symantec TouchDown (www.symantec.com)

-----Original Message-----
From: Daniel Åsberg [asberg3@hotmail.com]
Received: Friday, 13 Mar 2015, 6:21AM
To: public-respimg@w3.org [public-respimg@w3.org]
Subject: 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