- From: Jason Day <jbday@llbean.com>
- Date: Fri, 13 Mar 2015 11:01:53 +0000
- To: "public-respimg@w3.org" <public-respimg@w3.org>, "asberg3@hotmail.com" <asberg3@hotmail.com>
- Message-ID: <AF27D8DEF0A18B4AB7E2A773E75ED1395044736F@LLB-EXMB02.llbean.com>
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
Received on Friday, 13 March 2015 11:02:22 UTC