Re: The picture element: complexity

If I may pitch in on this discussion from a front-ender's perspective: I
don't see why we would ever want to have media-queries in our markup, isn't
the separation of HTML and CSS one of the goals?

I get this is an edge case, as it concerns serving images, which is
technically not CSS related, but the media queries are.

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
  }
}

Writing this down, couldn't browsers by default parse images and depending
on the media query index decide the source?
So if I have 4 media queries, all images when displaying query 2, would
grab the src[2] image. Query 3 would show src[3], etc... And always a
fallback to src[0] which is a required attribute anyway.

Again, this is a grey area, as it's neither strictly mark-up nor Styling,
but this way you can have browsers always default to the first source file
(preferably the lowest res to save resources, but it's up to the author)
and then use CSS to serve different quality images based on the CSS media
queries.

Maybe this has been proposed before, I'm sorry if it has, but I feel
there's no place for direct CSS related items in the mark-up, as it would
mean you'd have to change both the mark-up and CSS when a media query
changes.

Regards,
Reinier.


On 12 September 2013 09:53, Simon Pieters <simonp@opera.com> wrote:

> On Thu, 12 Sep 2013 13:50:08 +0200, Anselm Hannemann <
> info@anselm-hannemann.com> wrote:
>
>  Hi Simon,
>>
>> while I totally understand <picture> with its source elements is complex
>> to implement and needs more tests than a simple attribute I wonder what you
>> would propose as alternative to e.g. media-query usage within source
>> elements. This is needed to solve the art direction use-case (
>> http://usecases.**responsiveimages.org/#art-**direction<http://usecases.responsiveimages.org/#art-direction>
>> )
>>
>
> Art direction based on viewport width is supported by srcset.
>
>
>  amongst others (like high-contrast or print – compare: http://usecases.**
>> responsiveimages.org/#**matching-media-features-and-**media-types<http://usecases.responsiveimages.org/#matching-media-features-and-media-types>
>> ).
>>
>
> The example with the pie chart that wants colors on color devices but a
> wide gray scale on non-color devices could be implemented using an SVG
> image with media queries in CSS.
>
> For the print case, it's not clear to me that it is a good idea to block
> printing a page on downloading a heavy image compared to providing a link
> to a page with heavy images (e.g. a PDF) for printing that the user can
> navigate to and print.
>
>
>  If you have an idea how this could be solved using an easier to implement
>> syntax, I would be happy to help doing this. Simply I believe (and know for
>> certain) the srcset attribute alone is not enough to solve the 'Responsive
>> Images' problem entirely.
>>
>
> I see several options.
>
> (1) Use only <img src> and serve a scaled down low quality high-resolution
> image to everyone (which is the same size in bytes as a high quality
> low-resolution image and is visually good enough on both low and high
> resolution devices), and solve the art direction use cases with CSS
> clipping and rotation etc.
>
> For devices that don't have a high-resolution screen and/or have limited
> memory, the browser can store a scaled down version of the image in memory.
> I'm told JPEG can be decoded at half of the resolution for free (
> https://twitter.com/**pornelski/status/**377770545661894656<https://twitter.com/pornelski/status/377770545661894656>). It would be a good idea for browsers to do that regardless of what we do
> for responsive images to have a nicer failure mode when loading big images
> on memory-constrained devices.
>
> (2) Go with srcset and leave the use cases it doesn't address to SVG or
> CSS.
>
> (3) Redesign the picture element to encode the same information in
> attributes on <img>.
>
> For instance, change
>
> <picture width="500" height="500">
>    <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg
> 2x">
>    <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
>    <source srcset="small-1.jpg 1x, small-2.jpg 2x">
>    <img src="small-1.jpg" alt="" lazyload>
>    <p>Accessible text</p>
> </picture>
>
> to
>
> <img mediaset="(min-width: 45em), (min-width: 18em), all"
>      srcset1x="large-1.jpg, med-1.jpg, small-1.jpg"
>      srcset2x="larse-2.jpg, med-2.jpg, small-2.jpg"
>      src="small-1.jpg" alt="Accessible text">
>
> where "1x" and "2x" in the attribute name can be an arbitrary number,
> including non-integers.
>
>
> --
> Simon Pieters
> Opera Software
>
>