New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 732794 link

Starred by 3 users

Issue metadata

Status: Available
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 2
Type: Feature



Sign in to add a comment

Improve image loading (height) on slow connections

Reported by craig.fr...@gmail.com, Jun 13 2017

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.24 Safari/537.36

Steps to reproduce the problem:
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 simple HTML document as an example (you can use any image), and a video to show what happens at the moment.

What is the expected behavior?

What went wrong?
N/A

Did this work before? N/A 

Chrome version: 60.0.3112.24  Channel: beta
OS Version: OS X 10.12.5
Flash Version:
 
image-loading.mp4
53.6 KB View Download
index.html
364 bytes View Download

Comment 1 by sdy@chromium.org, Jun 13 2017

Components: Blink>Image
Labels: -OS-Mac
I like this idea :).
Components: Blink>Layout
Labels: PaintTeamTriaged-20170613 BugSource-User
Status: Available (was: Unconfirmed)
Cc: schenney@chromium.org
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).
Project Member

Comment 6 by sheriffbot@chromium.org, Jan 16

Labels: Hotlist-Recharge-Cold
Status: Untriaged (was: Available)
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue.

Sorry for the inconvenience if the bug really should have been left as Available.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Status: Available (was: Untriaged)
I guess the 'intrinsicsize' attribute could be worth mentioning here:

https://www.chromestatus.com/feature/4704436815396864

Sign in to add a comment