Add intrinsicsize attributes to images

[mathiasbynens]

Automated using the following quick and dirty script:
https://gist.github.com/mathiasbynens/c10709d79d5185f08246fbb9d562fee3

cc @loonybear @ojanvafai

This caused me to ponder the following question: WICG/intrinsicsize-attribute#3 (comment) This patch always uses the intrinsic size of the image in the src attribute, ignoring srcset (which I assume is the way to go).

[mathiasbynens]

This change makes such a big difference!

1. Go to e.g. https://v8.dev/blog/fast-async#improved-developer-experience
2. Do a hard refresh (⌘+Shift+R)

Result on Chrome 72: the page keeps jumping around until all images have loaded.
Video: https://www.youtube.com/watch?v=M1V9xv6kPNk

Result on Chrome Canary with chrome://flags/#enable-experimental-web-platform-features enabled: no jumping around at all.
Video: https://www.youtube.com/watch?v=22jO87vnWSs

[backes]

Awesome! This removes a constant annoyance on many pages.
Didn't know about this new feature until now :)

[tigt]

This patch always uses the intrinsic size of the image in the src attribute, ignoring srcset (which I assume is the way to go).

I believe you’re right — Images with only srcset and no <picture> wrapper should only change size, not aspect ratio.

It’s possible they could be badly behaved and do so anyway, but that’s on them and you can’t fix it.

[ojanvafai]

Hmmm...this change makes the experience better even just for the images that are onscreen since the onscreen text doesn't move around when the image loads. But...the page shouldn't jump around even without this change. Scroll anchoring should prevent it. I think this is showing a bug in scroll anchoring that's probably worth filing.

[mathiasbynens]

@ojanvafai I've filed https://bugs.chromium.org/p/chromium/issues/detail?id=941391.