Re: The picture element: complexity

On 12 September 2013 11:37, Anselm Hannemann <info@anselm-hannemann.com>wrote:

> On 12.09.2013, at 17:35, Reinier Kaper <rp.kaper@gmail.com> wrote:
>
>
>>
>>  Why can't we do something like <img src="some-lowres.jpg,
>>> somewhat-higher-res.jpg, very-high-res.jpg" > and then use CSS selectors
>>> to
>>> decide which src to apply?
>>> Very rough example:
>>> @media (min-width: 18em) {
>>>   img {
>>>     src: 1 // This would be an index based number and if not found,
>>> default
>>> to 0
>>>   }
>>> }
>>>
>>
>> Because browsers want to start downloading the correct image before
>> stylesheets have been downloaded and parsed.
>
>
> That's why I proposed that browser download only the first source file by
> default. This will create extra overhead for when the CSS has been parsed
> (and an alternative source needs to be downloaded) of course, which might
> be an issue, but at least there's no tie-in between mark-up and CSS and
> there will always be an image to display.
>
>
>
> Just on the last: This is what we need to avoid. Double-download is a
> no-go for a responsive images solution and in such a case wouldn't solve
> the attempt to reduce image load and improve performance.
>

And there's no way for a browser to detect *if* CSS will be parsed?
So you'd end up with two scenarios:
1. No CSS will be parsed on this page, therefore load src[0];
2. CSS *will* be parsed on this page, therefore don't start downloading
image resources yet;
  2.1 When CSS parsing takes place: detect which media query is used and
load the corresponding src accordingly.

The issue here would be when the browser scales up/down, but then
alternative resources should be loaded asynchronously and only fully loaded
sources should be replacing the previous one.

Maybe I just don't have the technical knowledge, but to me it seems this is
something that the browser would ideally deal with.