Allow multiple values of `importance` depending on media queries
nhoizey opened this issue · 5 comments
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>
, theimportance
can vary based on Art Direction - with
<img srcset sizes>
, theimportance
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.
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.
I was not aware of that, thanks!
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.