W3C home > Mailing lists > Public > public-respimg@w3.org > March 2015

src: attr(data-src)

From: Daniel Ĺsberg <asberg3@hotmail.com>
Date: Thu, 12 Mar 2015 21:55:09 +0000
Message-ID: <DUB121-W40C76E7346050046310D23FC060@phx.gbl>
To: "public-respimg@w3.org" <public-respimg@w3.org>
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

 		 	   		   		 	   		  
Received on Friday, 13 March 2015 10:19:59 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 17:06:16 UTC