Allow multiple values of importance depending on media queries

[nhoizey]

This follows a Twitter discussion with @zcorpan. Here is the full thread in one place.

This is a suggestion to discuss the opportunity to let developers define multiple values for importance based on Media Queries, like we do for the responsive images.

I see at least 2 use cases:

• with <picture><source media>, the importance can vary based on Art Direction
• with <img srcset sizes>, the importance can vary based on layout changing across viewports, an image being above the fold on large viewports but below on thinner viewports

For the first use case, we would need to allow using the importance attribute on source elements (as we need for the alt attribute).

For both use cases, the syntax could be the same as for sizes: importance="(min-width: 50em) high, low".

To ease using multiple times the same Media Queries in <source media>, sizes and importance, we could suggest developers to use custom MQs, as suggested by @zcorpan.

I talked about viewport based Media Queries here, but some other Media Queries might be useful too.

[nhoizey]

There was a previous discussion about this in #46, with @pmeenan.

[nhoizey]

I might have a counter argument for preload being enough:

In a page built with a set of components, we can know that a component (and so images inside) is above the fold (or at least in the "beginning" of the HTML), but the page itself doesn't necessarily know it.

So using preload can be difficult, because it is "outside" the component. importance is easier to use because it is located where the image is.

[zcorpan]

preload is body-ok, so you can use it right before the image.

[nhoizey]

I was not aware of that, thanks!

[pmeenan]

The only edge-case I can think of that isn't covered either directly by picture or preload is if you need to do viewport-specific prioritization AND auto image format selection. This could potentially be handled by adding support for having a <source> inside of a picture element override the importance of the img element it belongs to but I'm not sure that is a common-enough need to justify complicating it more at this point.