Bug 180580

Summary: Feature request: Improve image loading (height) on slow connections
Product: WebKit Reporter: Craig Francis <craig+webkit>
Component: ImagesAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: e, mjs, nham, simon.fraser
Priority: P2    
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Loading image on a slow connection none

Craig Francis
Reported 2017-12-08 05:55:22 PST
Created attachment 328806 [details] Loading image on a slow connection To avoid reflow while the page is loading (e.g. on a slow connection), we could improve how the image size is calculated. At the moment websites can provide the width/height of the image in the HTML. But websites will typically override the width in CSS to a percentage value, while using `height: auto` (so the aspect ratio is maintained). When this happens, the height of the image is assumed to be 0px, which is nearly always wrong. It's not until the image is downloaded does the correct height get calculated. Could we instead take the width/height (as set in the HTML) and use that to calculate the height while the page is loading. --- I've attached a video to show what happens at the moment.
Attachments
Loading image on a slow connection (155.42 KB, video/mp4)
2017-12-08 05:55 PST, Craig Francis 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Craig Francis
Comment 1 2017-12-08 05:57:21 PST
Also requested on Chrome and Firefox: https://crbug.com/732794 https://bugzilla.mozilla.org/show_bug.cgi?id=1424247
Craig Francis
Comment 2 2018-01-16 02:04:19 PST
Suggestion from fantasai on the Firefox issue log... Assuming the CSS `aspect-ratio` property is added, that would be a perfect way to introduce this: https://github.com/WICG/aspect-ratio When the width/height attributes from the <img> are copied into the CSS properties, the browser could also set a default `aspect-ratio`. So that when the websites CSS is processed (and replaces the width/height), the aspect-ratio will still be available for any missing values (e.g. height: auto).
Eric Portis
Comment 3 2019-12-04 16:43:58 PST
Consensus on using width/height to establish <img> aspect ratio before the resource has loaded was achieved here: https://github.com/WICG/intrinsicsize-attribute/issues/16 Firefox shipped this today in v71 and has been doing some significant developer outreach/education about it: https://twitter.com/jensimmons/status/1201950419334897664 Chrome will ship this in M79, on Dec 9th: https://chromestatus.com/feature/5695266130755584 Web platform tests are here: https://wpt.fyi/results/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.html?label=master&label=experimental&aligned&q=aspect-ratio Bring this feature to WebKit!
Maciej Stachowiak
Comment 4 2019-12-04 16:51:32 PST
`aspect-ratio` is prefixed in WebKit, not sure if this is due to non-compliance in some way or just lag. Other than that, all this requires (it seems) is adding this to html.css: img, video { aspect-ratio: attr(width) / attr(height); } (Well, that and test cases). Also seems like this solution might be insufficient for `<picture>`, where often the different sources will have different aspect ratios.
Eric Portis
Comment 5 2019-12-04 17:16:02 PST
Great! > (Well, that and test cases). Test cases beyond the web platform tests? https://github.com/web-platform-tests/wpt/blob/master/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.html > Also seems like this solution might be insufficient for `<picture>`, where often the different sources will have different aspect ratios. Yes! There's some good discussion on what to do about that in the original thread: https://github.com/WICG/intrinsicsize-attribute/issues/16, which has since moved to this issue: https://github.com/whatwg/html/issues/4961 TL;DR maybe we can send `height` and `width` from the `<source>` to the `<img>`, along with the `src`? Comments are still being gathered and it hasn't been spec'd anywhere yet.
Eric Portis
Comment 6 2019-12-06 13:52:19 PST
One possible problem with the UA rule... If the actual aspect ratio of the resource differs from `attr(width) / attr(height)`, Both Chrome and Firefox will NOT distort the image; they discard the `height`/`width` ratio, and use the image's actual, intrinsic ratio. The proposed UA rule would do the opposite, I think?
Eric Portis
Comment 7 2019-12-23 10:31:35 PST
Looks like this can be marked as a duplicate of https://bugs.webkit.org/show_bug.cgi?id=201641, where this is being actively worked on
Simon Fraser (smfr)
Comment 8 2020-01-22 14:54:59 PST
*** This bug has been marked as a duplicate of bug 201641 ***
Note You need to log in before you can comment on or make changes to this bug.