Should u-* parsing special case img srcset?

[tantek]

Responsive images add the 'srcset' attribute to the 'img' tag which can then provide a variety of image resolutions, both in density and pixel size.

Should u-* on an img tag pay attention to the srcset attribute, and if so, how?

Summary of srcset here https://indieweb.org/srcset

[snarfed]

yes! use case: snarfed/bridgy#592 (comment) . a few people want bridgy publish to support srcset, specifically to publish the largest available image that's under a silo's size limit. e.g. twitter's is 5MB.

cc @jonnybarnes and @petermolnar for example posts.

[jonnybarnes]

Here’s an initial post that uses srcset: https://jonnybarnes.uk/notes/GE

[jonnybarnes]

It appears php-mf2 leaves the srcset attribute blank: https://pin13.net/mf2/?url=https%3A%2F%2Fjonnybarnes.uk%2Fnotes%2FGE

[sknebel]

#2 proposes already to expand images into an object with url and alt attributes. This object could be expanded to cover srcset as well.

Looking at the examples linked, from my understanding the sizes attribute doesn't need to be preserved since it depends on the design of the specific page and does not transfer over into different displays (a downstream consumer displaying it could insert a sizes attribute in their own page, matching their own stylesheets.

based on example HTML from the wiki:

<img 
  class="u-photo"
  src="http://example.com/img-360x540.jpg" 
  alt="img" 
  srcset="img-240x360.jpg 360w, img-360x540.jpg 540w, img-653x980.jpg 980w, img-853x1280.jpg 1280w" 
  sizes="(min-width: 960px) 50vw, 100vw"
/>

The parser could just pass on the content of srcset, leaving the downstream consumer to handle it completely, giving output along the lines of

…
"photo": {
   "value": "http://example.com/img-360x540.jpg",
   "alt": "img",
   "srcset": "img-240x360.jpg 360w, img-360x540.jpg 540w, img-653x980.jpg 980w, img-853x1280.jpg 1280w" 
}

, or transform it into some kind of more detailed structure (suggestions at what that'd ideally look like for a consumer? Seems like @snarfed would only want something where the full list of images is easy to get from, since the parameters don't actually matter for bridgy?)

[sknebel]

@grantcodes I believe you were interested in this too, any feedback?

[grantcodes]

@sknebel yeah, I didn't comment as my use case is very different, and probably not a microformats issue.

I am trying to generate html from mf2 json and very rarely want to show a full resolution image. Your proposal may work for that but honestly I have not thought about it enough to be sure.

[snarfed]

friendly nudge! this came up in chat just now: https://chat.indieweb.org/dev/2020-04-03#t1585936229416600

[dshanske]

Would suggest sourceset might be best parsed out.

"srcset": "img-240x360.jpg 360w, img-360x540.jpg 540w, img-653x980.jpg 980w, img-853x1280.jpg 1280w"

turning into

"srcset": {
   "360w": "img-240x360.jpg", 
   "540w": img-360x540.jpg",
   "980w": img-653x980.jpg", 
   "1280w": img-853x1280.jpg"
}

[jgarber623]

Building on @dshanske's comment with some uses cases pulled from MDN's Responsive Images tutorial. URLs are resolved based on a hypothetical source page/base URL at http://example.com/.

Simple <img> element

<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

"photo": [
  {
    "value": "http://example.com/elva-fairy-800w.jpg",
    "alt": "Elva dressed as a fairy"
  }
]

<img> element with srcset attribute

<img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">

"photo": [
  {
    "value": "http://example.com/elva-fairy-800w.jpg",
    "srcset": {
      "480w": "http://example.com/elva-fairy-480w.jpg",
      "800w": "http://example.com/elva-fairy-800w.jpg"
    },
    "alt": "Elva dressed as a fairy"
  }
]

<img> element with srcset attribute and implied descriptor

<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg"
     alt="Elva dressed as a fairy">

"photo": [
  {
    "value": "http://example.com/elva-fairy-640w.jpg",
    "srcset": {
      "1x": "http://example.com/elva-fairy-320w.jpg",
      "1.5x": "http://example.com/elva-fairy-480w.jpg",
      "2x": "http://example.com/elva-fairy-640w.jpg"
    },
    "alt": "Elva dressed as a fairy"
  }
]

The above example demonstrates how to handle this note from the documentation:

If no descriptor is specified, the source is assigned the default descriptor: 1x.

[jgarber623]

Don't look now, but there's also the imagesrcset attribute on <link> elements: https://html.spec.whatwg.org/multipage/indices.html#attributes-3

Same values permitted: a comma-separated list of image candidate strings.

[dshanske]

The conclusion at the end of today's Microformats online session was that someone should try implementing this behind an experimental flag to move forward with this idea.