Proposal

What if media queries and breakpoints could stay in the .css file?

What if the image source was chosen based on the dimensions of the <picture> element instead?

Media queries would apply size restrictions to images based on css classes.

The element itself would only be responsible for providing a collection of URLs, described by their size, in pixels, and their mime-type.

The UA would be able to choose the best match based on the pixel density muliplier and available bandwidth.

This means more work for RICG, as we need to specify a reccomended selection algorithm, but I believe that's something we need to do anyway.

Old syntax

<picture alt="Description of image subject."> 
  <source srcset="small.jpg 1x, small-highres.jpg 2x"> 
  <source media="(min-width: 18em)" srcset="med.jpg 1x, med-highres.jpg 2x"> 
  <source media="(min-width: 45em)" srcset="large.jpg 1x, large-highres.jpg 2x"> 
  <img src="small.jpg" alt="Description of image subject."> 
</picture>

New syntax (css)

@media (min-width: 18em) picture{
  max-width:320px;
}
@media (min-width: 45em) picture{
  max-width:800px
}

New syntax (html)

<picture alt="Description of image subject."> 
  <source src="small.jpg" width=300 height=200 type="image/jpeg" />
  <source src="med.jpg" width=600 height=400 type="image/jpeg" />
  <source src="large.jpg" width=1200 height=800 type="image/jpeg" />
  <source src="large.webp" width=1200 height=800 type="image/webp" />
  <img src="small.jpg" alt="Description of image subject."> 
</picture>

Benefits

DRY and separation of concern - breakpoints do not have to be specified in-markup
Fewer image variations have to be described - pixel density is handled intrinsically (large is hi-res version of medium, etc)
No complicated parsing. One value per attribute - simple!
Highly forward-flexible - We can invent CSS properties such as 'picture-select: highres` to provide browsers with suggestions or overrides (logos, for example, we might prefer to always be highres, while content pictures can degrade on slow connections, etc)

Prefetch considerations

We know browser vendors would prefer to prefetch images before CSS downloading completes, but I propose that goal be suspended for a moment. Delaying the prefetching of multi-source images until after css (or a portion thereof *) has been parsed would offer many advantages; I also don't see how the UA would be able to make an intelligent choice concerning resolution until layout has been somewhat established.

* An otherwise null-op CSS property (like "allow-picture-select: now;" could signal to the browser when image source selection can safely be made. I don't like the idea of such a property, but it could resolve the prefetching issue if it's sufficiently important, and we could suggest that picture rules be placed at the beginning of CSS, like we do with fonts.

Disclaimer

This idea popped into my head around 3am, as I was reading the mailing list feed. Since I wrote it before becoming fully awake, there's a strong possibility I overlooked something important. Please comment!

lilith/alternate.md