1424247 - Feature request: Improve image loading (focusing on slow connections)

Status: RESOLVED INVALID

(Core :: Layout: Images, Video, and HTML Frames, defect, P3)

Description

[Craig Francis]

Attachment: Loading image on a slow connection

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20171112125346

Steps to reproduce:

Can Firefox follow other browsers (e.g. Chrome/Safari), and only show the image alt text when the image fails to load.

I'd also like Firefox to do it better though...

Considering many websites set the image `width` in CSS with a percentage value, and `height: auto` (so the aspect ratio is maintained)... other browsers will typically render the image as 0px high (Firefox at this point is showing the alt text).

It's not until the image starts to load do we get a page reflow, so the image has the correct space to be displayed - this re-flowing is annoying on a slow connection, as the page content moves.

Could we instead take the width/height attributes (if set in the HTML) and use that to do an initial height calculation?

---

Kind of related:
https://bugzilla.mozilla.org/show_bug.cgi?id=580003
https://bugzilla.mozilla.org/show_bug.cgi?id=41924

I've attached a video to show what happens at the moment.

Comment 1

[Craig Francis]

As an aside, this is why we have web developers do things like this:

https://www.codecaptain.io/blog/web-development/responsive-images-and-preventing-page-reflow/474

https://stackoverflow.com/questions/16850988/responsive-design-image-how-to-set-width-height-to-avoid-reflow-on-image-load

https://stackoverflow.com/questions/45869454/responsive-img-without-reflow

And I should note - alt text is very important. I'm not suggesting we get rid of it. I'm just hoping we can only show it when images fail to load. This would create a better loading experience for anyone on a slow connection (or anyone waiting for lots of images to load); rather than websites deciding to not include alt text because it can "look ugly when the page is loading".

Comment 2

[Craig Francis]

Also requested on Chrome and Safari:

https://crbug.com/732794
https://bugs.webkit.org/show_bug.cgi?id=180580

Comment 3

[Jet Villegas (inactive)]

Good suggestions here. Tantek: can you capture these on the appropriate spec bug for review with the other vendors? Thx!

Comment 4

[Tantek Çelik]

Firefox behavior (show alt text while image is unavailable for any reason) is both per spec, and something Hixie's old "alt" tests actually tested for, so I'm going to close this as INVALID since this conforms to the HTML4, HTML5, HTML living standard specs AFAIK, and very deliberately so (changing this would potentially break our spec compliance).

The "anyone on a slow connection (or anyone waiting for lots of images to load)" use-case is a good example of when a user would rather see *something* (alt) instead of the images, so they could potentially not load images by default then load only the images that they think are relevant to them (per the visible alt text). The additional reasons given in https://bugzilla.mozilla.org/show_bug.cgi?id=580003#c3 are also valid.


That being said, more developer control over image loading vs. alt text display is a reasonable use-case (per cited codecaption/stackoverflow URLs) to pursue a new spec / feature(s). There is no existing spec for this kind of thing so there's no spec bug to capture this on.


Craig, can you send an email to [e-mail] (feel free to cc my email above) to get this conversation (re)started in the W3C CSS Working Group?
 
Perhaps a subject like "Control over progressive rendering image src vs alt" 
and cite the URLs you gave, as well as:
* https://www.w3.org/TR/NOTE-CSS-potential#id20550108161 (public link)
* https://www.w3.org/Style/Group/1998/09/progrend-19980930.html (W3C Member Only link) - I'm the author of this old proposal, so I'm a bit biased (still want this, nearly 20 years later) so it would be good to have you (instead of me) requesting it :)

Thanks!

Tantek

Comment 5

[Craig Francis]

Thanks Tantek, I've sent an email (and cc'ed you in) to the www-style mailing list:

https://lists.w3.org/Archives/Public/www-style/2018Jan/0023.html

Comment 6

[Daniel Holbert [:dholbert]]

(In reply to Craig Francis from comment #0)
> It's not until the image starts to load do we get a page reflow, so the
> image has the correct space to be displayed - this re-flowing is annoying on
> a slow connection, as the page content moves.
> 
> Could we instead take the width/height attributes (if set in the HTML) and
> use that to do an initial height calculation?

That's what we already do, I think, *if* the img element has "display:inline-block" or "display:block". Sample (using a broken image but it should be the same with a working one): https://jsfiddle.net/0trfpbbt/

From a sizing perspective, maybe this is already sufficient to grant the kind of control that's been suggested here?

Otherwise, the img's alt-text is rendered as an inline text-box a display:inline -- as if it were a <span> basically, which doesn't get any say about its size (unless you change its display value).  See also bug 851048 (which isn't a firefox bug, and is only open in order to be useful to track cases where websites have unfortunately come to depend on non-spec-compliant behavior).

Comment 7

[Daniel Holbert [:dholbert]]

> Otherwise, the img's alt-text is rendered as an inline text-box a display:inline

Sorry, this ended up being kind of a typo-ish non-sequitor. I meant to say:
"Otherwise -- i.e. if you leave an <img> element's 'display' value at its default value of 'inline', and the img is broken (or waiting for data, which for now is equivalent) -- then it renders its alt-text as an inline box of text."

Comment 8

[Craig Francis]

Attachment: Loading image with "display: inline-block"

@dholbert ... good point about the image being inline.

So I can set the image to "display: inline-block", but it still causes a page reflow.

What I'd like is for Firefox to take the width/height in pixels from the HTML attributes, and use that to work out the images initial height when the CSS sets the width (e.g. 50%).

Then, when the image does start to load, Firefox can start using the width/height from the image file itself (which would ideally be the same, but we should assume that website developers will make mistakes).

I've attached a video where the image has used "display: inline-block", and you will see how the "Example Text" moves down the page, when the image begins to load.

Comment 9

[fantasai]

The underlying problem is that the width/height attributes are copied into width/height properties in CSS, and then they get overwritten by the CSS, so we've lost the information about the aspect ratio that we need in order to size the image as an image. We're looking into adding an 'aspect-ratio' property in the future, though, and if the preshint level would calculate and cascade in an 'aspect-ratio' value, then we should be able to solve this problem.

Comment 10

[Craig Francis]

Thanks @fantasai

Assuming aspect-ratio is added, that would be a perfect way to introduce this.

If I'm understanding this correctly, 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).

https://github.com/WICG/aspect-ratio

Comment 11

[fantasai]

Yes, exactly. Tab and I are planning to draft this into Sizing L4, once we finish Sizing L3. I'm hoping that'll be in Q1 of this year (but I've learned it's hard to predict). :)

Comment 12

[Craig Francis]

Thanks @fantasai, really appreciate everything you (and Tab) do for the standardisation process.