`<img sizes=auto>` triggers wasteful fetches when hiding/removing the image

[noamr]

What is the issue with the HTML Standard?

When reading the current spec around <img sizes=auto>, it seems like both setting an image's display to none, as well as removing the image from the DOM, would trigger re-parsing of the sizes attribute and potentially triggering a fetch.

See https://gist.github.com/noamr/a201b894d0ac5ceea091874e72092023

• We have 5 images in a DIV with a srcset and sizes, that are initially rendered in a size different from the default
• We then remove the DIV (or set it to display:none)
• According to the spec (and current blink), those 5 images would trigger reloading, re-fire the load event, etc.

Interestingly, Firefox does not exhibit this behavior (sizes=auto is not implemented in Safari).

This behavior seems extremely wasteful - if an image is removed/un-rendered, we should probably keep its currentSrc rather than switch it to the fallback, or at least not trigger a reload in that case.

See relevant chromium bug.

[noamr]

Relates to #10110 and #12204

cc @emilio @iamakulov

[noamr]

Also @zcorpan

[emilio]

cc @ltenmoz

[emilio]

This is almost surely due to this early return here.

If the image is not rendered, we just bail, rather than updating the auto width to 0.

[emilio]

Might be reasonable to say that if the image is not rendered, we don't update the auto width?

[noamr]

Might be reasonable to say that if the image is not rendered, we don't update the auto width?

We still want it to have an auto width initially though, no? Perhaps we say we don't update the auto width if it's not rendered and had its auto width updated at least once or some such?

[noamr]

I guess maybe if you create an image with new Image() and give it auto width it's sensible to not try to load anything.