You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository has been archived by the owner on Mar 3, 2022. It is now read-only.
To avoid this problem we may have to use the same solution as frontend. In brief, we provide a different source element for each breakpoint. These source elements will contain a single URL in the srcset attribute. We can also add a second source for each breakpoint with a min-resolution media query, to provide the DPR 2 URLs:
I think the second option is the most sound, because of how it groups things together and reduced the need for -webkit-device-pixel-ratio, as min-resolution is unsupported on Safari (macOS and iOS).
However, if we wanted to make more granular decisions in the future, maybe based on prefer-reduced-data, we might have to to have one source per “source”.
Worth nothing we can forgo the duplication of sizes in the first option, because there’s only one srcset:
The Problem
This is well summarised in this issue: whatwg/html#4421
Possible Solutions
To avoid this problem we may have to use the same solution as frontend. In brief, we provide a different
source
element for each breakpoint. Thesesource
elements will contain a single URL in thesrcset
attribute. We can also add a secondsource
for each breakpoint with amin-resolution
media query, to provide the DPR 2 URLs:Alternatively it might be possible to include the DPR 2 URLs in the existing breakpoint
source
elements:Note: In this second example we could use the pixel density descriptor instead of the width descriptor, i.e. use
1x
,2x
instead of750w
,1500w
.The text was updated successfully, but these errors were encountered: