[whatwg] <imgset> responsive imgs proposition (Re: The src-N proposal)

[lists@ericportis.com]

On Tue, Nov 12, 2013 at 9:50 AM, Adam Barth <w3c at adambarth.com (mailto:w3c at adambarth.com)> wrote:
> We might even be able to make this work without inventing anything:
>  
> <style type="text/css">
> @media (min-width: 480px) {
> .artdirected {
> width: 30px;
> height: 30px;
> background-image: image-set(url(small.png) 1x, url(small-hires.png) 2x);
> }
> }
> @media (min-width: 600px) {
> .artdirected {
> width: 60px;
> height: 60px;
> background-image: image-set(url(large.png) 1x, url(large-hires.png) 2x);
> }
> }
> </style>
> <div class="artdirected"></div>

Would the <style> element have to reside inline, to reap the performance benefits?



On Tuesday, November 12, 2013 at 11:47 AM, Tab Atkins Jr. wrote:






> On Tue, Nov 12, 2013 at 10:44 AM, Anselm Hannemann
> <info at anselm-hannemann.com (mailto:info at anselm-hannemann.com)> wrote:
>  
>  
> > Really? An empty div element? What about accessibility or When CSS cannot be loaded? What if only html is grabbed by another page? It doesn't seem to be a really solid solution in my opinion.
>  
> Right, that's not great, but once we finally define the "replaced"
> keyword for the 'content' property, you should be able to set it
> directly on <img>s, like:
>  
> <style>
> .foo {
> content: replaced image-set(...);
> }
> </style>
> <img class='foo' src="fallback”>
>  
>  
>  


In the meantime, this might be a little more fallback-friendly, when combined with some styles to hide the <a> in capable browsers:

<div class=“foo”><a href=“fallback.jpg”>Alt text</a></div>

But regarding both this and Adam’s original proposal… losing the ability to mark up a content image seems like a huge sacrifice. I imagine services like Google Images and Pinterest rely on images being first-class content citizens, in-markup right alongside paragraphs, videos, audio, etc…

Thus, Tab’s suggestion seems far superior in the long term, as long as we can be sure (?) that no one is incurring a double-load of the fallback + the replaced image.



—eric