- From: Joe McGill via GitHub <sysbot+gh@w3.org>
- Date: Fri, 12 Feb 2021 14:24:37 +0000
- To: public-css-archive@w3.org
The natural conflict between prioritizing the ability to preload images before scripts/styles load and the desire to optimize the image loaded based on layout was always the trickiest thing to solve for responsive images. What I see above are basically two different use cases, each of which (as far as I can tell) would need to carry different assumptions about how that prioritization works. **1. Preload images based on a container width** To make this work, you would need to let the browser know what the container width is intended to be before layout is calculated, by applying something like `sizes` attribute to the container. Any children declaring a `srcset` with `w` descriptors that don't supply a `sizes` attribute would default to the closest ancestor's `sizes` rather than the current default of `100vw`. This would satisfy the use case @cramforce [mentioned above](https://github.com/w3c/csswg-drafts/issues/5889#issuecomment-769434134). If the image does include a `sizes` attribute, it could use a container query to declare relative layout intent based on the closest ancestor's `sizes` attribute as @eepps example shows. There's some developer overhead that seems redundant with this syntax, but I think the possibilities would be pretty powerful. **2. Lazy load images based on container width** In the event that image markup relies on a container query or container relative measurements in it's `sizes` attribute, and there is no ancestor supplying a `sizes` context, then image loading would either need to be deferred until after layout is calculated (i.e., treated similarly to lazy loading) or, in cases where `loading="eager"` is intended, the file would be requested using the `100vw` as the default `sizes` context when calculating container-relative sizes for image `srcset` parsing. This isn't ideal, but no different that then current assumption for images supplying a `srcset` without a `sizes` attribute. I think those are acceptable constraints/tradeoffs for the benefits that come from being able to use these new tools in building reusable interface elements that respond to their layout context. -- GitHub Notification of comment by joemcgill Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5889#issuecomment-778225880 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 12 February 2021 14:24:39 UTC